What Is Brotli Compression and How to Enable It?

Research shows that compressing text-based elements such as HTML, CSS, and JavaScript can bring notable reductions in page load durations. One of the best ways you can do that is by enabling Brotli compression.

Why? Because achieving faster loading times can directly impact business.

A study by Portent shows that sites that load in 1-second convert 3x times more than sites that load in 5 seconds. And what business doesn’t want conversions?

Therefore, in this blog, we will help you understand what Brotli compression is, how it works, and three different methods through which you can enable it.

What Is Brotli Compression

Brotli is an open-source compression algorithm known for its superior compression ratios. It incorporates LZ77, Huffman coding, and 2nd-order context modeling techniques to compress data efficiently.

Brotli introduces 11 compression quality levels, ranging from 1 to 11. As the quality level increases, so does the compression ratio. However, it’s important to note that higher compression levels will impact compression speed.

With widespread adoption, the Brotli compression algorithm is supported by all modern web browsers, with approximately 97.65% of users using browsers that support Brotli.

– Brotli

How Does Brotli Compression Work?

Brotli compression reduces the size of data for faster transfers in three stages. Let’s break them down to understand how Brotli compression works.

Stage 1: Preprocessing

Before we start compressing anything, we need to prepare the data. This is like getting everything organized before packing it into a suitcase.

Brotli first looks at the data and applies some smart techniques to rearrange it, removing any unnecessary parts that don’t need to be compressed. This helps improve the efficiency of the next steps.

Stage 2: Compression

Now comes the actual compression – think of this like tightly folding clothes into that suitcase. Brotli takes the preprocessed data and uses advanced algorithms to shrink it down into a much smaller size.

It looks for patterns in the data, finds repeated pieces, and uses shorter codes to represent them. The goal is to make the file as compact as possible without losing any of the original information.

Stage 3: Decompression

When the compressed data needs to be used, it’s time to unpack the suitcase.

Brotli’s decompression process reverses the compression, taking the smaller file and restoring it to its original form. This happens super fast, so by the time you load a web page, all the data is back to normal and ready to use — just like it was before it was compressed.

Advantages of Brotli Compression Algorithm

A study by Google found that the probability of a user bouncing off increases by 32 percent as page load time goes from 1 to 3 seconds.

Therefore, as a business, you know you cannot afford slow-loading web pages and need to optimize for performance. This is something compression really helps with.

Let’s see how Brotli compression helps you gain just that:

Compression Ratios

Brotli is seriously good at squeezing data down without losing quality. It is at least 20% better than Zopfli and gzip when it comes to compressing HTML, CSS, and JavaScript files.

It does better than the other two in every aspect, whether it comes to the degree of data compression, the time it takes to do so, or how fast the data can be uncompressed. That means that we use less bandwidth, and it loads faster, so everything on your site will run and load faster than with the other options.

– A comparison of compression algorithms highlighting Brotli’s advantage over others (see numbers in bold). Source: Brotli Docs

Imagine fitting a bunch of clothes into a suitcase, but they come out looking just as neat and ready to wear — Brotli does that with your data.

Comprehensive Dictionary

Brotli has dictionary-based parsing, which sets it apart.

This dictionary contains 13,504 words or syllables from English, Spanish, Chinese, Hindi, Russian, and Arabic, along with common phrases used in machine-readable languages like HTML and JavaScript.

With a total of 122,784 bytes, the static dictionary forms the foundation of Brotli’s compression capabilities.

Support Across Browsers

Brotli enjoys near-universal support across modern browsers, meaning most users can benefit from its faster load times and improved compression without any issues.

Whether your users are using Chrome, Firefox, Safari, or Edge (almost any Chromium-based browser), Brotli is already integrated and working behind the scenes to make their browsing experience smoother and faster.

Brotli for Mobile and Low-Bandwidth Environments

Brotli is particularly beneficial for mobile devices and situations with limited bandwidth.

Whether it’s a 4G network or in a remote area with a weak internet connection, Brotli helps by compressing data more efficiently, reducing the amount of information that needs to be transferred.

