Brotli Compression: How Does It Work and Why Your Website Needs It
There are many ways you can optimize your website and make it more appealing to people. The loading speed is one of the most important indicators of its performance – if it’s not fast enough the users will simply close the tab and never come back. Integrating newer and more effective technologies into your infrastructure can noticeably improve your website’s performance. Today let’s speak about the Brotly compression algorithm.
Brotli is a web-oriented lossless compression algorithm developed by Google. It helps websites load faster by optimizing the content that’s being sent from the server to the browser. Basically, it compresses all the non-image data any website has, meaning that it minimizes the code without affecting the user experience in any way.
While being less popular than its main competitor gzip, Brotli is supported by all major browsers. In fact, due to its performance it is now becoming more and more popular and might soon overtake the market.
How does compression work?
When detecting that you’re sending plain-text content to a browser (aka a code), the server compresses it beforehand and creates a bundle of files. After receiving that bundle, the browser decompresses it and only then displays it. This makes it much faster to run the files from one place to another and consequently decreases website loading time. Both gzip and Brotli work this way. But what makes the latter the best option for most cases? Let’s see.
Brotli vs Gzip
At their core, both compression formats have the same technologies: the LZ77 algorithm and Huffman encoding. Introduced in 1992, gzip was primarily created for compressing and decompressing files. Initially, it was written for the GNU Project.
Brotli, on the other hand, is a much newer product (2013) developed by Google specifically for compression for the web. Here’s how Brotli manages to achieve smaller compressions in less time.
Brotli uses dictionaries
The game changer is the data dictionary Brotli uses to make the transfer of the files much faster. Both the server and the browser “use” the dictionary to save the users’ precious seconds. Instead of full keywords, it uses only short keys, which allows for a significantly shorter transfer time and smaller files.
In fact, there’s not one, but two dictionaries – a static one and a “dynamic sliding window”.
The static dictionary is a fixed dictionary of common terms that act as cues for the HTML, CSS, and JavaScript code. It contains 13,504 words and syllables from 4 to 24 characters in length. These are commonly used words from English and five other languages as well as commands and phrases from programming languages. Brotli uses these words as references to points in the code.
This dictionary makes sure that the encoder instead of reading through the text can quickly detect the cues, find the corresponding definition and move on.
The dynamic dictionary, at the same time, cashes the most recent data to reference it in the next transfers. The “dynamic sliding window”, as it is called, can store up to 16 MB of information.
Brotli performs better
While gzip is still more popular, Brotli does perform better: it creates smaller compressions and runs significantly faster than gzip. As a result, users see the websites load faster and less often quit the page. We notice that during our work, too. At ASAP Lab, we support Brotli to ensure that we provide the fastest website performance to our clients.
Compression performance comparison: Brotli vs other formats
It is worth noting that more and more hosting providers are using Brotli compression on their servers to give site owners additional benefits in terms of speed and file delivery. Scalesta is no exception. We have created a dedicated managed hosting solution that, among other things, already includes regular automatic image compression to maximize the performance of our clients' websites.