Brotli Compression: What It is and How to Use It in WordPress

Images, fonts, and other media can take up a ton of space on your website and massively slow down loading times. Once you’ve got a big website with lots of blog posts and other pages, you may find that your pictures and media folders are overflowing with content.

These can really start to damage your site speed if you let it get out of control. But you don’t have to deal with terrible loading times and lost visitors forever. Using a compression algorithm can help improve image delivery and file transfers over your server, speeding up your website and leading to happy visitors.

The standard solution for compressing website files is Gzip and you can learn how to implement it in this post. Another possibility, is Brotli compression, a relatively new algorithm for compressing files and reducing the size of your content. It’s incredibly powerful — and you can also use it with WordPress.

If you’re ready to add it to your WordPress site, we’ll show you how to do just that.

What is Brotli Compression?

Data compression is the process of encoding files to reduce their size, making them take up less space on your server and transfer to site visitors quicker. Image, audio, and video compression are very common forms, but you can compress pretty much any type of data, including code. Various algorithms exist for that.

Google has always been pushing to minimize the web and make it more accessible, especially for those on mobile devices who can’t handle as much data. Brotli compression was developed by Google to help bring loading times on the web down even more.

Source: Google

Brotli is general-purpose (so it can effectively compress any type of file) and lossless, meaning it compresses without destroying data. However, it is not suitable for image files like PNG, JPG, and GIF. These types of files are already compressed, and Brotli will actually make them larger. Try an image compression plugin instead.

In the past, Google created Zopfli, an algorithm that, while quite powerful and able to achieve high levels of data density, was also very slow. While decompression is fast and won’t affect the end users, compression takes forever.

Other applications like Gzip exist, and have long been the gold standard for lightweight compression. But Brotli is faster — 20-26% faster compared to Zopfli, though using the same powerful technology. And it’s not just fast; it also offers more dense compression than other similar algorithms.

In addition, Brotli is widely supported, and free for anyone to use.

Why is Brotli Compression a Good Option?

With much online traffic moving onto mobile devices, website speed is more important than ever. If you’re not using any sort of compression to smush the files on your site, visitors might have a lot of trouble navigating it.

People’s attention spans are shorter than ever now. Even with a 2-second load speed, nearly 10% of visitors will bounce. And for every second that passes, it just ramps up. And even if they pass that hurdle, the longer the load speed, the less pages they’ll feel like visiting.

Activating Brotli compression means the files on your site will be smaller and transfer faster to visitors’ devices. Even someone on slow Internet or a mobile device with limited bandwidth will easily be able to load your site. You don’t want anyone to slip through the cracks.

Brotli also does a great job at both compressing and decompressing quickly. This means that it doesn’t take many server resources to size down files, and people visiting your site can access them without having to wait long. While higher levels of compression can lead to longer decompression time, the minimized server resources will more than make up for it.

Like Gzip, Brotli is open source, which means it’s free to use and its files are openly available online. No need to pay for expensive compression software for your server. You can just use it. And as a result of it being free and open source, multiple web hosts and CDNs now support it or may even have it enabled by default.

It’s also supported by all major browsers except Opera Mini, Baidu, and Internet Explorer (which has been replaced by Edge).

As you can see, there’s practically no reason not to use Brotli.

What Makes it Better than Gzip?

According to W3Techs, 81% of websites use Gzip. It’s an extremely popular technology used by many servers and CDNs. So why go out of your way to make the switch to Brotli?

The simple reason: because it’s faster, compresses more, and is just simply better. Gzip use has spread more widely due to its long-standing popularity (it came out all the way back in 1992, Brotli only in 2013 for offline font compression and in 2015 as a generic compression algorithm), but Brotli performs better in almost every aspect.

To start, it compresses smaller than Gzip. It’s main function is HTML compression, and Brotli boasts 21% smaller file sizes for it, 17% for CSS, and 14% for Javascript. That’s a lot of space saved, especially on a big website with a lot of code.

It also decompresses as fast as Gzip. So, no matter how long it takes to compress, the end user will receive the data just as quickly, though it can take quite a bit longer than Gzip to compress in the first place.

But Brotli actually has eleven power levels, and defaults to max. At higher levels, it shrinks files smaller, but takes significantly longer to minify. By lowering Brotli’s quality parameter, you can make compression speed comparable with Gzip while still outdoing it in file size.

Gzip also has several levels; higher ones compress more and lower ones compress faster. While Brotli will probably never reach the sheer speed of level one Gzip compression, Gzip just can’t outdo how well Brotli minimizes its files.

