Factors Affecting Website Performance: Minify and Compress
Websites are getting larger. HTTP Archive has been tracking the page weight of sites since 2010 and there is a clear trend.
The size of pages on the web is increasing.
In July 2019 the average size was under 2mb. With some pages creeping up above 7mb and it’s not that the sites have more files.
HTTP Archive also tracks the number of requests sent from a page.
These requests to files like CSS, javascript, images, etc are not going up at the same rate. In 2010 the average was 58 files. In 2019 we have an average of 74.
It’ gone up, but only by 16 and not at the same rate as page weight.
So, what does this mean?
The files on your webpage are getting bigger. The golden rule of page performance is to make these files smaller.
Smaller files = Faster sites.
So what does a fast website feel like compared to a slow one? Let's take a look at an example.
Let's find a site with small files and a site with big files. We can then get the total byte size (or page weight) using Google Chrome.
First, let's look at the BBC, you can open up Developer Tools by right-clicking the site and choose ‘Inspect’. Click on the Network tab, then refresh the page.
Once the page has finished loading we can see that it has transferred 882KB. This is the BBC's page weight.
Now let's take a look at a site with large files, Trader Joes.
Once the page has loaded we can see the page weight comes in at a much larger 7.7mb.
Now we have these numbers what is the difference in user experience.
Using a tool like WebPageTest we can compare website speed side by side and create a comparison video.
Here is the difference.
This is running on a mobile device using a fast 3G connection.
You can see that the two sites return some HTML at around the same time.
The BBC site takes 13.1 seconds to finish, a very respectable time on this type of connection. Meanwhile, Trader Joes finishes at 57 seconds. 44 seconds longer than the BBC.
Would you wait 57 seconds for a website to load?
Let's look at some of the improvements we can make.
Minify
As I mentioned earlier:
Smaller files = Faster sites.
Minifying files such as Javascript, CSS styles and HTML, will make them smaller. Minifying removes all the unnecessary information like spaces, comments, etc.
A common mistake I see often is using an un-minified JQuery file.
Using Chrome Developer Tools we can find the file by filtering on the network tab for JQuery.
In this example, the JQuery file is not minified as there are comments and it is easy to read.
The JQuery file is being loaded from JQuery.com. I know that they also offer a minified version of this file. So let's take this URL, copy the address and load the file in a new tab.
To load the minified version of this file you add .min before the .js.
There we go.
This is the same file as the original, except it has had all unnecessary characters removed.
What is the saving in bytes?
- The original JQuery file is 273KB.
- The minified version is 93KB.
That is a saving of 180KB by adding .min to a script!
Let's see if there are any more scripts we can improve this way?
Sometimes you will come across a javascript file that is custom and does not have a .min version.
When this happens we still have the option of minifying it ourselves. To do this we use a tool called UglifyJS.
All you do is copy and paste the contents of the script into an online minifier.
Pasting in contents of this file gives us a saving of 42.5% on this file, from 19kb to 11kb.
Javascript is not the only file type we can minify, let’s look at CSS next.
A quick search for styles.css in the network tab filters the results. Looking at this file we can see that the content is also not minified.
Like UglifyJS there is a tool we can use called CSSNano that will minify CSS.
To do that copy the CSS and paste the css into the window to minify.
Here we can see that minifying the CSS has made a saving of 33KB, the file has gone from 100KB to 67KB.
The last file we will look at minifying is the HTML itself. Often HTML pages have inline CSS and inline JS.
Often you can see there are CSS and Javascript mixed with the HTML.
We can also minify this, using an HTML minifier.
Next, let's look at compression.
Compression
Compression makes a file smaller, it can make a big difference in text files.
You can see if a file has been compressed by using Chrome Developer Tools and looking at the network tab. You can add the content-encoding column, which will show us if compression is being used.
Here we can see that the CSS files have GZip in the content-encoding column. So compression is enabled which is great.
Next, we can look at an example where compression is not in use.
Again, looking at the network tab we can see the response headers, and content-encoding is empty. The CSS file is 767KB and the transferred size is 767KB. So this file is not compressed.
Also, this particular file was not minified.
If we were to minify the file and compress it, the file would go from 767KB to 130KB a saving of 637KB from 1 file.
That's almost the same size as the whole BBC website in savings!
Let's look at one more example.
Having a look at the CSS we can see that it is being compressed but instead of GZip, it is using “br”.
This means that they are using the newest type of compression called Brotli. This can compress files even further than GZip but it is not supported by all browsers.
Wrapping Up, Factors affecting Website Performance
One aspect of website performance is page weight. The smaller the files on your site the quicker your page will download.
Smaller files = Faster sites.
I have shown how you can use 2 techniques to reduce file size.
Minification takes a file and reduces the characters so that it only includes the data it needs.
Compression takes this file and makes it even smaller.
Make sure to do this to all Javascript, CSS and HTML on your site to reduce overall page weight.
Images also contribute to page weight so take a look at how to optimize images for web without losing quality