This leads to lower data usage > and faster load times, making it a great solution for users with limited connectivity and for businesses looking to improve performance while saving on bandwidth costs.

Free and Open Source

Brotli is free and open-source, which is a huge benefit if you’re using a Brotli-compatible CDN like Cloudflare.

Cloudflare applies Brotli compression across all its servers, optimizing content delivery and boosting both speed and file delivery.

With the Cloudflare Add-on offered by Cloudways for just $4.99/month, every site hosted on the platform can benefit from Brotli compression, one of the many reasons why thousands of users trust the Cloudflare Add-on for enhanced performance and security.

Let me know if you’d like further refinements!

How to Enable Brotli Compression

In this section, we will explore three methods to enable Brotli compression.

Method 1: Enable Brotli Using a Plugin

One of the methods to enable Brotli is to use a plugin. One of the most popular choices is W3 Total Cache. Take the following steps:

• Go to your WordPress Admin dashboard
• Navigate to Plugins > Add New.
• Search for “W3 Total Cache”.
• Hit “Install” and then “Activate”.

• Once activated, go to Plugins > Installed Plugins.
• Look for W3 Total Cache and click on Settings.

• On the left panel, navigate to Performance > Browser Cache. Here, you will find the option to enable brotli compression.

❗However, it is important to note that you will need the paid version of the plugin to enable brotli.

If you are looking for a free method, consider the following two methods.

Method 2: Enable Brotli Compression Directly on Your Server (Apache or Nginx)

Enabling Brotli compression on your server means setting up your web server to compress content using Brotli before sending it to browsers that support this method of content compression.

If you’re a server administrator, you probably know how to edit configuration files. But, if you have no experience with this process and are using Apache or Nginx, here are the steps you will take:

Apache

Here are the steps to enable Brotli compression on an Apache server:

• Step 1: Enable the Apache Brotli module:

By default, the Brotli module is included but may not be enabled.

To enable it, use the following command: $ sudo a2enmod brotli

• Step 2: Configure the web host’s config file:

Edit your web host’s configuration file to specify which files should be compressed.

Add the following code within the <IfModule mod_brotli.c> section:

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

The above example indicates the file types that should be compressed:

• HTML
• Plain Text
• CSS
• JavaScript

Activate the Apache Brotli module and update the web host’s configuration file to define which file types should be compressed.

Nginx

For Nginx, here are the steps to enable Brotli compression:

• Step 1: Locate and edit the nginx.conf file:

Find your nginx.conf file, typically located in the /etc/nginx/ directory.

Open the file for editing.

• Step 2: Add the Brotli module lines:

Inside the nginx.conf file, add the following two lines:

load_module modules/ngx_http_brotli_filter_module.so;

load_module modules/ngx_http_brotli_static_module.so;

These lines load the necessary Brotli modules into Nginx.

• Step 3: Modify the website’s configuration file:

Locate the configuration file for your specific website, often found in the /etc/nginx/conf.d/ or /etc/nginx/sites-available/ directory.

Open the configuration file for editing.

• Step 4: Add Brotli configuration directives:

Inside the website’s configuration file, add the following lines:

brotli on;

brotli_static on;

brotli_types *;

These directives enable Brotli compression, allow serving pre-compressed Brotli files if available, and specify that Brotli compression should be applied to all file types.

• Step 5: Restart the Nginx server:

After making the changes, save the configuration files.

Restart the Nginx web server so the changes take effect. You can do this with the command:

$ sudo service nginx restart or $ sudo systemctl restart nginx

After restarting the web server, it will respond with a “Content-Encoding” header if the browser sends an “Accept-Encoding” header.

This indicates that Brotli compression is enabled, and the server will compress the response content accordingly.

💡This method can be challenging as it requires familiarity with server configuration files, command line operations (specifically for Apache servers), root user access with sudo privileges, and potentially using a text editor. Additionally, login credentials may be needed as an SSH user.

Method 3: Enable Brotli Through Cloudways Cloudflare Enterprise Add-on

Now that you have read the first two methods, you must have noticed that one is not free and the other requires extensive technical knowledge.