If you want to use Brotli for your project and get comparable speeds to Gzip, you should leave it at the default level of 11 for static assets, and try setting it to level 4 or around there for dynamic content.

Testing for Brotli Compression on Your Server

Some servers and CDNs already enable Brotli compression by default. For instance, InMotion Hosting confirms that it includes Brotli on its WordPress hosting plans, as does DreamHost on all plans. Consequently, you might already have it on your server.

So before going through all this trouble to enable it, you should check to see if it’s already on. Chances are, you’ll need to install it yourself, but you could potentially save your website a lot of time. A Brotli test tool allows you to quickly see if Brotli is available on a server. Make sure to paste the full URL or your result may be wrong.

If it pops up and says that compression is active, then you’re already done! There’s nothing else you need to do. If you still want to know how to change Brotli’s settings, check the sections below.

You might also try this compression test, which will tell you whether Gzip or Brotli is enabled and even suggest how much compression may benefit you. Note though that it’s possible to have both compression algorithms at once, and it will only tell you about whichever one is taking precedence.

It may be a good idea to use Gzip alongside Brotli. While only one will be used to deliver content to visitors, Gzip can serve as a fallback for the few browsers that don’t yet support Brotli.

Adding Brotli Compression Manually

Not all web hosts are able to run Brotli on their servers. You’ll need the ability to access the command line and install packages. If you’re on a shared hosting plan or one with limited access features, that may not be possible.

You should check whether your hosting server is using NGINX or Apache, and also look through your web host’s documentation to see how to open the Ubuntu command line on your server.

If it’s an NGINX server, follow these steps.

• Run this command: sudo apt update && sudo apt install brotli
• Now you need to install the NGINX module for Brotli compression. Follow the installation instructions to get it running on your server.
• Configure the module with the settings you want by editing the nginx.conf file. You can find settings under the Configuration directives heading on the module’s Github page. Enable dynamic or static compression, change the compression level, and set the minimum content length to compress. You’ll want to turn brotli and brotli-static on at least.
• If you modify nginx.conf at all, reload it with this command: sudo systemctl reload nginx

Now test your site with one of the Brotli checker tools to make sure it is running correctly. If it doesn’t seem to work, ask your web host for help setting it up.

In case you have an Apache server, the steps will be a little different. Apache does have a fully configurable Brotli module built in, so you don’t need to use any outside modules. Check out this simple guide to installing Brotli on Apache; it shows you what commands to use and even gives you a sample configuration code.

How to Implement Brotli Compression in WordPress Using Cloudflare

If you’re not familiar with the command line, activating Brotli manually can be quite a pain. And if you’re on a hosting plan that doesn’t give you access to those kinds of sensitive settings, it may not be possible to install it that way at all.

Instead of doing all that, getting Brotli up and running could be as easy as the flip of a switch. Cloudflare CDN comes with both Gzip and Brotli compression; it will use Brotli to compress most of your content, and fall back on Gzip when the browser doesn’t support it.

Do note that while Cloudflare does have paid plans, there’s no mention of compression being a premium-only feature. So go ahead and sign up for a free account. Once you have one, all you need to do is add your website and Cloudflare will usually handle everything without any further input needed.

Some web hosts come with Cloudflare installed, so you may want to check that before you make your own account.

Once your connected site has been verified, log in to the Cloudflare dashboard and click the Speed tab at the top, then click Optimization. You should see a Brotli setting with a switch. If it’s green, then Brotli is already enabled and you don’t need to do anything. If it’s gray, go ahead and click to turn it on. Simple as that.

Source: Cloudflare

Again, you’ll want to open up one of the Brotli testing tools above and make sure it worked. You should see that Brotli is running, and you’re good to go.

Speed Up Your Site with Powerful Compression

Huge files bog down your site’s speed, negatively impacting user experience and leading to increased bounce rates. You need to do whatever you can to get those loading times down, especially if you have a lot of large media files. This includes image optimization, as well as finding a good compression algorithm like Broli to reduce page load speed.

If you want to try Brotli on your WordPress site, you should first check if your server already has it installed. If not, you can either download it manually or get Cloudflare to easily activate it. Either way, it’s a good idea to have something like this in place minifying your site’s files.

Don’t leave users groaning as they slog through a slow website. That’s how you end up with potential readers, fans, or even customers clicking the back button and leaving forever. Implementing Brotli compression can really help the overall success of your site, improving site speeds and making users happy.

Do you have Brotli compression active on your site? How did you implement it? Let us know in the comments section below!