How To Enable Brotli Compression On Any Website

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 with 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 of the 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 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 to actually 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.

Step 1

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 to 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.

Step 2

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

Cloudflare Dashboard - Speed Tab

Step 3

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 (visitor’s browser is set to accept Brotli encoded format).

Enable Brotli Compression From Cloudflare Dashboard

Step 4

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 and 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.

KeyCDN Brotli Testing Tool - Check If Brotli Enabled On Your Site

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, a majority of them are already compatible and are accepting 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 have 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 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.

How To Enable Brotli Compression On Your Website Using A CDN
Pin this on Pinterest.

6 thoughts on “How To Enable Brotli Compression On Your WordPress Blog

    1. Hey Susan, I’m sorry to hear that you’ve stopped commenting on my posts because of this. Since I wanted to unlock the full potential of my blog, I had to move it out from WordPress.com to my own server (self-hosted WordPress). On WordPress.com, you’re logged into all WordPress.com sites by default. So, it doesn’t require you to enter your name and email address. It automatically does it for you behind-the-scenes. If you do really like my content, I’m pretty sure you won’t mind that extra step to leave a comment on my article. Thanks.

    1. Blog logo? Nope, it’s the site icon. I use it because I watch ‘The Flash’ television series and my website loads under just 2 seconds! 😀

    1. Hello Shafi, I’m glad that you liked this Brotli compression tutorial. By the way, sorry for the late reply – I was out of town attending WordCamp Mumbai 2018 and visiting a few other places nearby.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.