Brotli Compression: A Fast Alternative to GZIP Compression

Speed is important for any website. 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, but Brotli compression is an alternative fledgling method that commands attention.

It’s a Google-developed solution that looks to provide a number of benefits over (as well as an alternative to) GZIP compression. The details in this article will go into exactly what the technology offers, but Brotli compression is fast and efficient — which ticks all the boxes you need to investigate it.

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. First, we’re going to place Brotli within the compression algorithm space, and talk about why you’d want to use it over other solutions.

Data Compression for the Web

In its most basic form, data compression takes the code for a website or app, and minimizes the file size. This gives you lighter files to move around the web and reduces the time it takes to load and render a website. You’ll find there are lots of ways to compress the data depending on the file type you’re working with.

A common approach is “minification.” This is where an algorithm strips your site’s code of some of its superfluous elements. The idea is that aspects such as indents, comments, whitespace, and more will increase file sizes, and therefore loading times.

Ready to look into Brotli compression and see how to enable it on your own site? The answers are here Click to Tweet

Removing these elements doesn’t affect the user experience (UX) in most situations. However, it does make things more straightforward for the computers that have to compile and render the code. For example, take this suite of code:

define( 'WP_INSTALLING', true );

/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
  wp_redirect( wp_registration_url() );
  die();
}

$valid_error_codes = array( 'already_active', 'blog_taken' );

The above code uses elements like spaces and carriage returns to make it human-readable, but a computer doesn’t need these to understand the core code. What’s more, these batches of whitespace and line breaks will take up precious room that, removed, can give you a performance boost.

If you minimize this code, it looks completely different:

define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
  wp_redirect( wp_registration_url() );
  die();
}

$valid_error_codes = array( 'already_active', 'blog_taken' );

However, the fundamentals of what this code does are still the same.

You’ll find that other file types have ways to compress data. For example, images often take lots of compression to reduce in size without much degradation of the image itself:

GZIP compression is a standard way to minimize the size of bundles of files — think packages such as ZIP or Linux .tar bundles. But up until now there were no real alternatives. We’ll talk more about why an alternative should exist later, but first let’s introduce you to GZIP’s “competitor.”

Brotli Compression

In a nutshell, Broti is a data compression algorithm. However, if this is all we’d have to say, there would be no reason to investigate it.

It provides “lossless” compression and is developed by Google under an MIT license. The company is often at the forefront of web-advancing technology, so it’s no surprise that Brotli looks to take what GZIP does, improve on it, and offer an enhanced experience to users and sites.

Brotli compression uses the same core base technologies as GZIP compression, namely:

• The LZ77 algorithm
• Huffman encoding and decoding

In fact, if you combine these two technologies, you get the DEFLATE format that serves as the foundation for both GZIP and Brotli compressions. It’s something we go into with extreme depth in our post on GZIP compression.

In short, uncompressed files run through the LZ77 and Huffman algorithms as part of the DEFLATE process to compress them into a Brotli format. From there, an INFLATE process will decompress the files again when necessary.

Although Brotli is currently GZIP’s main contender, there are other similar technologies out there that also use DEFLATE. In the next section, we’ll talk about what makes Brotli stand out.

Brotli Compression vs GZIP Compression

As mentioned, both Brotli and GZIP use the DEFLATE 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 of DEFLATE 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 uses two.

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 a WordPress 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 as type="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 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.

Brotli Compression vs GZIP Compression: Performance and Support

When it comes to pure user numbers, GZIP compression is still number one. However, Brotli compression sees more use every day. This is in part due to wider adoptive measures by the major browsers; the rise of Chromium-based browsers helps too.

The Can I Use… website records what technologies browsers adopt, and provides a history of sorts. This site notes that over 95% of browsers use Brotli compression at current writing, including all major versions.

In our GZIP compression article, we noted a benchmark test where Brotli had a better compression ratio compared to competing algorithms, but fell behind in compression and decompression time:

However, the Squash Benchmark tests show a different story — one that’s more nuanced. The real takeaway is that on the whole, Brotli is more flexible than GZIP, with a generally higher compression ratio.

Here’s the summary of Squash Benchmarks’ findings:

• Brotli has the better compression ratio (i.e. it produces smaller compressed files) across every level of compression.
• While GZIP does beat Brotli on speed most of the time, the level you compress at factors into the results you’ll see.

Paul Calvano’s breakdown gives further details, but the crux is that Brotli needs more CPU power to provide a greater factor of file compression. This shows at both the highest and lowest compression levels. Cloudflare’s benchmarking backs this up: much smaller files, with closer comparative compression speed numbers.

Also, consider that some testing tools such as Pingdom and some content delivery networks (CDNs) don’t support Brotli just yet. This can skew the data others collect on how Brotli operates. You can see “false negatives” if you do run tests: higher page speed figures that ignore the file compression you employ.

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:

1. It takes the same technology as GZIP uses and enhances it with modern methods.
2. Brotli’s dictionary-based parsing means it can compress more of your files to a deeper level.
3. While Brotli needs more computational power compared to GZIP, the results mean smaller files.
4. 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.
5. You’ll find that Brotli has near-universal support across browsers, if not some of the benchmark tools you’re used to.
6. Brotli is free to use and open source. This is an advantage if you use a Broti-compatible CDN, such as Cloudflare.

It’s worth noting that Cloudflare 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.

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

How to Check Whether Your Site Uses Brotli Compression

Because Brotli compression isn’t standard yet (although it’s almost there), you’ll likely want to know whether your site uses it. There are a few ways to figure this out.

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.

There are lots of elements that make up a website, and even third-party libraries and dependencies. You might choose to serve them using a CDN, and if so, this needs to employ Brotli compression too for the best possible performance.

If you use Gift Of Speed to test individual assets, you can take a look at the Server value to see how it’s served.

All Kinsta sites use the Cloudflare-powered Kinsta CDN. As such, every site will also use Brotli compression throughout the entire chain and server architecture.

2. Check Using Your Browser’s Developer Tools

Most developers will know that a browser 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 the Network > 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 the Headers information.

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

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

How to Enable Brotli Compression for Your Site

In these final few sections, 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

Just about every WordPress site will use at least one plugin — often more depending on the functionality the site needs. 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 to make a full backup in case you need to restore later. For this method, we’ll use W3 Total Cache because it’s straightforward to find the right setting.

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

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

However, this isn’t going to be suitable for every site and situation. For example, Kinsta optimizes its server for fast, high-performant, reliable hosting. As such, there are a number of plugins that you won’t need, and some others are even banned 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 to access 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 with sudo privileges.
• You might need a text editor, but for quick alterations such as this, you should be fine.
• In some cases, you’ll need your login credentials as a secure 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 on Nginx servers, you’ll first need to find the nginx.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. The brotli_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:

1. Log into your server using a Command Prompt or Terminal application, as a root sudo user.
2. Run the a2enmod brotli command to turn on the compression.
3. Within either Apache VirtualHost or your server configuration, add the AddOutputFilterByType 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 the BrotliCompressionQuality 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.

The Kinsta CDN is powered by Cloudflare’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.

Learn how to check if your site uses Brotli compression, how to enable it (if you need to!) and explore why you’d want to use it over other solutions. Click to Tweet

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 our unique Cloudflare integration. This means your Kinsta-hosted site is faster than the competition using GZIP and loads rapidly for those on smaller devices.

Do you have any questions about Brotli compression? Feel free to ask away in the comments section below!

The post Brotli Compression: A Fast Alternative to GZIP Compression appeared first on Kinsta®.