Posted onApr 3, 2023 • Originally published atkinsta.com

Brotli: The New Era of Data Compression

In the web’s pursuit of fast loading times, we have a number of different technologies to help us. One approach is to minimize the underlying code your site will use without affecting how it functions. GZIP compression is one way to do this, butBrotli compression is an alternative fledgling method that commands attention.

It’s aGoogle-developed solution that looks to provide a number of benefits over (as well as an alternative to) GZIP compression.

For this tutorial, we’re going to look into Brotli compression and show you how to check whether your site uses it and how to enable it if you need to.

Brotli Compression vs GZIP Compression

As mentioned, both Brotli and GZIP use theDEFLATE method to compress (and decompress) data. This can confuse many people, because this alone doesn’t warrant a switchover.

However, Google is building on top ofDEFLATE to offer enhanced techniques and compress data to a greater, faster standard.

How Brotli Uses Dictionaries to Improve Data Compression

One technical aspect of data compression formats is the way Brotli compression uses existing known language and text within data dictionaries to employ its algorithm.

Developers will use a dictionary of key-value pairs to store data, as it’s efficient, flexible, and scalable. Here’s what a PHP dictionary (called an “array”) would look like:

$cats=get_categories(array('taxonomy'=>'link_category','hierarchical'=>0,'include'=>$link_cat,));

While GZIP doesn’t use dictionaries, Brotli usestwo.

Brotli’s Static Dictionary

The first is a static (i.e. pre-defined) dictionary of common code terms that act as a reference for the HTML, CSS, and JavaScript text.

There are over 13,000 words in six different languages, and Brotli will use these as references to points in the code. It’s not an exact analogy, but it’s similar to the way aWordPress hook references a larger suite of code.

As such, the encoder doesn’t have to sift through the code byte by byte. Instead, it can act on the references, pull the definition from the dictionary, and move on to the next one.

You’ll also find there are real-world phrases within the dictionary as well as code that wouldn’t often see compression. This helps some tags such as<HTML> and parameters such astype="text/javascript" take some compression and give you some greater gains.

There are also some “transforms” within the dictionary: partial, incomplete, and other types of phrases that with a new prefix, suffix, or case become a whole new word — for example, “Work” transforming to “Working” or “html” to “HTML.”

Brotli’s Dynamic Dictionary

The dynamic dictionary parses content and code at the source, which is good for smaller devices, but not so good for larger files. It’s also called a “sliding window” and can be up to 16 MB in size. This is where the compression algorithm ‘caches’ some of the most recent data in order to reference it. It’s ultra-dynamic in that it constantly changes.

If you compare this to GZIPs sliding window of around 32 KB, you’ll see that the scope for real-time parsing and compression is huge. In fact, most typical practices use a Brotli sliding window of around 4 MB, which is still mammoth compared to competing algorithms.

Benefits of Brotli Compression

There’s a lot of information to take on board about Brotli compression so far. However, we can summarize what you need to know about why you should choose Brotli over GZIP:

It takes the same technology as GZIP uses and enhances it with modern methods.
Brotli’s dictionary-based parsing means it can compress more of your files to a deeper level.
While Brotli needs more computational power compared to GZIP, the results mean smaller files.
At the compression levels most web hosts use — something mid-range such as level four or five — Brotli performs better than GZIP without breaking a sweat.
You’ll find that Brotli has near-universal support across browsers, if not some of the benchmark tools you’re used to.
Brotli is free to use and open source. This is an advantage if you use a Brotli-compatible CDN,such as Cloudflare.

It’s worth noting thatCloudflare uses Brotli compression on all its servers. In fact, it uses a modified and optimized version of Brotli to give you further gains with regard to speed and file delivery.

BecauseKinsta offers Cloudflare integration on all plans, every hosted site uses Brotli by default. This is just one reason why Kinsta is one of themarket-leading and best hosting providers around.

1. Use an Online Tool

The simplest way to check whether your site uses Brotli compression is through an online tool. While there are a few to choose from, you’ll want something that’s quick and simple to use that will also give you a bunch of information about your setup.

Gift of Speed is our choice to check for Brotli compression.

It will determine whether your site uses GZIP, Brotli, or no compression at all, and provide a few other metrics to help you decide what to do next. These metrics offer important insight, because you don’t only want to consider whether your site’s server uses the right “flavor” of compression.

2. Check Using Your Browser’s Developer Tools

Most developers will know that abrowser offers some fantastic tools to help you with all sorts of web-related investigation and troubleshooting. One quick check you can make is whether your site (or a specific asset) uses Brotli compression.

For all major browsers such as Brave, Edge, Firefox, or Chrome, you can head to theNetwork >All screen.

