Minification is perhaps the most misunderstood and maligned function of website optimization. Why is that?
While the concept of it is actually very simple, in reality, it often breaks things, leaving non-technical website owners tearing their hair out. Minification is almost always mentioned as a web performance best practice, so a lot of people want to use it. For developers there are a lot of tools available to implement it into the development workflow – Gulp & Grunt for example.
For the average website owner, there are plugin-based solutions but these can be tricky to implement because their behaviour will vary from site to site, depending on what theme and plugins your site is running. While some of the other aspects of performance optimization work much the same way on each site, minification tends to vary the most. Its unpredictable nature is one of the reasons it causes headaches.
What is it anyway?
In WP Rocket we call it file optimization and it can be selected for CSS files, JS files and HTML. Other plugins may simply call it minification.
It is typically comprised of two complementary processes:
So the point of minification is reduce the file size of your CSS / JS assets so that they will download faster.
The result is a lot like those special compression bags you can put in your suitcase. You put your clothes in the bag and then the air is sucked out making the package much more compact.
Before minification, a CSS file will look something like this:
After minification, it will look like this:
Concatenation means joining together. So, for example, if you have 10 CSS files on your site, the concatenation process will combine them into a couple of files.
How does this help?
I’ll refer back to an analogy I used in a previous post – How To Choose A Fast Theme – where we talk about HTTP requests. Imagine you’re out with some friends. You go to the bar to order a round of drinks, for you and your 7 buddies. In this example, you are like the web browser (i.e. Chrome, Safari etc), and your bartender is the web server. Your bartender has a maximum of 2 hands, so (s)he can only fetch a couple of beers from the fridge at once. That means (s)he has to make a total of 4 trips to the fridge to bring you the 8 beers. That’s time consuming.
But, what if you order a pitcher of beer instead? This way, all 8 drinks are in one container, so in one trip, the bartender can bring you your order. That’s much more efficient.
Just like your bartender, browsers can only handle a certain number of files simultaneously. So the more files you have on your site, the more trips to the server that takes. And modern websites are often ordering dozens of files at a time. Concatenation joins multiple files together so your server can send fewer files to the browser and it will be a faster process.
Sounds easy enough, so what’s the problem?
Whenever there’s a problem with minification it means you have to hunt down the problematic files and exclude them from the process.
Is it worth the effort?
Minification is not the place you will make the biggest gain on your site, it’s more of a fine-tuning step. You might see a little improvement in speed, but it won’t be earth-shattering.
So, if you haven’t done anything else, this is not where you should start.
CSS minification usually works pretty well, and debugging is a little easier.
JS minification can be a real pain to debug because the files that need to be excluded aren’t always intuitive, so it can take a lot of time to try and figure out. And that may not be worth it, especially if you are not a developer and are trying to figure it out for yourself.
Implementing page caching and optimizing your images are both activities that are pretty easy to implement and where you will see a noticeable improvement in loading time.Caching & image optimization will give you a bigger bang for your buck than minification #webperf Click To Tweet
Check out the other installments of our Performance Optimization Series:
- Page Caching for WordPress
- LazyLoad Your Images
- Browser Caching