You will often encounter the words ‘Minification’ and ‘Minify’ when dealing with WordPress optimisation. Minification can be a valuable tool – provided that it is used sensibly. You will often find Minification is a function offered by caching plugins as part of the general ‘caching configuration’.
Minification is the process by which JS, CSS and HTML files can be reduced in size by removing ‘unnecessary’ (for computers) characters such as white space, comments and line breaks from files. The files are re-written to the server and can be considerably smaller, thus leading to an improvement in download speed.
Size reduction can be between 30% and 50% – the exact amount of reduction is determined by the amount of white space, comments, etc. in the files. Files written to be readable by human beings will be minified most!
So, what does this reduction in file size give us:
1. Improved Page Load Speed:
- Smaller file sizes mean faster loading times, which directly improves the overall page load speed. Faster load times are crucial for user experience and SEO rankings.
2. Better User Experience:
- Quicker page load times lead to better user experience. Users are less likely to abandon a site that loads quickly.
3. SEO Benefits:
- Google and other search engines consider page speed as a ranking factor. Minifying your CSS and JS can contribute to better SEO performance by improving page load times.
4. Reduced Bandwidth Usage:
- Minified files consume less bandwidth. This is especially important for mobile users or visitors on slow internet connections.
5. Decreased Server Load:
- Smaller files put less strain on the server, which can lead to faster response times and the ability to handle more simultaneous users.
However……
In many cases the size of the minified CSS and JS files may be small in relation to the size of other page assets.
For example – you might have a set of minified JS and CSS files that are now 200kb in size (let’s say the originals came in at 400kb. Sounds like a good saving – and it isn’t to be sneezed at! But if the other page assets – images, etc. – come in at a couple f Mb, then the savings can be smaller.
If we had a page where the assets come in at 2Mb, and the original CSS/JS files at 400kb, then we have a total download size of 2.4Mb. After minification we have a total load size of 2.2Mb – a reduction of about 8% – not to be sneezed at, but as we will see later – can come with a few caveats.
Tools for Minification:
- There are a number of Plugins available – free and premium – that can be installed on your WordPress site that will include Minification as one of the techniques used to minify the files. Note that if you apply minification locally on your website and use a remote caching system such as Cloudflare you will need to update Cloudflare after the minification process. Using a caching system has advantages in that the source files are not permanently modified; the minified files are written in to a cache folder which is referenced instead of the source files.
There are also a number of online tools like CSS Minifier and JSCompress that allow you to manually minify files. When using these tools, you download the files from your site, minify them, and then upload them again. Manually minifying the files and replacing the original ones means that:
You will not be able to easily read and edit the minified files directly. You will need to get the original files and make any modifications to them, then re-minify.
In a related manner, if the code belongs to a Plugin or Theme that is updated, then after the update your manually minified files will be over-written.
Get me some minification goodness….?
Much of the time properly minified files will work perfectly well on the site. But occasionally they will break in a major way and cause all sorts of pain. This is one reason why using a cache plugin is a better bet than manually messing around with the files – it’s easier to back the minified files out!!
Why should minification break things?
There are a number of ways in which the minification process can generate minified files that no longer work as expected. Some are due to the minifiaction process being used, others due to poor coding practices
Minification can sometimes break CSS and JavaScript files due to the following reasons:
Code Dependencies
- CSS Dependencies: Some CSS rules or frameworks rely on specific formatting or comments to function correctly. Removing these can cause issues with how styles are applied.
- JavaScript Dependencies: JavaScript often has dependencies between different functions and libraries. Minification might alter variable names, accidentally remove necessary whitespace, or change the code structure in a way that disrupts these dependencies.
Poor Coding Practices
- Implicit Global Variables: If JavaScript code relies on implicit global variables or poorly scoped variables, minification can inadvertently rename these, leading to conflicts and errors.
- Dangling Semicolons: JavaScript requires semicolons to terminate statements. If semicolons are omitted, minification might concatenate statements incorrectly when it removes line end, resulting in syntax errors. I’ve always been surprised at how ‘slack’ JavaScript is sometimes with letting me get away without ending a line properly; now I know why I shouldn’t rely on that slackness!!
Inline Scripts or Styles
- Inline Code Issues: Inline JavaScript or CSS within HTML can be particularly sensitive to minification because these might depend on exact formatting or specific characters that minification removes or alters.
Conditional Comments or Hacks
- CSS Hacks: Some CSS hacks or browser-specific rules rely on specific formatting that can be stripped away during minification, causing these rules to fail.
- Conditional JavaScript: If JavaScript relies on conditional comments (especially old IE hacks), minification might remove or alter these, causing unexpected behaviour in certain browsers.
There is a lot to be said for not being too clever with your code if you want it to minify properly! Many of the failures caused by these issues are becoming less common these days as older versions of IE are no longer being supported, and code is not being developed to cope with old IS versions.
Complex Syntax and Advanced Features
- Advanced JavaScript Features: Minification can sometimes misinterpret advanced JavaScript features like closures, immediately invoked function expressions (IIFEs), or complex object structures, leading to broken code.
- CSS Variables and Functions: Certain CSS preprocessors or advanced features might be mishandled during the minification process, leading to incorrect output.
Order of Operations
- Script and Style Order: Part of the minification process often involves ‘concatenation’ – where the minified files are put in to a single file containing all the JS and another one containing all the CSS. If files are minified and concatenated in the wrong order, it can lead to issues where certain dependencies are loaded incorrectly. In JS files this can lead to syntax errors, and in CSS files this can lead to the styles being applied in the wrong order with the result that the site no longer looks as the designer intended.
Conclusions
Minification is a great process when used carefully. It will improve load time, with all the advantages offered by that. But be aware that it doesn’t always work and that it can cause a world of pain in more complex sites o those where there is a lot of older code.