Nowadays, enhancing customer experience is paramount to driving engagement and achieving business success. One crucial aspect that significantly impacts customer satisfaction is the speed at which a website loads.
Studies have revealed that 40% of users abandon a website if it takes longer than three seconds to load, while even a mere one-second delay in page response can lead to a 7% reduction in conversions. It’s clear that every second counts!
To address this need for speed, various technologies have emerged to optimize website performance. One of these is compression algorithms. Two notable contenders in this arena are GZIP compression and Brotli compression.
While GZIP has long been popular, Brotli compression offers a compelling alternative that promises faster and more efficient results.
In this article, we will delve into the advantages of Brotli compression over GZIP compression, highlighting its ability to save valuable loading time.
- What Is Brotli Compression?
- What Is GZIP Compression?
- Brotli vs. GZIP: A Head-to-Head Comparison
- Enable GZIP and Brotli Using W3 Total Cache
- Enable Brotli Through Cloudways Cloudflare Enterprise Add-on
- Enable Brotli Compression Directly on Your Server (Apache or Nginx)
- Enable GZIP Compression Directly on Your Server (Apache or Nginx)
- Bonus Method: Enable GZIP Compression With Breeze WordPress Cache plugin Provided by Cloudways
- Is It Worth It to Pay Extra for Website Asset Compression?
- Cloudflare Enterprise and Cloudways: Affordable Access to Premium Features
What Is Brotli Compression?
Brotli, developed by Google initially for woff2 usage and later expanded for broader applications, is a highly efficient compression algorithm. It offers compression ratios comparable to the best general-purpose compression methods available today.
Brotli introduces 11 compression quality levels, ranging from 1 to 11. As the quality level increases, so does the compression ratio. However, it’s important to note that higher compression levels will impact compression speed.
With widespread adoption, Brotli is supported by all modern web browsers, with approximately 96.6% of users utilizing browsers that support Brotli.
Internet Explorer, Edge, Firefox, Chrome, Safari, iOS Safari, Opera Mini, Chrome for Android, UC Browser for Android, and Samsung Internet all support Brotli. By incorporating Brotli functionality, these browsers ensure efficient content delivery to users.
You can examine the accept-encoding request header to check if your browser supports Brotli. Browsers that support Brotli will include the “br” token alongside “GZIP.”
When Brotli is enabled on your web server, you will receive responses in the Brotli compressed format, further enhancing the efficiency of data transmission.
Brotli Compression Algorithm Explained
Brotli is an open-source compression algorithm known for its superior compression ratios compared to GZIP. It incorporates LZ77, Huffman coding, and 2nd-order context modeling techniques to compress data efficiently.
What sets Brotli apart?
With a total of 122,784 bytes, the static dictionary forms the foundation of Brotli’s compression capabilities. Additionally, Brotli employs a mechanism of transforms that slightly modifies the words in the dictionary, further enhancing its compression effectiveness.
How does this algorithm work?
- First, Brotli looks for repeated patterns in the data and replaces them with shorter codes. This helps to eliminate redundancy and make the file more compact.
- Second, Brotli uses a method called Huffman coding. It assigns shorter codes to the most common words and longer codes to the less common ones. By doing this, Brotli can represent frequently used words with fewer bits, reducing the file size.
- Another trick that Brotli employs is called context modeling. It analyzes the context or surroundings of the data to make smarter predictions. By understanding the patterns and relationships between the data, Brotli can make more accurate guesses about what comes next. This helps in compressing the file more efficiently.
Overall, Brotli’s combination of advanced techniques, comprehensive static dictionary, and transformative mechanisms make it a highly effective compression algorithm. It delivers impressive compression ratios and file size reduction, outperforming other algorithms like GZIP, bzip2, and LZMA.
Brotli’s Advantages Over GZIP
Brotli offers an advantage over GZIP by utilizing a dictionary, allowing it to send keys instead of full keywords. Because of this, Brotli achieves significant file size reductions compared to GZIP compression.
These improvements in file size contribute to more efficient data transmission and storage in web environments.
Reducing the number of transferred bytes not only improves page load times but also helps lower the costs associated with Content Delivery Networks (CDNs).
Now that we understand Brotli’s advantages over GZIP, let’s explore its limitations.
Elevate Your Site Performance Without Breaking the Bank
Get ahead with Brotli compression using our Cloudflare Enterprise add-on, available to Cloudways users at an unbeatable $4.99/month per domain.
There are some drawbacks to using Brotli compression too. For starters, enabling Brotli requires server-side configuration changes, unlike GZIP, which is usually available by default.
Brotli has limited browser support compared to GZIP, although major browsers like Chrome, Firefox, and Opera do support it. Another downside is that Brotli takes longer to compress files compared to GZIP.
Despite its advantages, it’s important to consider these limitations when deciding whether to use Brotli compression.
What Is GZIP Compression?
GZIP, developed by Jean-loup Gailly and Mark Adler, is a widely used compression format and software application. It was originally created as a versatile compression library and drew inspiration from the DEFLATE compression algorithm.
GZIP offers 9 levels of file compression, ranging from level 1 for smaller file savings and faster compression speed to level 10 for maximum file savings at a slower compression speed.
Now, let’s take a closer look at how GZIP’s compression algorithm works.
GZIP Compression Algorithm Explained
GZIP is a lossless compression algorithm that builds upon the deflate algorithm, which combines LZ77 and Huffman coding techniques. As a lossless compression method, it ensures that the decompressed data remains identical to the original.
The GZIP compression algorithm operates in two stages. Initially, it identifies repeated byte sequences in the data and replaces them with shorter representations. These shortened sequences are then assigned a variable number of bits based on their frequency of occurrence. More frequent sequences receive fewer bits, while rarer ones are assigned more bits.
This compression process significantly reduces the size of the compressed file compared to the original.
Let’s dive into how GZIP works in practice:
- When a server receives a request for a web page, it checks the request header to determine if the browser supports GZIP compression.
- If GZIP compression is supported, the server generates the markup for the page and applies GZIP compression to it.
- GZIP converts the markup into a compressed data stream, which is then delivered to the end user.
- Upon receiving the compressed stream, the user’s browser decompresses it, restoring the original markup.
In short, GZIP identifies repetitive patterns, replaces them with shorter representations, and assigns variable-length codes based on frequency.
This compression method significantly reduces file sizes, enhancing data transmission efficiency.
GZIP’s Advantages Over Brotli
While Brotli offers impressive compression capabilities, GZIP still possesses certain advantages in specific scenarios. Here are a few advantages of GZIP over Brotli:
- Compatibility: GZIP has been widely used since the 1990s and is supported by virtually all browsers and web servers. It has become a standard compression format, ensuring widespread compatibility across various platforms.
- Established Ecosystem: GZIP has a well-established ecosystem with abundant tools and libraries available for implementation. Its long-standing presence in the industry makes integrating and working within different software environments easier.
- Compression Speed: GZIP generally has faster compression speeds compared to Brotli. It can quickly compress files, making it suitable for scenarios where speed is a priority.
- Lower Server Load: Cloudflare’s Brotli compression is performed at their edge network, not on your origin server. This means that the compression is done on Cloudflare’s servers, not yours. Therefore, using Brotli compression through Cloudflare does not use up your server’s resources. This is one of the advantages of using a Content Delivery Network (CDN) like Cloudflare, as it offloads tasks like compression from your server to theirs, freeing up resources on your server.
- Support for Streaming: GZIP is well-suited for streaming scenarios, where data is compressed and delivered in real time. Its compatibility and support for streaming applications make it a preferred choice in certain use cases.
It is worth mentioning that GZIP was initially designed for compressing files and later adapted for compressing streams to cater to web applications. In contrast, Brotli was specifically designed from the outset to compress streams, making it a more optimized choice for web servers when compressing content before streaming it to a browser.
GZIP has a few limitations to consider. Firstly, its compression ratio may not be as high as more advanced algorithms like Brotli, resulting in less file size reduction. Additionally, setting the compression ratio too high in GZIP can increase CPU overhead, impacting resource usage and processing speed.
Unlike Brotli, GZIP lacks certain advanced compression techniques, such as context modeling, which can affect compression efficiency.
Also, as I mentioned earlier, while GZIP supports streaming compression, it was originally designed for compressing files, making Brotli a more optimized choice for web servers.
Lastly, GZIP’s compression speed can vary, with higher compression levels leading to slower processing times.
Brotli vs. GZIP: A Head-to-Head Comparison
At a high level, Brotli and GZIP share a similar core purpose: compressing website content. However, the difference lies in their compression methods and effectiveness. Before we run our own tests, let’s see what already existing comparison data has to say about both compression algorithms.
It’s important to note that compression and web performance encompass multiple aspects:
- Compression Ratio: This refers to the file size savings achieved through compression. For example, compressing a 10 MB file down to 5 MB.
- Compression Speed: This refers to the speed at which compression and decompression processes occur. This factor is especially crucial for dynamically generated content that requires on-the-fly compression.
The results showed that the median compression savings were:
- GZIP: 78%
- Brotli: 82%
Note: Higher percentages indicate better compression performance.
Akamai’s study also revealed that Brotli outperformed GZIP in specific areas:
- Brotli achieved 17% better compression for CSS files
- Brotli achieved 21% better compression for HTML files
These figures represent the median results obtained from Akamai’s tests, and at a glance, Brotli offers better performance than GZIP.
Now let’s move on to the testing we performed. But before that, we need to enable GZIP or Brotli.
Enable GZIP and Brotli Using W3 Total Cache
I’ll use the W3 Total Cache plugin to enable GZIP and Brotli compression.
First, you need to install the W3 Total Cache plugin on your WordPress site. For this, you need to follow the below steps.
- Go to your WordPress website and navigate to Plugin > Add New.
- Search for W3 Total Cache on the right side search bar.
- Click on the Install button.
- Now, click on the Activate button.
The plugin has been installed. Now it’s time to see how we can enable GZIP and Brotli.
- Go to Performance > Browser Cache and Enable HTTP (gzip) compression.
- Now test it on the browser.
- Open your site on the browser.
- Right-click on the site and click on Inspect.
- Now, click on the Network tab and refresh your site.
- Locate the accept-encoding header. It will be located in the Request Headers section. These are the headers that your browser sent to the server.
- Locate the content-encoding header. This will be located in the Response Headers section.
- Here, you can see the Content-Encoding: gzip
- Follow the same steps to enable Brotli on W3 Total Cache. If you have a free version, you’ll not be able to access Brotli as it is disabled for you.
- Go to Performance > Browser Cache and Enable HTTP (brotli) compression.
That’s it. This is how to enable Brotli or Gzip compression using the W3 Total Cache plugin on your WordPress website.
That said, there are a few more configuration options you’d need to consider if you use the W3 Total Cache plugin. For example, you’d need to configure CDN from the CDN type dropdown menu, which, although not difficult, is a bit tedious.
Aside from using the plugin method, you can also enable Brotli compression if you get the Cloudways Cloudflare Enterprise add-on if you’re a Cloudways user, or you can enable Brotli or Gzip compression directly on your server.
If you go with the Cloudways Cloudflare Enterprise add-on, you won’t have to configure CDN, as Cloudflare itself is a pretty massive CDN.
Let’s now check out the method to get the Cloudways Cloudflare Enterprise add-on to have Brotli enabled by default or the methods to enable Brotli or Gzip compression directly on your server.
Boost Your Site Performance Today
Join the ranks of top-performing websites with Brotli compression, made simple with the Cloudways Cloudflare Enterprise add-on.
Enable Brotli Through Cloudways Cloudflare Enterprise Add-on
If you’re a Cloudways user, you can get the Cloudways Cloudflare Enterprise add-on for just $4.99/month per domain (pricing page).
On the other hand, if you get the Pro and Business plans from Cloudflare directly, which are priced at $20/month and $200/month, respectively, you’d have to pay a substantially higher cost.
Now that we’ve gotten that out of the way, let’s see how you can get the Cloudflare Enterprise add-on on the Cloudways platform…
- Login to your Cloudways Platform using your credentials.
- Open the Servers section from the top menu bar.
- Select the server where your desired application is deployed.
- Click on “www” to choose your application name.
- Under Application Management, click on Cloudflare.
- Enter your domain name. Note that Cloudflare Enterprise supports both root domains (example.com) and subdomains (support.example.com).
- Next, click on Enable to activate Cloudflare Enterprise for your domain. After enabling, you will notice the current status as ‘Domain not live.’ The reason is that you must first point your domain to your site’s CNAME record using your DNS registrar panel.
To proceed further into the configuration, you can check our separate detailed guide. But essentially, once the Cloudflare integration is complete, Brotli compression will be enabled by default.
Assuming you have successfully configured the Cloudflare Enterprise add-on, we will proceed to test its impact on various metrics, such as load times. Specifically, we will compare the load times with and without the CDN enabled for key locations like the US, UK, Australia, and Canada. This will allow us to evaluate the performance improvements achieved by implementing Cloudflare Enterprise.
GZIP and Brotli Enabled Sites Benchmarking on GTMetrix
|Test URL (GTMetrix)
|Page Load time
|San Antonio, USA
|Test URL (GTMetrix)
|Page Load time
|San Antonio, USA
Enable Brotli Compression Directly on Your Server (Apache or Nginx)
Enabling Brotli compression directly on your server means telling your web server to compress everything using Brotli before it sends it to a browser that has announced it can handle compression.
As a server administrator, I assume you know how to edit config files. If you don’t and are using either Apache or Nginx, here’s what you need to do:
Steps for Apache
Step 1: Enable the Apache Brotli module:
- By default, the Brotli module is included but may not be enabled.
- To enable it, use the following command:
$ sudo a2enmod brotli
Step 2: Configure the web host’s config file:
- Edit the configuration file of your web host to specify which files should be compressed.
- Add the following code within the <IfModule mod_brotli.c> section:
The above example indicates the file types that should be compressed:
- Plain Text
These file types are typically the main ones that benefit from compression.
Remember to enable the Apache Brotli module and configure the web host’s config file to specify the file types that should be compressed.
Steps for Nginx
For Nginx, here are the steps to enable Brotli compression:
Step 1: Locate and edit the nginx.conf file:
- Find your nginx.conf file, typically located in the /etc/nginx/ directory.
- Open the file for editing.
Step 2: Add the Brotli module lines:
- Inside the nginx.conf file, add the following two lines:
load_module modules/ngx_http_brotli_filter_module.so; load_module modules/ngx_http_brotli_static_module.so;
These lines load the necessary Brotli modules into Nginx.
Step 3: Modify the website’s configuration file:
- Locate the configuration file for your specific website, often found in the /etc/nginx/conf.d/ or /etc/nginx/sites-available/ directory.
- Open the configuration file for editing.
Step 4: Add Brotli configuration directives:
Inside the website’s configuration file, add the following lines:
brotli on; brotli_static on; brotli_types *;
These directives enable Brotli compression, allow serving pre-compressed Brotli files if available, and specify that Brotli compression should be applied to all file types.
Step 5: Restart the Nginx server:
- After making the changes, save the configuration files.
- Restart the Nginx web server for the changes to take effect. You can do this with the command:
$ sudo service nginx restart or $ sudo systemctl restart nginx
After restarting the web server, it will respond with a “Content-Encoding” header if the browser sends an “Accept-Encoding” header. This indicates that Brotli compression is enabled, and the server will compress the response content accordingly.
Please note that the exact file paths and commands may vary depending on your server setup and configuration.
This method can be challenging as it requires familiarity with server configuration files, command line operations (specifically for Apache servers), root user access with sudo privileges, and potentially using a text editor. Additionally, login credentials as an SSH user may be needed.
Enable GZIP Compression Directly on Your Server (Apache or Nginx)
Follow the steps below to directly enable GZIP compression on your server (Apache or Nginx).
Steps for Apache
To enable Gzip compression on an Apache web server, you can add the following gzip compression commands within the mod_deflate module in your .htaccess file:
These commands specify the file types that should be compressed using Gzip. By adding these directives within the mod_deflate module, Apache will compress the specified file types when they are requested by the browser, resulting in reduced file sizes and faster page loading times.
To learn how to locate .htaccess in WordPress, you can check out our separate guide.
Steps for Nginx
To enable Gzip compression on NGINX, you need to add the following code to your nginx.conf file:
By including this code, you activate Gzip compression, which will compress the response content before sending it to the client.
The “gzip_disable” directive ensures that older versions of Internet Explorer (MSIE 1-6) do not attempt to decompress the content. The “gzip_vary” directive adds the “Vary: Accept-Encoding” header to the response, indicating that the content is compressed.
Bonus Method: Enable GZIP Compression With Breeze WordPress Cache plugin Provided by Cloudways
To enable GZIP compression using the Breeze WordPress cache plugin, follow these steps:
- Access your WordPress dashboard and navigate to “Plugins” > “Add New”.
- Search for the “Breeze” plugin.
- Click on “Install Now” to install the plugin.
- Once the installation is complete, click on “Activate” to activate the Breeze plugin.
- To configure GZIP compression settings, go to “Settings” > “Breeze” in your WordPress dashboard.
- Within the Breeze settings, locate the “Basic Options” section.
- Enable GZIP compression by toggling the corresponding option.
Now, let’s proceed to test the compression metrics after confirming that GZIP is enabled on this website.
Tool: GID Network
Now, let’s examine the sites I’m currently working on. I have tested on https://tools.paulcalvano.com/compression.php and observed that the site size is 211KB without compression. However, with gzip compression, the size reduces significantly to 44KB.
Now, let’s move on to testing Brotli compression. As you can see in the image below, Brotli is enabled on this website. We will now proceed to evaluate the compression metrics.
For Brotli benchmarking, let’s take a look at the sites that I am currently using. Below I’ve tested my site on https://tools.paulcalvano.com/compression.php. I can see that the site size is 208 KB uncompressed and that gzip compression reduces the size to 43 KB.
Is It Worth It to Pay Extra for Website Asset Compression?
Okay, so up till now, we’ve looked at why compression is important, compared Brotli vs. GZIP, and how to implement either one on your website.
But is it worth paying for when you can get Brotli and GZIP for free?
Well, to answer this, let’s just consider Brotli as it is better than GZIP based on my own testing and from what other sources have published.
If we talk about just Brotli alone, with the Cloudways Cloudflare Enterprise add-on, you don’t have to take care of additional configuration to enable Brotli. Once you get and configure the add-on, Brotli will be enabled by default.
Plus, as previously mentioned, Cloudflare’s Brotli compression is done on their servers, not yours. Using Brotli compression through Cloudflare saves your server’s resources. It’s a benefit of using a CDN like Cloudflare, which offloads tasks like compression from your server.
However, if you use the W3 Total Cache plugin method, you’ll have to configure your own CDN. Although not complicated, it is not as seamless as getting the Cloudways Cloudflare Enterprise add-on.
Plus, with the add-on, you’re not just paying to get the Brotli compression; you’re also getting premium features like:
- 100GB Enterprise CDN
- Priority DDoS protection
- Intelligent firewall (WAF)
- Image optimization with Polish
- Brotli compression
- Mobile optimization with Mirage
- Wildcard SSL support
- PCI DSS compliance
- HTTP/3 support
- Reserved for Cloudways IPs & prioritized routing
We have covered all the features in detail in our separate blog, which gives a deeper look into the Cloudways Cloudflare Enterprise add-on.
So, to sum up, it is definitely worth paying extra to get the Brotli compression through the Cloudways Cloudflare Enterprise add-on.
All-in-One Solution for Superior Web Performance
With the Cloudways Cloudflare Enterprise add-on, not only get Brotli compression, but also a suite of features designed to optimize your website. At just $4.99/month per domain, it’s the ultimate package for web performance.
Cloudflare Enterprise and Cloudways: Affordable Access to Premium Features
So, we’ve looked at the features you get with the Cloudways Cloudflare Enterprise add-on, but what about its cost?
Unlike the Pro and Business plans, which come with price tags of $20/month and $200/month, respectively, the Cloudways Cloudflare Enterprise add-on is remarkably cost-effective at just $4.99/month per domain.
This makes it a highly affordable option suitable for businesses of all sizes. Therefore, the Cloudways Cloudflare Enterprise add-on not only provides advanced content optimization features but also offers great value for the money.
In conclusion, this blog compared the Brotli vs GZIP compression methods through manual and automated testing. The findings clearly indicate that Brotli surpasses GZIP in terms of speed and compression levels, making it the better choice.
We also discussed the process of enabling compression on your website to enhance its performance and improve user experience. Ultimately, the decision between Brotli and GZIP boils down to personal preference.
If you decide to go with Brotli, which is recommended for superior performance, I suggest considering the Cloudways Cloudflare Enterprise add-on. This add-on seamlessly combines Brotli compression with Cloudflare’s CDN network, allowing your website to benefit from the advantages of both.
By opting for the Cloudways Cloudflare Enterprise add-on, you can optimize your website’s performance and provide faster content delivery to your users.
Abdul is a tech-savvy, coffee-fueled, and creatively driven marketer who loves keeping up with the latest software updates and tech gadgets. He's also a skilled technical writer who can explain complex concepts simply for a broad audience. Abdul enjoys sharing his knowledge of the Cloud industry through user manuals, documentation, and blog posts.