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
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.
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.
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.