Gzip became the gold standard for file compression in the early 1990s, but if you’re still using it 2018, then you may want to consider switching to a newer compression method.

Although Gzip still has its place in the hearts of many, web developers are increasingly turning to superior options such as Google’s Brotli compression algorithm.

A Brief History of File Compression

The “G” in Gzip is short for GNU. GNU is an open source, Unix-based operating system that was developed in the 1980s. By that time, Unisys and IBM had already patented their own algorithms for compressing and decompressing files, which allowed their machines to store more data. Therefore, programmers Jean-loup Gailly and Mark Adler created Gzip as a free alternative for GNU users.

The new Gzip wasn’t just a cheap knockoff; it was actually faster than its copyrighted competitors. As a result, people still use it for file compression to this day. While it’s easy to stick with what you’re comfortable with, there are various compression algorithm that currently provide better compression results than Gzip. That’s where Brotli comes in.

What is Brotli?

Brotli is a newer data format specification that takes advantage of multiple algorithms to condense data more efficiently than Gzip. In 2015, the Brotli specification was generalized for HTTP stream compression with the content-encoding type ‘br’.

Developed by Jyrki Alakuijala and Zoltan Szabadka, Brotli uses the same compression algorithms as Gzip, but it’s also supported by a dictionary of frequently-used words and phrases to deliver a better compression ratio.

Keep in mind that Gzip and Brotli should only be used to compress text files. Binary files like JPEGs and MP4s rely on their own format-specific compression algorithms. If you try to compress a JPEG with Brotli, the resulting file will actually be bigger than the original.

Although it wasn’t always this way, Brotli is now supported by all major browsers.

In the event that a browser which doesn’t support Brotli requests an asset from a site delivering Brotli-compressed files, the server will fallback to Gzip and deliver encoded assets that the browser supports – given the server is configured properly.

What Makes Brotli Better?

According to research conducted by CertSimple:

• JavaScript bundles compressed with Brotli are 14 percent smaller than Javascript bundles compressed with Gzip.
• HTML files compressed by Broti are 21 percent smaller than their Gzip equivalents.
• CSS files compressed by Brotli are 17 percent smaller than those compressed by Gzip.

Since most websites rely on all three of these types of assets, that’s a considerable difference in asset sizes when comparing against Gzip. These savings, in turn, will make a noticeable improvement in your app’s performance.

Gzip vs Brotli: Getting the Most Out of Brotli

Despite what you may have heard compressing assets with Brotli is not slower than Gzip. That said, Gzip and Brotli offer variable levels of compression, and Brotli’s default settings may result in slower compression than Gzip’s default settings. You’ll have to make some adjustments to Brotli to strike an acceptable balance between file size and compression speed.

The ideal compression setting depends on what and when you are compressing. A good starting pointing is Brotli 4 for faster compression of dynamic content. On the other hand, static assets can be compressed more densely beforehand without sacrificing speed, so the default setting of “11” is more appropriate for such content.

Installing Brotli on Your Web Server

Adding support for Brotli provides significant gains for minimal effort. Depending on which web server software you’re using will determine which integration method you’ll need to use to integrate Brotli. The following outlines a few options available:

• Nginx has a Brotli extension offered by Google.
• Apache offers a dedicated Brotli extension.
• Microsoft IIS doesn’t offer any official Brotli support, however there is a community module that adds support.
• Node.js is similar to Microsoft in that there is no official support however there is a community module.

To demonstrate a quick installation example, let’s say you’re running Nginx. In that case, you can install the ngx_brotli module with the following:

cd nginx-1.x.x
$ ./configure --add-module=/path/to/ngx_brotli
$ make && make install

Next, add the following to the HTTPS block (Brotli only runs over HTTPS):

brotli on;
brotli_static on;
brotli_comp_level 4;
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

You can modify the above directives as you see fit.

Finally, enter the following to restart NGINX and start reaping the benefits:

sudo systemctl restart nginx

Using Brotli with Pre-Compressed Assets

Brotli is great for delivering pre-compressed assets much faster than Gzip. This is due to the fact that you can compress them at Brotli’s highest level (11) and then have the origin server pick them up whenever requested.

This sort of setup works great with Webpack as a Webpack plugin is available to automatically compress your static assets as both Gzip and Brotli. Therefore, no on-the-fly compression is required which means time otherwise spent compressing the files is saved.

Learn more about how to use Webpack to generate Brotli-compressed assets.

Does Your CDN Support Brotli?

To fully reap Brotli’s benefits, you need a content delivery network that supports it. KeyCDN, for example, introduced Brotli support last year for all customers at no additional cost. Therefore, not only will your site benefit from reduced file sizes thanks to better Brotli compression, but they’ll also benefit from reduced latency thanks to the assets being cached on edge servers closer to your visitors.

This method requires that your origin server supports Brotli and that the actual compression happens on the origin server side. Again, this helps save time and avoids the need for on-the-fly compression which can hurt performance.

Gzip vs Brotli: In Summary

The tiny amount of effort required to add Brotli to your web server is well worth the substantial file size savings. Although Brotli may sometimes run slower on its highest compression settings, you can easily achieve an ideal balance between compression speed and file size by adjusting the settings.

While using Brotli can turn fast web apps into faster ones, it won’t necessarily make slow apps fast. Since Brotli only compresses text-based assets, you’ll need to optimize your images by other means. If you’ve yet to make the jump to HTTP/2, doing so can make a huge difference in your app’s performance. Every millisecond counts, so any action you take to speed up your application improves your chances of retaining users.