Brotli vs gzip vs no compression

We live in an era where there is more users browsing web using mobile devices rather than desktop. Data from StatCounter, internet monitoring company, clearly shows that year on year there is more and more mobile visitors and this trend is unlikely to change. It is important to realise that not every user has a fast, unlimited data 4G connection. When developing websites / web apps we need to keep in mind constrains like slower connection or data download / upload limits thats users have as a part of their mobile plan.

In this post I will share the outcome of serving standard website with:

  • no compression, this is a simple Express setup. You can think about it as of raw instance of node that you can get from AWS, DigitalOcean etc
  • enabled gzip compression
  • enable Brotli compression

When I said ‘standard website’ I referred to usual, boilerplate website that includes some CSS, JavaScript, Fonts and images. I deliberately included non-minified and minified versions of some CSS / JS to see how much percentage-wise could be saved with compression of each type of resource.

Sample code used for taking measures can be downloaded from Github. I took all results from Network tab in Google Chrome but other browsers or network / packet analyser tools (Fiddler, Wireshark etc). If you can’t see Content-Encoding column right-click on any other column header, select Response Header and then select Content-Encoding. This is where you will see type of¬†compression applied. There is one more thing to remember if you decide to check results locally. To be sure that, when you refresh sample web page, you won’t get results from the cache. You need to (while Dev Tools are opened) right-click on refresh icon in Chrome and select Empty Cache and Hard Reload.

Out-of-the box set up – no compression

As mentioned before, this is a ‘raw’ node instance, without any additional optimisation, only whatever you need to get started. Below you can see a screenshot from Chrome Dev Tools.

No compression
No compression

Enabling gzip compression

gzip is one of the most popular compression algorithms. The easiest way to find out how widely it is used is to analyse network resources of any website that you are visiting. Pretty much every website have some assets compressed with gzip.

gzip compression enabled
gzip compression enabled

 

Enabling Brotli compression

Brotli compression is one of the ‘youngest ‘compression formats but is it already known as ‘must-have’ in traffic heavy environments. Read this post if you want to know how ‘big boys’ aka Google Play took advantage of Brotli.

Brotli compression enabled
Brotli compression enabled

 

Leave a Reply

Your email address will not be published. Required fields are marked *