How to enable Brotli compression on your WordPress blog

What is Brotli Compression

Brotli compression is an open-source, generic-purpose lossless data compression algorithm developed by Google under the MIT license. It compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding, and 2nd order context modeling to create a sliding window for backreferences. Its compression ratio is not bad at all when compared to the compression algorithms used nowadays. It is similar in speed to deflate but offers more dense compression. Also, the specification of Brotli Compressed Data Format is defined in RFC 7932.

Brotli compression is significantly faster than other types of compression algorithms developed and tested by Google. It is definitely faster than Zopfli, the previous compression algorithm Google developed way back in 2013. Brotli is also better at compressing data than Gzip, the popular compression algorithm used by most web servers. Gzip’s compression density is also lower than that of Brotli which gives Brotli an upper hand over Gzip. By using Brotli, you will be able to compress data even better and reduce your server’s bandwidth consumption. Also, you will be doing mobile users a favor by speeding things up for them.

According to the data collected and analyzed by Akamai from its experiments, Brotli is more efficient than Gzip by around 20%. Though it may not look like much, it definitely is way better than what other compression algorithms had to offer to replace Gzip as the most used compression format for compressing HTML, JavaScript, and CSS. Since Brotli is open-sourced, all major web hosting providers and content delivery networks can add it to their system at no extra cost to them. This will allow them to provide their customers with a boost in website speed and performance. Moreover, the total bandwidth usage will be greatly reduced in the long run.

Benefits of using Brotli over Gzip

• In addition to the slight push in site performance, you will receive because of implementing Brotli on your server, your site now be a little bit more secure and will gain the trust of Google
• Brotli can be implemented on your web server no matter which operating system or system architecture you are using
• It compresses and decompresses data faster than other compression algorithms
• Compressing data using Brotli uses fewer CPU resources
• It offers a better compression ratio
• Brotli is significantly faster than Gzip
• Most major browsers support Brotli content encoding

How to enable Brotli compression on your WordPress site

Before you continue reading this post, note that I’m not a technical writer. I’m just a regular blogger who develops websites using WordPress and loves experimenting with web performance tools. That’s how I discovered Brotli too. Now, I’ll be guiding you too on how you can enable Brotli on your site without much (technical) effort. It’s just going to be as simple as sliding a button and bam…’Brotli Support Enabled! No, I’m not kidding! 😉 Read on.

To be honest, Brotli support needs to be enabled on your website’s server for it actually to work but we will be overcoming this limitation by making use of a free CDN provider who offers Brotli compression on their free plan. I’m talking about none other than Cloudflare. So, go grab a free account before you start reading further.

Steps to enable Brotli compression on your WordPress blog –

Total Time: 5 minutes

Add website to Cloudflare

Now that you have signed up for a free account on Cloudflare, it’s time to add your site to Cloudflare. Follow this tutorial and it won’t take you more than five minutes to enable Cloudflare for your site. Since Cloudflare is basically a content delivery network, it won’t slow down your website or affect its performance. Instead, your site will now load faster for your site visitors. Moreover, it will be protected from hackers, bad bots, and DDoS (Distributed Denial of Service) attacks. You can trust me on that, you are in good company.

Navigate to Speed

Once your site is verified with Cloudflare (should not take more than 30 minutes), just navigate to the ‘Speed’ tab from your Cloudflare dashboard.

Enable Brotli compression

Now, scroll down till you find the ‘Brotli’ section and click on the grayed-out ‘Off’ button to turn it on and make it active. If the button is green already, it means Brotli has already been activated for you. That’s all, Brotli compression is now active on your site. By default, Cloudflare will compress HTML, JavaScript, and, CSS on your site with Brotli compression whenever possible (the visitor’s browser is set to accept Brotli encoded format).

Verify

It is time to check if you have correctly set up Brotli compression on your blog via Cloudflare CDN. If everything works as desired, you are good to go. If not, just go through the above steps to see which step you have missed.

Note: For Brotli to work properly, both your server and client must support the compression algorithm. Don’t worry, Cloudflare acts as our server in this case. Cloudflare actually acts as a reverse proxy, that is, all requests to your web pages are sent to Cloudflare’s server first and then Cloudflare fetches the page from your server and displays it to the user.

Now, open up KeyCDN’s Brotli Test page, enter your blog address, and hit the ‘Test’ button.

Since I have enabled Brotli compatibility already, my site passed the test. Now, your site should pass the test too.

Though Brotli isn’t supported on all browsers yet, most of them are already compatible and accept Brotli encoded format. If you want to learn how to enable Brotli support directly on your web server, here’s a post from the good guys at SitePoint. In that post, they demonstrated how you can install and configure Brotli on your server. If you are using WordPress and want to configure Brotli to work with WordPress, you will definitely find it interesting.

Thus I hope that you found this post helpful in learning how to set up Brotli compression on your website. By the way, do check out my post on how to optimize WordPress for performance. I’m pretty sure it will help you get a 100/100 PageSpeed score. If you have already optimized WordPress and are not interested in that post, you might be interested in my HTTP to HTTPS migration checklist.