Compressing your WordPress website files is definitely something you can do to improve your sites performance. Traditionally, this is done with Gzip Compression as this has been the standard for quite some time. Recently Google released a new compression algorithm called Brotli, and this article is about comparing the two to understand which is better.
According to a Google titled Why Performance Matters, 40% of visitors will abandon a website if it takes more than 3 seconds to load. Also of note, the study claims that a 1 second delay in response time can reduce conversions up to 7%. Every millisecond matters when we are talking about page speed and performance.
Why is Brotli Better Than Gzip?
While both Brotli and Gzip are similar, they do have differences. Gzip has been around since 1992, and Brotli was just released in 2013. Brotli compression did not make it’s way to web servers until around 2015. Because of that, browser support adoption was the biggest hurdle for System Admins to begin using it as opposed to Gzip. In 2020, however, Brotli is now supported by all major browsers including Chrome, Firefox, Edge and Safari.
Compression Level Comparison
Gzip has 9 levels of compression, and as the numbers get higher so do the file size savings. There is a tradeoff between the size of the files, and the amount of time it takes your server to package the zip for delivery. For instance, level 1 compression is much faster when zipping the files up, and level 9 will take longer to complete.
Brotli has 11 levels of compression, following the same structure as Gzip. It too takes more time for the higher compression to work, so in this aspect the two are very similar.
Advantages of Brotli
Because Brotli compression uses a dictionary, it only needs to send keys and not full keywords. This dictionary exists on both the server and client side, and contains common keywords and phrases, allowing a much faster transfer time, and smaller file sizes on average. According to an article by CloudFlare, after experimenting with Brotli it is clear that it outperforms Gzip. Brotli at the maximal quality setting produces 1.19X smaller results than zlib at the maximal quality. For files smaller than 1KB the result is 1.38X smaller on average, a very impressive improvement.
- Javascript files compressed with Brotli are 14% smaller than Gzip.
- HTML files compressed with Brotli are 21% smaller than Gzip.
- CSS files compressed with Brotli are 17% smaller than Gzip.
Dynamic vs Static Compression
Dynamic compression occurs on the fly for each response, and static compression is where a file is created in advance for this purpose. If your text files are not changing, then compressing them once and serving multiple times will improve performance, because the compression portion is not happening in tandem with the request. Static compression works best with Javascript and CSS files, since those are not likely to change with content. HTML, however, should be dynamic, unless there is no interaction happening on your site, or the content does not change over time.
Using Brotli Compression With WordPress
When adding Brotli to your server, you should also make sure that Gzip is available for legacy browsers. That way, when a request is made there is a fallback in place to serve those older browsers the proper format. Using it with WordPress is as simple as installing W3 Total Cache, and ensuring the proper options are checked.
I Can’t Select Brotli, The Option Is Greyed Out
If you do not have the option available in W3 Total Cache, that means that it is not installed on the server, or it may be misconfigured. In this case, it is recommended to contact your hosting provider or administrator to ensure that it is correctly installed and available to your web server.
In Conclusion
When dealing with your WordPress website performance, Brotli is one of the best compression tools you can use to help improve your page speed, but it is also necessary to ensure that you have Gzip available for those visitors that may have an older browser that does not support Brotli.
W3 Total Cache
You haven't seen fast until you've tried PRO
Full Site CDN + Additional Caching Options
Advanced Caching Statistics, Purge Logs and More
Everything you need to scale your WordPress Website and improve your PageSpeed.
Children says:
Hello,
We are paying for W3 total cache pro. We are trying to use Brotli Compression, but the option is not available for us. We have already checked and it is our server. We also tested that is in our server via https://tools.keycdn.com/brotli-test. Please, we need to know how we can activate this option for html&XML and media in your plugin. I hope you can help us.
Thank you,
CB team
Marko says:
I’ve replied to your email via the support channel.
Please make sure to follow the instructions provided and continue the correspondence there.
Thanks!