Gzip vs Brotli – Best Browser Compression

The web today is bigger than ever before, with average desktop page weight up more than 6% in the last year alone. Thankfully, there are simple measures that web developers can take to ensure that the files being served to their visitors are as small as possible.

One such measure is HTTP compression. You might have noticed 2 different compression options in your research, and wondered which was better. So in this article, we’ll pit Gzip vs Brotli and completely end the debate!

OK, not really. But we’ll definitely help you decide which is the best choice for your situation.

What is HTTP Compression?

Simply put, compression allows the web server to send smaller files to your web site viewers. When someone enters your URL and requests your site, their browser will indicate to the web server that it understands compression (and which type it understands).

These compressed files allow for quicker network transfers so that your website can be loaded as fast as possible.

As we discussed in our article on how to test your page weight, compression is pretty much standard practice in web performance now, so you absolutely want to make sure you’re taking advantage of it. Thankfully, it’s almost universally supported by web servers and all modern browsers and is also fairly easy to set up, as we’ll detail below.

Gzip Compression

Gzip has been the go-to compression method for years, offering up to 70% fills size reduction and boasting near-universal support.

It is based on the DELATE algorithm, so if you’ve seen that term used interchangeably, that’s why. Gzip works by greatly reducing the amount of duplicate code and white space in a website’s files. It also offers 9 levels of compression, so that the amount of compression and the time it takes to compress can be fine-tuned.

How Do I Enable Gzip?

Adding Gzip to your site will vary based on your hosting provider and web server.

If you’re using an Apache server, the below code can be added to your .htaccess file. Depending on your specific site, there are other file types you can add, such as fonts, SVG images, etc.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

If you're using an NGINX web server, you’ll add the following code to your config file to enable Gzip.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

Disclaimer: please consult your system admin before making any server configuration changes

After you’ve got everything set up, there are many ways that you can test to make sure your site is being compressed. Most page speed audit tools will send you an error letting you know if your site is not being compressed, however, we really like this tool from Varvy, as it shows you just how much page weight is being saved through compression.

For our WordPress readers out there, the above methods will still work for you as well! However, you can also use various plugins that will do the job as well. Many caching plugins like WPRocket also offer Gzip compression right out of the box.

Because of its ease to set up, impressive compression, and quick time-to-compress, Gzip remains a solid option going forward. However, recently a new contender has gained the widespread browser support needed to be considered a great alternative - Brotli.

Brotli Compression

Created by Google in 2013, Brotli is a compression algorithm created by Google for the compression of web fonts. In 2015, they released a version to be used for HTTP compression.

As we discussed in our article about SSL and HTTP/2, you’ll need to make sure you’re using an SSL certificate to take advantage of Brotli.

Brotli offers a significant speed advantage over Gzip, which is why the Brotli vs Gzip debate has really picked up steam.

According to Certsimple:

• Javascript files compressed with Brotli are 14% smaller than gzip.
• HTML files are 21% smaller than gzip.
• CSS files are 17% smaller than gzip.

For a while, Brotli lacked the browser support that would allow it to be used in the same way that Gzip is. However, that is no longer the case as Brotli has gained support from every modern browser according to caniuse.com.

You can test your site here to see if your web server supports Brotli compression. If it says it’s not supported, there may be a setting that simply needs to be turned on through your hosting provider.

How Do I Implement Brotli?

While you can have the web server compress your files on the fly, this typically isn’t the best option. This can be pretty CPU intensive. The best course of action is to pre compress your files and serve them alongside your regular files. This way, the server can choose to send them upon detecting that the receiving browser supports Brotli. You can check out a complete guide on this process from Tezify.

If you use a CDN, such as Cloudflare, we have even better news! You can often serve Brotli compressed files with the flip of a switch. This may require an additional fee, however, depending on the CDN.

Other things to consider

When implementing HTTP compression, it’s important to note what should be compressed and what should not.

Images (JPG, PNG, WEBP, etc.) are already compressed, and therefore cannot be compressed again. And while you might think that trying to compress them again would be harmless, you’d be wrong. Trying to compress files a second time uses CPU power on a useless task, and actually makes the files bigger, by adding headers, compression dictionaries, and checksums.

On the contrary, you want to make sure that you’re compressing everything that you can compress. Some developers only add compression to the big three (HTML, CSS, JavaScript). This ignores many file types that may be included in your site such as JSON, XML, SVG, and Plain Text.

Keeping these points in mind will make sure that you’re serving the lowest file sizes possible, and keeping your visitors happy!

Gzip vs Brotli - Summary

For a lot of readers, which compression method you choose will depend on the ease of implementing them.

At a bare minimum, you need to be using at least Gzip compression.

To not be using any compression would be wasteful, and would lead to a terrible experience for your users.

If your web server or CDN supports Brotli, and you’d like to take advantage of the additional savings it offers over Gzip, give it a shot!

Let us know what page speed benefits you notice after implementing HTTP compression!