The method we recommend to enable Brotli compression for your site is to choose a web host that offers this feature as an add-on. Why? Because:

• No manual setup is required
• Faster implementation with minimal effort
• Automatic updates and optimizations

Cloudways provides Brotli compression as an add-on feature through its integration with Cloudflare Enterprise CDN. Users get the Cloudways Cloudflare Enterprise add-on for just $4.99/month per domain which includes features like:

• Brotli compression
• Automatic HTTPS rewrites
• Mobile optimization
• Image optimization
• Auto Minify
• Argo Smart Tiered Caching

To begin, head to Cloudways.com > Get Started.

• Enter your details and click on Start Free.

• Verify your email address to complete the signup process.
• Next, click the Launch button to launch your cloud-managed server.

💡In Cloudways, you can launch a server with various apps like WordPress, WooCommerce, Magento, PHP, and Laravel.

To launch the server and the application, you need to follow the steps below.

Step 1: Enter Server & Application Details

• Choose the latest version of your application that you want to launch.
• Name your Application and Server.
• Select your Project.

Step 2: Select the Cloud Infrastructure

• The second step is to choose the Cloud Provider. Cloudways is a PaaS (Platform as a Service) provider that offers the flexibility to choose the cloud infrastructure provider of your preference.
• I chose a DigitalOcean server for this tutorial.

Step 3. Select the Server Size

• With the DigitalOcean server, you have the option to host your application on 1GB to 192GB servers.
• I chose a 2GB Premium server with 2GB RAM, 50GB NVMe Disk, 2TB Bandwidth, and 1 Core Processor.

• Now select the server location.
• After entering the Server & Application Details, click the LAUNCH NOW button.

Wait for a few minutes until the server is ready.

• Once ready, select the server by clicking on it.
• Then click on “www” to choose the application. In my case, it is called “Hafsa”.

• This will take you to the Application Access Details page.
• On the left panel, look for Cloudflare and click on it.

• Now, enter your domain name and hit Enable.

💡Note that Cloudflare Enterprise supports both root domains (example.com) and subdomains (support.example.com).

• After enabling, you will notice the current status as ‘Domain not live.’
• The reason is that you must first point your domain to your site’s CNAME record using your DNS registrar panel.

To proceed further, you can read our blog on the complete guide or watch the YouTube tutorial below.

How to Test Brotli Compression

There are several easy ways to check if Brotli compression is enabled on your web server. Here are a couple of simple methods:

1. Use an Online Brotli Compression Test

• A great tool for testing is the Gift of Speed. This tool checks both GZIP and Brotli compression.
• Enter your website’s URL, and the test will tell you whether Brotli or another compression method is active.

2. Check the HTTP Header with cURL

You can also use the cURL command to check if Brotli compression is enabled on your server. This command sends a request to the server, asking for Brotli support.

Here’s the cURL command to use:

curl -LH "Accept-Encoding: br" -I http://website.com

If Brotli is enabled, the response will include a line like this:

content-encoding: br

This confirms that Brotli compression is active and working on your site.

Summary

The blog helps you understand the Brotli compression algorithm and how you can benefit from it.

You also learned about three different methods to enable it on your website: via a plugin, directly on your server, or through a reliable hosting provider (the method we recommend) that offers Brotli compression by default.

If you have a website on WordPress, consider hosting it on Cloudways. With an affordable Cloudflare add-on for $4.99/month per domain, users get features like Brotli compression, auto-minify, Argo Smart Tiered Caching, mobile optimization, and much more.

Now that you know Brotli’s benefits, you might be wondering how it compares to one of the most popular compression algorithms: Gzip. We have a detailed Brotli vs. Gzip comparison guide that I think you’d find helpful.

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

brotli on;
brotli_types text/html text/plain text/css application/javascript;

Sandhya Goswami

Sandhya is a contributing author at Cloudways, specializing in content promotion and performance analysis. With a strong analytical approach and a keen ability to leverage data-driven insights, Sandhya excels in measuring the success of organic marketing initiatives.

Get Connected on: Twitter Community Forum