In this article, we’re going to learn about making the files that make up our websites smaller so the reader’s browser has to download less — improving the performance of your site.
- What is minification?
- What is combination?
- Why does combining help?
- What is compression?
- How do I know if compression is on?
We do this through a series of processes called minification, combination, and compression.
What is minification?
Minification is when the text content of a file is stripped of as much “filler” text as possible — on the web, this usually means removing spaces, carriage returns, and comments from HTML markup/CSS style code.
Or abbreviating variables/functions in JavaScript — but you won’t see too many performance plugins doing this in JavaScript because it can introduce errors (all plugins created on this site are pre-minified to the smallest size possible).
The entire point is to make the file sizes as small as possible (prior to compression).
This is possible because there is no reason to deliver files full of spaces and comments to your reader’s browser. Those comments are only needed by the site admin (or your designer/developer).
Minification can shave a small bit of size off every file.
What is combination?
Combining is where like files get merged into one file, reducing the number of separate files that must be delivered to the reader upon request.
For example, in WordPress, your theme has a style sheet. This is where the CSS code is that tells the reader’s browser how to style your site.
The various plugins you install could add their own style sheets as well.
The result is a page that would require the reader’s browser to download multiple style sheets to render your site.
These can be combined to turn all the various style sheets into one.
Why does combining help?
It has to do with the request pipeline. Very roughly, it works something like this:
- The reader clicks a link to your site
- Reader’s browser asks DNS for the IP address of your site
- Reader’s browser connects to your site
- Your site tells their browser there are multiple style sheets and scripts to load
- The browser will use more connections to download those
As you can imagine this starts to add up. So combining files reduces the number of connections the reader’s browser will need to perform in order to render your site.
In a future lesson, you’ll learn about HTTP3 which has special features to speed up this “multiple connection conundrum.”
What is compression?
Compression is when an algorithm is used to reduce the file size before streaming the content of your site to the reader’s browser.
Gzip is the most common compression algorithm on the web. Brotli is a newer algorithm that can save anywhere from 14% to 21% over Gzip.
The inner-workings of how compression works is a topic for computer science courses — too deep for this course.
All you need to know is the algorithm crunches the file size of your site down so it can load faster for your reader.
Much like zipping up files on your computer to reduce storage size.
Compression is one of the biggest impacts on your site performance and should always be turned on. Gzip compression at least, brotli if your host offers it.
How do I know if compression is on?
You can learn about this more in-depth in my article “How to Properly Test Your WordPress Performance.” When you check the response headers of your page, you’ll see something in the “content-encoding” section.
In this case the content-encoding shows “br.” This means it is compressed using brotli.
Your caching plugin will take care of most of this for you. Both WP Rocket and Swift Performance will make these a snap to set up if you’re not using LiteSpeed like I am.
Take care,
