The Difference Between Brotli And Gzip Compression Algorithms To Speed Up Your Site

Are you looking for free ways to make your website faster? One way that every website owner can get a little free speed is to turn on compression at the server. When both the webserver and the browser it is conversing with understand a common compression algorithm, then the data that is actually sent over the wire can be compressed. Compressed data is smaller. Smaller data is received faster. 

What is Compression?

When you type in a URL into your browser, your browser starts a conversation with the server and one of the things it tells it is if it can decompress content and if so, what compression “algorithms” it understands.

Your server listens, and if you have turned on compression and it knows one of the compression algorithms the browser does, it will compress all the data and send it to the browser.

Most modern web browsers understand or “accept” content encoded in one of three algorithms:

• Deflate
• Gzip
• Brotli

When a web browser contacts a server, it sends a header that looks like this:

Accept-Encoding: br, gzip

That tells the server that it understands data compressed in either Brotli (br) or Gzip (gzip). Servers do have the option of ignoring this and returning uncompressed data as well. 

Overall though, compressed data travels faster than uncompressed data. So your website gets to the browser faster if the data is compressed.

Compression mainly applies to text:

• HTML
• JavaScript
• CSS

These make up a large chunk of modern websites these days and all of these can be compressed by server-side compression algorithms. 

On the other hand, most image formats (jpg, png, etc.), most audio formats (mp3s) and other non-text binary files are already compressed. Compressing these won’t make any difference so regardless of the Accept-Encoding header, servers will send these as it is.

As stated above, most modern web browsers will accept 3 main compression algorithms. Most servers have now migrated to one or both of the two most popular ones, Gzip and Brotli.

What is Gzip Compression?

The two most common compression algorithms are Gzip and Brotli. Gzip is the oldest and most common of the two. It was written by Jean-loup Gailly and Mark Adler. The initial beta release was made in 1992. The first actual version, version 1.0, was released in early 1993.  back in 1992 just as the web was coming online for most people. 

Gzip was designed as an all-purpose compression library. The theories behind Gzip were based on the earlier compression algorithm, DEFLATE. 

Because of its popularity – and the fact that it is very good at making files small – it is stillwidely used today both in different operating systems as well as a primary compression algorithm for web servers. 

What is Brotli Compression?

Brotli was developed by Google employees Jyrki Alakuijala and Zoltán Szabadka in 2013. Google was originally looking for a better way to compress WOT files which are web fonts. 

Gzip was originally intended to compress files and has been adapted to compressing streams so it could work on the web. Brotli on the other hand,  was designed from the beginning to compress streams. This makes it a better choice for web servers to compress content before streaming it to a browser.

In 2015, Google released the Brotli specification for HTTP. In addition to specifying how the browser should notify the server that it can decompress Brotli by sending a “Content-Encoding: br” header, Google engineers also made other improvements to Brotli that made it even faster for compressing web content.

What’s The Difference Between Brotli and Gzip Compression?

While they both have their origins in the LZ77 algorithm, Gzip was designed specifically to compress files. The library has been incorporated into a lot of different programs that need to compress files. The library was incorporated into web servers as compressing content started to be the norm. It was one of two compression algorithms specified in RFC 2616, the HTTPS 1.1 specification. While it wasn’t specifically designed for streaming operations like web servers, it was adapted to it.

Brotli, on the other hand, was specifically designed for the web. Google recognized the need for a way to compress streams more efficiently so they designed Brotli.

Both algorithms do a good job at what they were designed to do. Gzip still continues to be used on the web because it is still better than nothing at all. However, as Brotli grows in popularity, more and more web servers are preferring Brotli over Gzip. Given the choice of the two, Brotli is the default many servers will use. It’s been the default choice on all SiteGround servers for a while now.

Check the following video for more reference on the differences between Brotli and Gzip!

Benchmarking Brotli And Gzip

When Brotli was benchmarked against gzip, it was found that it compresses files better:

• 14% smaller JavaScript files
• 21% smaller HTML files
• 17% smaller CSS files

Since Brotli was designed to compress streams on the fly, it is faster at both compressing content on the server and decompressingit in the browser than in gzip. In some cases the overall front-end decompression is up to 64% faster than gzip.

How Can I Enable Compression On My Website?

