Brotli Compression: A Powerful Tool to Improve the Performance of WordPress Website

Core points:

• Brotli, a new compression algorithm launched by Google, can significantly improve WordPress website performance by reducing file size and speeding up loading.
• Installing and configuring Brotli on a server can be more complicated because it has not been officially released on popular web servers and requires manual configuration to be fully integrated with WordPress.
• Brotli's compression ratio is 20-26% higher than another modern compression algorithm, Gzip, resulting in smaller files and faster loading speeds.
• Although Brotli has many advantages, not all browsers support it and can only be used on HTTPS, which may present some users with adoption challenges.

WordPress has become an excellent CMS with many advantages such as ease of use, strong community support and configurability. However, one of the challenges WordPress users often face is website performance issues. This article will explore Brotli compression and its impact on WordPress performance.

Disclaimer: I work for KeyCDN, some of their articles and tools are quoted here.

There are many articles on "Speed ??up WordPress" online, which provide many ways to improve website loading speed, including optimizing with plugins. However, since Google released its latest compression algorithm, Brotli, the data collected is not enough to determine what performance gains it will bring to enable on WordPress sites.

In this article, we will measure the effect of Brotli compression by testing WordPress performance in three different scenarios:

1. Enable Gzip's WordPress
2. Enable WordPress for Brotli
3. Enable Brotli WordPress for Brotli-enabled CDN

What is Brotli compression?

Brotli (named after a Swiss bakery product) is a relatively new compression algorithm released by Google in 2015. According to Google, Brotli compression uses a combination of modern LZ77 algorithm variants, Hoffmann encoding and second-order context modeling.

Google performed various tests using the Brotli compression algorithm and compared the results with other modern compression algorithms. According to this study, Google found that Brotli is 20-26% higher in compression than Zopfli, another modern compression algorithm. In terms of performance, the smaller the file compression, it is always welcome.

Install and configure Brotli on the server

One small drawback of Brotli is that it has not yet been officially released on any popular web servers. This means that if you want to enable Brotli on your server today, you will need to do some configuration work. The following Brotli performance tests are all performed on Ubuntu 16.04.2 LTS running Nginx ( Need to know how to use Nginx? Please check the SitePoint advanced course "Accelerating Website with Nginx" ). Below, we will step by step explain how to run Brotli on the same operating system and web server.

Ubuntu 16.04 is the first Ubuntu distribution that allows you to install Brotli using apt-get. To do this, just run:

$ apt-get update && apt install brotli

After you are finished, you need to install the Nginx module for Brotli compression and compile the latest version of Nginx (current version is 1.13.0):

$ apt-get update && apt install brotli

Brotli should now be installed correctly on your server. Next, you need to configure the nginx.conf file to specify the required configuration directives. The following instructions are used for these performance tests; however, you can modify them as needed.

Brotli settings

$ git clone --recursive https://github.com/google/ngx_brotli ngx_brotli

$ wget http://nginx.org/download/nginx-1.13.0.tar.gz
$ tar zxvf nginx-1.13.0.tar.gz
$ cd nginx-1.13.0

$ ./configure --add-module=../ngx_brotli
$ make && make install

The complete list of instructions can be found on the Nginx module Github page.

Since the nginx.conf file is modified, the last step is to reload Nginx. To do this, run the following command:

brotli on;
brotli_comp_level 3;
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Test Brotli support

Brotli should now be installed and configured on your server. To verify this, you can choose from two methods.

1. Use the Brotli test tool, which will check whether the server supports Brotli based on the domain name.
2. Use Chrome browser, open Chrome Developer Tools and navigate to the Network tab. Refresh the page and select a resource. You should see that the value of content-encoding is now br, representing Brotli.

Configure Brotli to work with WordPress

At this point, you should be able to deliver WordPress resources correctly using Brotli compression. However, if you check the request header details for the HTML document, you may notice that the content-encoding value is still "Gzip". This is because WordPress PHP code relies on the PHP setting zlib.output_compression"On".

Unfortunately, it is currently impossible to change this setting using WP filters. However, with the popularity of Brotli, WordPress may introduce simple fixes. Currently, you need to manually disable zlib.output_compression by editing the php.ini file (or located in /etc/php/7.0/fpm/php.ini if ??using PHP 7.0). Simply set zlib.output_compression to Off and restart PHP using systemctl restart php7.0-fpm.service.

Now, when checking the HTML document for your website, you should be able to see the content-encoding header value br.

Processing Brotli performance test on WordPress

As mentioned above, our Brotli performance tests are performed in three different scenarios.

1. Enable Gzip's WordPress
2. Enable WordPress for Brotli
3. Enable Brotli WordPress for Brotli-enabled CDN

Brotli and Gzip compression levels are both set to "3". The compression level can be modified based on the amount of file savings and compression time you like. Each test uses a normal WordPress installation running the "2017" theme. By default, this topic loads 14 resources and transfers 236KB of data.

It should be noted that not all resources in the above test website are compressible. For example, images are neither compressed by Gzip nor by Brotli, nor by any third-party resources (such as fonts) are compressed by Brotli. Therefore, the baseline of the total size of all compressed resources using Gzip is 84.7KB. To consider the variation in load time, we performed three hard refreshes on each page and calculated the average load time for each test scenario. This way, all resources will be loaded from the server, not from the browser cache.

