Minification is a function of website optimisation. But it isn’t always easy to explain what it is, and some people don’t think very well of it. Why is that?
Even though it is actually a very simple process, it can break things, leading to frustration and lost time. It is however recommended highly, so of course, it is seen as something that must be done. Developers have it a little easier as there are tools available to make the process easy, but what about the average Joe or Jane?
There are plugins out there but these can be difficult to utilise, as their behaviour might vary, based on the theme and plugins your website is using. Minification is not an exact science and its unpredictability is one reason it creates havoc.
So what is minification?
Here we call file optimisation and it can be used for optimising CSS files, JavaScript files and HTML. Other plugins often label it minification.
Usually it comprises two processes that work side by side:
Minification & Concatenation
Minification
Minification means taking out unnecessary parts of CSS and JavaScript files to reduce them in size. When developers code, they include elements that make the code easier to read by other developers, but not for your browser to process the code. Minification strips those elements.
So the point of minification is reduce the file size of your CSS and Java Script assets so that they download quicker.
Concatenation
Concatenation means to join together. If you have 7 CSS files on your site, concatenation will combine them into less files, maybe 2 instead of 7.
So what does this do?
Browsers can only handle a certain number of files at the same time. So the more files on your site, the more times your browser needs to communicate with the server adding time to the site load. Modern websites often process dozens of files simultaneously. Concatenation will sew multiple files together so your server needs to speak less with the server speeding the ‘order’ up.
So what’s the issue then?
Sometimes minification and concatenation can break things. Your layout might break completely, or a function stops working, like your payment portal (big oops). . Each site behaves differently depending on the themes and plugins installed, and how they have been written into code. The state of your server can also contribute to the evil… Often, particularly for JavaScript, it’s often related to the loading order of the files which can affect Google’s page load speed test, as Google wants the files loaded differently.
Whenever there is a problem you have to find the specific files and fix them, which can be a drag.
Is it worth it?
Minification is not a first thing to do, it is a fine tuning option. So don’t start with it. There are far greater gains to be had from some more primary optimisation techniques.
CSS minification normally works well, and debugging these files is easier.
JS minification can be extremely difficult to debug because the files often need to be found through trial and error. This can be akin to needles and haystacks in a big site with a non-developer.
Page caching and image-optimisation are both processes that are fairly easy to implement and provide larger loading time gains initially. before mininfication and concatenation we recommend these larger gain processes first in all cases!