Hi Friends! Yesterday I found out that the Brotli compression is not enabled. I saw this information on this blog’s W3 Total Cache plugin. Since I’m not familiar with it, I decided to research about it.

What Is Brotli?

Straight from its Github page:

Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding and 2nd order context modeling, with a compression ratio comparable to the best currently available general-purpose compression methods. It is similar in speed with deflate but offers more dense compression.

The specification of the Brotli Compressed Data Format is defined in RFC 7932.

To be honest, I don’t understand most of the above sentence. I only know lossless compression (contrast it against lossy compression, e.g. JPEG). Anyway, that’s another research in another day.

Brotli vs Gunzip

I have configured this blog to use gunzip. Is there further benefit of using Brotli? Let’s read Nick’s conclusion:

For 5 paragraphs of lorem ipsum, Brotli beats gzip by 5%. If I run the same experiment with the front page of reddit.com from 10/01/2015, Brotli beats gzip by 22%! Note that both measurements were using the compressors out of the box without any tweaking of configuration values.

This Blog’s Configuration

This blog’s OS:

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.6 LTS
Release:        18.04
Codename:       bionic

PHP version:

$ php --version
PHP 7.4.24 (cli) (built: Sep 23 2021 21:35:51) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.24, Copyright (c), by Zend Technologies

NGINX version:

$ nginx -v
nginx version: nginx/1.17.3

Next steps is where we install and configure all the required components in order to enable Brotli compression.

Install Brotli

Installation command:

sudo apt-get install brotli

Command to verify brotli installation:

$ brotli --version
brotli 1.0.4

Now brotli is installed in the system. Let’s continue by working on PHP installation.

Install Brotli Extension for PHP

First we need to install PHP-dev (so we can run phpize):

sudo apt-get install php7.4-dev

Then run the following commands to get the extension’s source code, build and install:

cd /tmp
git clone –recursive –depth=1 https://github.com/kjdev/php-ext-brotli.git
cd php-ext-brotli
phpize
./configure
make
make install

Edit php.ini, add the following (find the location of the commented extension. e.g: ;extension=xxxx.so):

extension=brotli.so

Reload PHP:

sudo service php7.4-fpm reload
sudo service php7.4-fpm restart

Install Brotli extension for NGINX

Run the following command:

sudo apt-add-repository -y ppa:hda-me/nginx-stable
sudo apt-get update
sudo apt-get install brotli nginx nginx-module-brotli

Edit nginx.conf to load the modules:

        ## ngx_brotli filter module - used to compress responses on-the-fly.
        load_module modules/ngx_http_brotli_filter_module.so;
        ## ngx_brotli static module - used to serve pre-compressed files.
        ## Both ngx_brotli modules could be used separately, but part of nginx-module-brotli package
        load_module modules/ngx_http_brotli_static_module.so;

Further brotli configuration will be handled by W3 Total Cache. Restart NGINX:

sudo service nginx restart

Enable Brotli in W3 Total Cache

Go to plugin settings, Browser Cache:

We need to enable it in three locations: General, CSS & JS, and HTML & XML. Once we applied the settings, verify the .conf generated in /etc/nginx/available-sites:

# BEGIN W3TC Browser Cache
brotli on;
brotli_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;
gzip on;
gzip_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;
location ~ (robots\.txt|[a-z0-9_\-]*sitemap[a-z0-9_\-]*\.(xml|xsl|html)(\.gz)?) {
    try_files $uri $uri/ /index.php?$args;
}

Finally, verify the result in browser:

That’s all friends! I hope it helps.

This post will be impossible without information from the following sources:

1. https://github.com/kjdev/php-ext-brotli
2. https://nixcp.com/brotli-compression-nginx/
3. https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linux/