The following table outlines the results of loading speed and compressed resource size.

As the results show, both Brotli compression methods have faster loading times than Gzip and have smaller compression sizes. Although the page size difference is not significant, remember that these tests were performed on a bare-metal WordPress installation. For those sites that have many resources, a small amount of savings on multiple resources will surely accumulate.

In addition, for testing purposes, we set both compression methods to the highest level to observe the differences in the size of compressible resources. The results are as follows:

• Brotli 11 – Compression Size: 67.7 KB
• Gzip 9 – Compression Size: 76.7 KB

Although setting the compression level to maximum in both cases is probably not necessary (because the compression time is much longer), it is worth noting that the compressible resource size of the Brotli website is greater than that of the Gzip website. 13.2% smaller.

Brotli support status

Brotli is not universally supported by all browsers, although many popular browsers currently support it (as of May 2017).

http://miracleart.cn/link/fc5f86251458722c799d1830fa0c2c1f

As for server support, most popular web servers offer official or community-created modules. As shown in the installation process in this article, Nginx users must install the extension and use Brotli support to compile Nginx. Similarly, Apache users can use the mod_brotli module to deliver Brotli compressed content.

Pros and cons of Brotli

Like anything, using Brotli has its advantages and disadvantages. Here are some points to consider.

Pros

• Smaller compression results
• Faster loading time
• Compared with Gzip, the compression time is comparable

Disadvantages

• It's a bit troublesome to use it now
• Not all browsers support
• Manual configuration is required to be fully integrated with WordPress

In addition, Brotli can only be used on HTTPS, which can be seen as both an advantage and a disadvantage. On the one hand, it is helping more websites migrate from HTTP to HTTPS, thus creating a more secure internet. On the other hand, it brings more work to users who want to enable Brotli but are still using HTTP.

Summary

As shown in the test results, implementing Brotli on a WordPress website is very beneficial in terms of performance. Implementing Brotli on the source server allows compression on the server side and then caches the content on a CDN that supports Brotli compression, enabling faster resource delivery.

Although Brotli is not universally supported by all browsers, it is important to identify the browsers that visitors use most frequently and to meet their needs by providing faster load times. Additionally, for those who use browsers that are not yet supported, these browsers will only fall back to using Gzip - a win-win situation.

FAQs about WordPress Brotli Compression (FAQ)

What is the difference between Brotli and Gzip compression?

Brotli and Gzip are both algorithms for compressing data, but they have some key differences. Brotli, developed by Google, is a newer algorithm that provides better compression rates than Gzip. This means it can make the file smaller, which can speed up the website loading. However, Brotli is not as widely supported as Gzip, so it may not run on all browsers or servers.

How does Brotli compression improve website performance?

Brotli compression works by reducing the size of the files that make up the website. This means that when users visit your website, their browser needs to download less data, which can speed up loading. Faster loading speeds can improve user experience and have a positive impact on the website's SEO.

Does all browsers support Brotli compression?

While many modern browsers, including Google Chrome and Firefox, Brotli compression is supported, not all browsers support it. For example, Internet Explorer does not support Brotli compression. Therefore, when deciding whether to use Brotli compression, it is important to consider your audience and their possible browser usage.

How to test if my website is using Brotli compression?

There are several online tools available to test whether your website is using Brotli compression. These tools work by sending a request to your website and then analyzing the response to see if it has been compressed using Brotli.

Can I use Brotli compression on my WordPress website?

Yes, you can use Brotli compression on your WordPress site. However, implementing Brotli compression may be more complicated than other types of compression, as it requires modification of the server configuration. There are also some plugins that can help you implement Brotli compression on your WordPress website.

What are the potential drawbacks of using Brotli compression?

While Brotli compression can improve loading time, it is not without its potential drawbacks. First, it is not as widely supported as other compression methods (like Gzip). This means it may not run on all browsers or servers. Additionally, Brotli compression may consume more resources than other methods, which may slow down the server.

How does Brotli compression work?

Brotli compression works by finding and deleting redundancy in the data. It uses a dictionary of commonly used words and phrases to replace duplicate data with a shorter representation, thereby reducing the overall size of the data.

Will Brotli compression affect my website SEO?

Yes, Brotli compression may have a positive impact on your website SEO. This is because one of the factors that search engines consider when ranking websites is loading time. By reducing the size of the website files, thereby increasing loading speed, Brotli compression can help improve the SEO of the website.

Is Brotli compression suitable for all types of websites?

Brotli compression can benefit many types of websites, especially those with large amounts of textual data (such as blogs or news sites). However, it may be less beneficial for websites containing a lot of multimedia content, as such content is often overcompressed and using Brotli may not see significant size reductions.

How to implement Brotli compression on my server?

Implementing Brotli Compression on a server usually requires modifying the server's configuration file to enable Brotli Compression and specifying the file type to be compressed. The exact process may vary depending on the server's operating system and the web server software you are using.

The above is the detailed content of Measuring the Effects of Brotli Compression on WordPress. For more information, please follow other related articles on the PHP Chinese website!