Data compression plays an important role in your WordPress site’s performance. Essentially, it involves compressing your pages and files at the server level before sending them to the user’s browser. If you’re new to the process, you might be trying to make a choice between Brotli vs Gzip compression.
To help you out, we’ve put together a comprehensive comparison guide. By looking at the pros, cons, and performance results yielded by each compression method, you should be able to choose the solution that meets your needs. 😎
In this post, we’ll take a closer look at 💾 data compression and how it works. Then, we’ll compare Brotli vs Gzip and show you how to enable each method in WordPress. Let’s get started!
📚 Table of contents:
An overview of data compression
Data compression is the process of reducing the size of files on your WordPress website when your server delivers those files to visitors. Smaller files lead to faster loading times, which is essential for providing a good user experience and improving search engine rankings.
You might already be familiar with image compression. This involves compressing any large image files on your site so they can load more quickly.
However, when you use a data compression solution like Gzip or Brotli, you can optimize all of your site’s files on the server as the server delivers those files to your reader.
In the following sections, we’ll be comparing Brotli vs Gzip, which are two of the most popular compression solutions for WordPress.
Gzip compression 🗜️
Gzip is a popular data compression method that’s been around since the early 1990s.
On websites, Gzip compression can reduce the size of files shared between the web server and the user’s browser. It does this by replacing long strings of data within a file with shorter ones.
👉 Gzip supports nine lossless compression levels. Let’s look at the most commonly used methods:
- Fastest (Level 1): This provides the fastest compression and decompression speeds but offers the least reduction in file size. Since it doesn’t require much processing power, you might use it if you have limited server resources or a small website.
- Default (Level 6): This level provides a balanced approach, offering good compression ratios while maintaining acceptable speeds. In fact, it’s the default method for many WordPress websites.
- Best (Level 9): With this level, you get the highest compression ratio and the smallest file sizes. However, since it requires more processing power, you’ll need to have enough server resources to support it.
As you can see, Gzip gives you a lot of control over the level of compression. However, it requires server resources to run. Let’s take a closer look at its pros and cons.
Pros of Gzip compression 👍
- Gzip is supported by virtually all browsers and web servers, so compatibility issues are very minimal.
- It provides a huge library of resources and tools to help website owners and developers implement and configure Gzip compression.
- Gzip offers fast compression speeds, which makes it ideal for streaming scenarios where data needs to be compressed and delivered in real-time.
Cons of Gzip compression 👎
- Gzip compression requires server resources, which can lead to increased CPU usage, impacting your site’s performance.
- Configuring Gzip compression might be challenging if you’ve never accessed your server before, but many hosting providers enable Gzip by default, so you won’t have to do any work.
Testing Gzip compression 👨💻
Gzip compression is enabled by default by most hosting providers. You can check if it’s available on your site with this free tool by Gift of Speed. All you need to do is enter your URL:
If Gzip is enabled, you’ll see your compression results. In our case, Gzip reduced our page size from 108 KB to 19.12 KB:
Additionally, it compressed 82.3 percent of the data within 0.0033 seconds.
Don’t worry if you don’t have Gzip enabled on your site – we’ll show you how to implement it later in the post.
Brotli compression 🗜️
Brotli is a data compression algorithm developed by Google. It is designed to provide better compression ratios and faster speeds than Gzip:
👉 Brotli offers a variety of compression modes, which include:
- Generic mode (default): This provides the best balance between compression ratio and speed.
- Text mode: This is designed for compressing plain text files.
- Font mode: As the name suggests, this is used for compressing font files.
Additionally, Brotli enables you to specify a quality level (1-11) when compressing files.
Higher quality levels result in better compression ratios, but they need more processing power. Meanwhile, lower levels provide faster compression and decompression, but you might not get the same level of size reduction.
Pros of Brotli compression 👍
- Brotli uses a dynamic dictionary and context modeling, which enable it to adapt to specific types of data.
- It can reduce file size more significantly than Gzip, which contributes to faster loading times and reduced bandwidth usage.
- Brotli also decompresses files faster than Gzip, leading to quicker page rendering for users, especially anyone visiting your site on devices with limited processing power like mobile phones.
Cons of Brotli compression 👎
- Unlike Gzip, which is usually enabled by default, implementing Brotli requires server-side configuration changes. Or, you can enable it with a service like Cloudflare.
- Brotli has limited browser support compared to Gzip, although it is supported by most major browsers, like Chrome.
Testing Brotli compression 👨💻
Some hosting providers, like SiteGround offer Brotli compression, although Gzip is more common. You can use the same Gift of Speed tool to see if Brotli is enabled on your server.
We tried Brotli on our staging site and got the following results:
The page was compressed down to 8.5 KB from 47.64 KB. The compression percentage was almost the same as Gzip (82.15 percent), but the data was compressed in less time (0.0013 seconds).
How to enable Brotli and Gzip on WordPress 🟢
The easiest way to enable Gzip and Brotli on WordPress is by using an optimization plugin. For example, W3 Total Cache lets you implement both compression methods with a few clicks.
Once you’ve installed and activated the plugin on your site, go to Performance → Browser Cache. Then, look for Enable HTTP (gzip) compression and Enable HTTP (brotli) compression and check the relevant box:
Note that Brotli compression is only available with the premium version of W3 Total Cache. Alternatively, you can install Brotli manually on your web server, although this might not be possible if you’re on a shared hosting plan.
For another way to enable Brotli compression, you can also set up Cloudlfare on your site. Cloudflare includes a built-in option to deliver your site’s files using Brotli compression.
Performance results of Brotli vs Gzip 📈
Finally, let’s look at Brotli vs Gzip in terms of performance. For this experiment, we tested the same staging site with Google Dev Tools.
With Gzip compression enabled, we got the following results. The main metrics we need to look at here are page size and load time, as highlighted in the image below:
As you can see, Gzip gave us a page size of 13.6 KB, and the content was loaded in 1.12 seconds.
Then, we enabled Brotli and ran the test again. This time, the page was compressed to 10.9 KB and the load time was 559 milliseconds:
Therefore, Brotli gave us higher compression and faster loading times than Gzip.
Brotli vs Gzip: Which compression should you use? 🤔
In this Brotli vs Gzip guide, we noted that both tools can help you deliver fast loading times with data compression. However, Gzip is more widely used and supported, and it’s usually enabled by default on your web server, so you don’t need to configure it.
If you want a more advanced solution, Brotli provides higher compression levels with less delivery time. This is because it was originally designed for web servers, and it’s therefore more effective at reducing file size.
Since 2023, Brotli has received broad support from all major web browsers. ⛑️
Do you have any questions about using Brotli vs Gzip? Let us know in the comments section below!