You can make code files lighter by applying two techniques:
Minification - removing unnecessary parts like whitespace and comments from the code;
Compression - applying algorithms to rewrite the files’ binary code, using fewer bits than the original.
Both are low effort, high reward optimizations. And while different, the smart move is getting them in one go.
And for the easiest way to optimize your website’s code, go to "Automated Minification and Compression with NitroPack";
For now, let’s dive a bit deeper into minification.
Minification is the process of removing unnecessary elements from your website’s code without affecting its performance.
A few examples of unnecessary elements are:
Browsers don’t need these to render the page. In that sense, all they do is bloat code files. (Of course, they also help developers write and review code, but browsers don’t care about that.)
For example, here’s how an unminified CSS files looks:
Generated with this CSS generator
When we run it through a CSS minifier, the same code looks like this:
In this example, the actual size difference between the regular and minified version is tiny. But when you apply the process to large code files, the savings are significant. That’s why minification has become an industry standard over the last few years.
People often confuse minification and compression, which is understandable. Both techniques essentially provide the same benefit, i.e., making files smaller.
However, there’s a fundamental difference between the two.
While minification removes unnecessary data from a file, compression rewrites the files’ binary code and encodes the information using fewer bits than the original.
The most popular compression tool is gzip. In fact, people often use the term “gzipping” as a substitute for compression.
Gzipping works by finding the repetitive strings and replacing them with pointers to the first instance of the string. The benefit is that pointers use less space than text.
Here’s a great example of this process in action:
As you can see, the text in brackets is repetitive, so gzip replaces it with a pointer.
While gzip is the most popular compression method, there are lots of others out there.
For example, the Brotli algorithm has proven to be equally good, if not better, in some aspects.
Like minification, a few CDN providers (and hosting companies) automatically compress files on their servers. Again, go over your providers’ documentation to see if this has been taken care of for you.
You can also use the Network tab to see if files have been minified and compressed. To do so, open the Network tab (right-click and select “Inspect”) in your browser and look at the file names and response headers.
Minified files typically have “.min” in their name. Compressed files have a content-encoding header, usually with a gzip or br value.
Concatenation is another common technique for improving web performance.
Since browsers have connection limitations, concatenation is also a good practice when it comes to code optimization.
Let’s say script1 depends on script2, which depends on script 3. In that case, browsers must load and run them in a specific order. They must run script3 first, followed by script2 and finally - script1.
Any other order would break something.
That’s why you’ have to test and figure out if concatenation is right for you. You can do this with a site speed service like NitroPack that offers intelligent concatenation features.
Just make sure to test it before deploying to your live website.
There are lots of minification tools online, including free ones. They fall into three main categories:
Online minification tools;
Let’s start with the most commonly used ones.
Some of these tools were recommended by Google a while back:
For HTML minification - HTMLMinifier;
The article recommending these tools was written for an older version of PageSpeed Insights. But except for HTMLMinifier, these tools are updated regularly. You should be fine to test and use them.
Again, there are lots of these tools and they all work in a similar way:
CSS-specific - https://www.cleancss.com/css-minify/;
They’re pretty easy to use. You just give them a code file and get a minified version in return.
This approach isn’t scalable, especially if you often update code on your site. That’s why it’s best to use these tools for tests and comparisons.
As I said earlier, minification removes the parts that make code easier to read and review. If you ever need to go through minified code, Unminify can make it easily readable.
Finally, you can use NitroPack to optimize your website’s code files.
Minification and compression. NitroPack applies both techniques automatically. Minification is done on AST trees instead of using regexes, yielding the best results in terms of code size and stability;
NitroPack also comes with everything else you need for a fast website:
Put simply, our service solves all of your page speed problems in one go. But don’t take my word for it. Try our free plan - it doesn’t expire or require a credit card, so you can test NitroPack without risking anything.
Evgeni writes about site speed and makes sure everything we publish is awesome.