Brotli vs Gzip: Which Compression is Better for WordPress?

Brotli vs Gzip Compression? Find out which compression tool is better.

When it comes to website performance, the bar is high. One of the factors that determine a great website is its speed. These days, websites are filled with images, videos, and scripts, which means they require more time to load.

Nonetheless, website owners who want to stay competitive must avoid slow-loading pages. Your visitors will leave your site if they have to wait for even a few extra seconds. To prevent this from happening, you should reduce your website’s loading time.

One way you can improve your site’s speed is through data compression. This technique saves storage space and increases speed. In this article, we will explain what data compression is. We will also compare two major compression algorithms – Gzip and Brotli.

What is Data Compression?

Data compression is the process of reducing web files using a compression algorithm. The compression can either be lossy or lossless. In lossy compression, data quality may reduce. Lossless compression reduces the size of web files without affecting their quality.

Here is why compression is important; when you enter a URL into your web browser, it sends a request to the web server. The server is responsible for fetching and displaying the data on web browsers.

After receiving the request, the files must be downloaded and displayed within a matter of seconds. If a website takes more than 3 to 5 seconds to load, it increases bounce rates. The more data there is to send, the longer it takes for the page to load.

Data compression tries to eliminate this issue by reducing the size of website files. As a result, your site uses fewer bits and loads faster. Many web browsers accept one or two of the most popular compression algorithms – Brotli and Gzip.

Brotli vs Gzip Compression – The Basics

Here’s a quick introduction to both compression tools.

Gzip Compression

Gzip is a compression software used to reduce the size of web files. The software was released on the 31st of October, 1992, and is based on the DEFLATE algorithm. This format detects and removes duplicate characters from web files. It is a lossless data compression that combines the LZ77 algorithm and Huffman encoding algorithm.

The LZ77 algorithm works by detecting repeated data and replacing them with tuples to compress the raw data. To further compress the data, the Huffman encoding algorithm assigns re-occurring characters with the least number of bits. Then the rare/unique characters have the highest number of bits.

Gzip was designed as an all-purpose compression library. It takes data in its raw form and compresses it losslessly. Major web browsers support Gzip, and many hosting providers offer it, so chances are your site already uses it.

Brotli Compression

This is another popular data compression algorithm. Brotli was created in 2013 by Software engineers in Google and is fast becoming the most widely used compression method worldwide. This is no surprise; unlike Gzip, Brotli was designed to compress streams, making it a better choice for web servers.

Additionally, Brotli is general-purpose and lossless. As a result, any type of file can be compressed efficiently without losing any information. Brotli comes with a wide range of support and is free to use.

Benchmark Test – Brotli vs Gzip Compression

Here’s the big question: which is better, Brotli or Gzip? To answer this, you should understand what compression entails, which is its ratio and speed.

The Compression Ratio describes the difference between a file before and after it has been compressed. On the other hand, Compression Speed refers to the time it takes to compress or decompress a file. Using this information, let’s compare Gzip and Brotli.

Gzip can reduce website files by up to 80%. This rate is impressive, but other tools like Brotli have a better compression ratio. Benchmarking Brotli against Gzip revealed the following results:

21% smaller HTML files than Gzip
17% smaller CSS files than Gzip
14% smaller JavaScript files than Gzip

You may be tempted to conclude that Brotli is better based on this data. While Brotli compresses better, it comes at a cost. Brotli takes a longer time to compress in comparison to Gzip and speed is also an important metric.

While Brotli has a better compression ratio, Gzip takes the lead in terms of compression speed.

Further, both compression tools have different compression levels. The levels directly affect the compression ratio and speed.

Increasing the compression level will increase the compression ratio. However, it will slow down the entire process. So if you need a higher compression speed, you need to reduce the level you are compressing with. This works vice-versa.

In terms of popularity and the number of users, Gzip is at the top. Brotli was created only in 2013, while Gzip has existed since 1992. Although Brotli is relatively new, it is fast growing and becoming a standard for hosting providers.

How to Test your Website for Brotli and Gzip Compression