In simple terms, “turning on compression” simply means telling your web server to compress everything before it sends it to a browser that has announced it can handle compression.

If you are a server administrator, you know how to edit config files. If you are not a server administrator, skip this section and scroll straight to the “If I am not a server administrator” section below.

If I Use Apache

If you are using the Apache web server, there are 2 steps to enabling Brotli compression:

• Firstly, enable the apache Brotli module. It is included by default but may not be enabled:

$ sudo a2enmod brotli 

• Next, you need to edit your web hosts config file and tell the server what you want to apply the compression to:

<IfModule mod_brotli.c>

            AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript

</IfModule>

In the example above, we are telling the web server to compress:

• HTML
• Plain Text
• CSS
• JavaScript

These are the main types of files that can be compressed.

If I Use Nginx

Nginx is another very popular web server. Like Apache, it is controlled by config files. You need to locate your nginx.conf file and add the following two lines:

load_module modules/ngx_http_brotli_filter_module.so;

load_module modules/ngx_http_brotli_static_module.so;

Then in your website’s individual conf file, you need to add the following:

brotli on;

brotli_static on;

brotli_types *;

After making the changes, either Apache or Nginx, restart your web server and now it will respond with a “Content-Encoding” header if the browser sends a “Accept-Encoding” header.

If I Am Not A Server Administrator

If you are not a server administrator, it’s actually much easier for you to enable compression on your server. You simply pick a host like SiteGround that turns it on by default. It’s that easy. 

Most top-tier hosts like SiteGround are interested in both making your site as fast as possible, and conserving as much bandwidth as possible. These are the two biggest benefits of enabling compression. Therefore, top-tier hosts turn on compression by default. 

If you are not a SiteGround client, then you need to make sure that your web host turns on compression on your web server. If they don’t and they won’t turn it on for you, it’s time to find a new host.

How Can I Test Brotli and Gzip Compression?

So how can you tell if compression is turned on for your website? There are a couple of ways to do this. 

The Hard Way

• Open a browser. I’m going to use Chrome in this example but the concept will work with any browser. The names of the options might change a little though between brands of browsers.
• Right click anywhere on the browser and select “Inspect”
• This will open a window on the side or bottom and it is a very busy window. The window has several tabs with names like this.
  • Elements
  • Console
  • Sources
  • Network
  • Performance
  • Etc…

• Find the “Network” tab.
• In the URL box above, enter your website’s URL and press enter. This is going to fill the network tab with a lot of different records. Scroll back up to the very first record. It should just be the name of your domain.

• Click on that first record.

• Locate the “accept-encoding” header. It will be located in the “Request Headers” section. These are the headers that your browser sent to the server. If you don’t have this header then try a different browser because the server won’t compress if the browser doesn’t send the compression header.

• Finally, locate the “content-encoding” header. This will be located in the “Response Headers” section. These are the headers that your server sent to the browser before it sent your website. This tells the browser that the server chose Brotli as the compression and it should uncompress the content streams as they come in before displaying them.

Honestly, most developers – myself included – do it this way. Yes, for the uninitiated, it is the hard way. If you don’t normally use the Inspect tab to dig into the conversation that your browser and the server are having then it can be confusing. However, once you understand what to look for and where, this way requires very little effort and is available everywhere.

The Easy Way

Still, there are those people who are not comfortable doing it this way. For those of you that are reading this article and fall into this category, I present to you, the easy way.

• Point a browser at the URL https://www.giftofspeed.com/gzip-test/
• Enter your website’s domain name in the box provided.
• Click the “Check” button.

Seriously, that’s it. When checking my site, I got the following results.

Not only does this tell me that my web server is capable of encoding my website in Brotli, it also tells me that 80.66% of my website came across encrypted.

Wrap Up

Compression in websites is now the norm because it helps your site load faster. 

Currently, Brotli is the best compression algorithm available for websites. If you see you are not offering Brotli, move to a web hosting partner that has it enabled. A hosting partner like SiteGround! You can get +15-20% smaller files with Brotli and smaller files mean a faster loading website. Check out more about SiteGround’s implementation in our article, More Site Speed Gains with Brotli Compression Algorithm. You can also harness all of our other speed boosters that will make your site fly.