What is Brotli?
- Brotli is an open source data compression method that can outperform gzip in many situations.
- Brotli is currently used by several web browsers as WOFF2 font compression.
- Brotli is now being used as a general data compression method rather than just one for fonts by Chrome and Firefox.
Since it has been used broadly as the font compression type WOFF2, Brotli already has found support among several browsers (as a font compression).
In September 2015 Google released a new version of Brotli that could be used for more than just fonts.
The new release focused on using Brotli as a general http compression method as an alternative to gzip / deflate / Zopfli.
Both Chrome and Firefox can now use Brotli as a general data compression method in some instances.
Where is Brotli useful?
In general Brotli appears to have some significant advantages, but those advantages are not across the board.
One scenario that excites me is the use of Brotli for static files which when precompressed by the server. In this scenario file sizes can be compressed up to 26% smaller than current methods being used broadly by browsers.
For on the fly, dynamic content compression Brotli may have some performance issues.
Cloudflare (a content delivery network) did some testing and published their findings which is an interesting read.
Brotli compression method
“Brotli is based on a modern variant of the LZ77 algorithm, Huffman coding and 2nd order context modeling.”
In order to take advantage of the smaller file sizes offered by Brotli, both the server and the client must both be Brotli compatible.
Currently there is no server that supports Brotli as a general data compression method out of the box, but there are methods to do so.
- NGINX – Google has provided a Brotli module
- APACHE – Google gas not published anything for Apache, though there is this unofficially.
- NODE.JS – Mozilla hacks describes how to serve Brotli here.
As far as clients (web browsers)…
- Firefox – Firefox 44 adds Brotli support
- Chrome – Chrome 49 and above support Brotli using a flag
To see the most current support see the Can I use Brotli? page.
Why Brotli excites me
Brotli compression methods can realistically help bring me my dream scenario of inlining static page resources within the HTML and keeping the HTML small enough to not be affected by HTTP “slow start”.
Let me explain that…
The articles on Perf WP (like the one you are reading now) are my ongoing experiment of creating extraordinary performant pages.
The HTML of this page inlines into the html many things – the font, css, and the main above the fold images.
One consequence of inlining so much into the HTML is that the HTML can become large, even when skillfully and artfully doing so.
In my efforts for my articles I have come very close to getting the file size down enough to make the HTTP request fit into one packet (about 14kb), but I just need a little more compression.
Brotli provides that “little bit more” so I am super excited about it.