At first, you won’t see anything relating to content headers — you’ll need to select an asset or request from the left-hand side. If you keep looking and scrolling down the list, you’ll see a panel open up that defaults to theHeaders information.

Here, scroll down the output until you see thecontent-encoding: br line:

In short: If you seecontent-encoding: br, this tells you Brotli is active for that site.

How to Enable Brotli Compression for Your Site

We’ll show you a number of different ways to enable Brotli compression for your site. The first will be the approach we recommend for most WordPress sites not using Kinsta — and the last is what we recommend for every site reading the first approach!

1. Use a WordPress Plugin

Caching is one use case for plugins, and there are lots around. However, not all will let you enable Brotli compression, so you’ll need to choose wisely and be prepared to switch your preferred solution.

Before you undertake any changes to a site, remember tomake a full backup in case you need to restore later. For this method, we’ll useW3 Total Cache because it’sstraightforward to find the right setting.

You’ll need to head to thePerformance >Browser Cache page within WordPress:

This screen shows two settings. The one you’ll want to choose isEnable HTTP (brotli) Compression:

Enabling Brotli compression within W3 Total Cache.

However, this isn’t going to be suitable for every site and situation. For example, Kinsta optimizes its server forfast, high-performant, reliable hosting. As such, there are a number of plugins that you won’t need, and some others are evenbanned from use on Kinsta sites.

In these cases, you’ll want to take another approach.

2. Enable Brotli on the Server

When it comes to choosing a server type,Nginx vs Apache is a long-standing battle that (for now) the former is winning. Regardless, both server types can enable Brotli compression, and there are different approaches for each.

Before you look into the manual approach, there are a few prerequisites that you should know:

You’ll want to understand how toaccess your configuration files for your specific server.
Command line knowledge will be beneficial, especially when it comes to Apache servers. To run any commands, you’ll need to be a root user withsudo privileges.
You might need atext editor, but for quick alterations such as this, you should be fine.
In some cases, you’ll need your login credentials as asecure shell (SSH) user on the server itself. You can find these within your hosting control panel, or contact support to ask.

If you have any doubts about the manual approach, we’d recommend you look into another option, or reach out to your host for help. Regardless, we’ll give a brief overview of the process for each server in turn, starting with Nginx.

Nginx

To enable Brotli compression onNginx servers, you’ll first need to find thenginx.conf file. It will be one of a few locations:

/usr/local/nginx/conf
/etc/nginx
/usr/local/etc/nginx

When you have the file open, add the following to the bottom:

brotli on;brotli_static on;brotli_comp_level 9;# You can change this from 1–11. 4–9 offers good performance balance.brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

This suite will turn on Brotli and use it to serve static files. Thebrotli_comp_level setting is one you can change depending on your use case and needs. Higher numbers offer better compression balanced with a less performant site.

Apache

Because Apache is flexible when it comes to configurations, you can enable Brotli compression without too much fuss.

To do this, follow these steps:

Log into your server using a Command Prompt or Terminal application, as a rootsudo user.
Run thea2enmod brotli command to turn on the compression.
Within either Apache VirtualHost or your server configuration, add theAddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript line to set the right file types you’d like to compress.

While Apache doesn’t support static compression, you can change the level of Brotli compression you offer using theBrotliCompressionQuality LEVEL-NUMBER line. However, you’ll need to replace the “LEVEL-NUMBER” place holder with a number between 1–11.

3. Use a Supporting Web Host

The most straightforward way to enable Brotli compression for your site is to ensure your host does this by default. Kinsta offers Brotli compression as standard thanks to its integration with Cloudflare’s CDN.

TheKinsta CDN is powered byCloudflare’s infrastructure on all plans — so every site uses Brotli compression without you needing to enable it.

You’ll want to check whether your chosen host offers Brotli compression, and to what level you need to configure it. In order to run the most performant, stable, and secure site,good hosting is essential.

Summary

Data compression is a necessary component of developing and using the modern web. File sizes can skyrocket due to the rich and complex file types you’ll use to piece together a website. All of them need some form of compression.

The typical approach has been GZIP up ’til now, but there’s a new kid on the block.

Brotli compression bases its technology on the same foundation as GZIP, but includes some performance-enhancing benefits. As we discussed, it uses context mapping to process a compression request faster, and a dictionary that uses dynamic population. This is much larger than what GZIP can offer, and also lets mobile users benefit from the compression too.

The good news is that every Kinsta site can benefit from Brotli compression because of ourunique Cloudflare integration. This means your Kinsta-hosted site is faster than the competition using GZIP and loads rapidly for those on smaller devices.