There are two ways to check if your web page uses compression algorithms. We will discuss both.

Use an Online Tool

This is the easiest way to check if your WordPress website is Gzip or Brotli enabled. For this tutorial, we will be using compression test tools from giftofspeed.com. This tool is simple to use and also provides additional information about your website.

To begin, type your site’s URL in the text field provided, then click the Test URL button next to it. You will get the result almost immediately. That’s how easy it is.

Using your Browser’s Developer Tool – Brotli vs Gzip

Another way to test your site is to use the developer tools found in your web browser. For this tutorial, we will use Chrome, but it will work with other major browsers as well.

To start, go to the website you want to test, then right-click anywhere on the page and select Inspect.

On the developer menu, click on the Network tab. Here, you will see various metrics about the page you are currently viewing. If nothing is showing, you may need to reload the page.

Next, scroll up to the first record that has your domain name and click on it. After that, switch to the Headers tab. Scroll down to the “Response Headers” section and locate the “content-encoding” header. If you see “br”, it means Brotli is active on the website.

Otherwise, if you see “gzip”, it means Gzip compression is active on your site.

Enable Brotli or Gzip Compression on WordPress Websites

There are three ways to enable data compression in WordPress. You can manually install the algorithm on your server if you have admin access to the control panel. However, this approach requires some programming experience.

Alternatively, you can enable it from your hosting dashboard (if your host supports it). A WordPress plugin can also be used to enable it for your website.

Before we begin, you need to backup your website so you have a version to revert in case of an error. Having said that, here are 2 ways to enable data compression in WordPress.

Use a WordPress Caching Plugin

WordPress has many plugins that let you add caching functionality to your website. However, not all caching plugins will let you enable Brotli compression, so carefully research the plugin you’ll use.

For this tutorial, we will be using the W3 Total Cache plugin. To install this plugin, go to Plugins >> Add new. On the search bar, type the name of the plugin, then click on Install Now next to the plugin name. The button changes to “Activate” after the installation completes. Click on it to activate the plugin. You can read our article on how to install a WordPress plugin.

Once installed, go to Performance >> Browser Cache to open the plugin’s Settings page.

On the “General” tab, locate the data compression section. The compression will be set to Gzip by default. If you prefer to use gzip compression, you can leave the settings as they are. Otherwise, you need to untick it and enable the checkbox next to “Enable HTTP (brotli) compression”.

After that, scroll down and click on Save all settings & Purge Cache.

Similarly, CSS & JS, HTML & XML, and Media files should be set to be compressed as well.

You can navigate to your desired section using the menu. Once you have selected a compression algorithm, click on the Save Changes & Purge Cache button.

Supporting Web Host

A web host that offers data compression out of the box is another easy way to enable the algorithm. Contact your hosting provider to know if they provide compression, and let them know the level of compression you want.

If your Web Host does not offer data compression, you can use the plugin method above. Otherwise, you may need to upgrade your web hosting. You can check our review for the best WordPress hosting providers.

If your website is using the Cloudflare CDN, you can easily enable Brotli for your site. For this, log in to your site’s account from the Cloudflare dashboard. Next, go to the Speed tab and select Optimization. There, you can toggle the Brotli switch to On.

Now your WordPress website will use Brotli to handle compression.

Side note: You need to connect your website with Cloudflare before you can use the compression tool. We have a detailed guide on how to integrate Cloudflare with WordPress.

Conclusion – Brotli vs Gzip

Ultimately, compression helps your WordPress site load faster because it reduces file size. Both Gzip and Brotli help to compress your website’s files.

While Gzip is older and well known, Brotli compresses better. However, it also requires a bit more time to compress than Gzip. Even so, Brotli is more modern, and would most often give better results.

Ultimately, your goal is to give your users the best experience while on your website, regardless of the tool you use. Hence, you can test both algorithms for the unique needs of your website, and run a speed test on each.

For more tips on website optimization, you can check our speed optimization guide. Also, check the rest of our blog for other WordPress Tutorials.