Prerequisites

• A fresh Webdock cloud Ubuntu instance with LEMP installed.
• You have shell (SSH) access to your VPS.

Compiling and Activating Brotli in Nginx

If you choose a LAMP or LEMP Webdock stack then your Webdock server already has Nginx preinstalled. We suggest you upgrade your system before proceeding:

$ sudo apt update; sudo apt upgrade;

If prompted what to do with config files, choose to keep the existing versions.

Next, use this command to download the Nginx source appropriate for your Nginx version. we’ll use this code to build *.so module binaries to be used for Brotli compression. 

$ wget https://nginx.org/download/nginx-$(nginx -v 2>&1 | cut -d / -f2).tar.gz 

Please note that in this article we assume that the version you downloaded was for v1.19.6 - your version may differ so either ls to see what the tar.gz filename is, or start typing "nginx" and hit tab to autocomplete (should work in most terminals)

$ tar zxvf nginx-1.19.6.tar.gz 

Next, clone the Brotli compression code from Google’s official Github repository. 

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

Then enter the Nginx source directory and compile the modules.

$ cd nginx-1.19.6/ 
$ sudo ./configure --with-compat --add-dynamic-module=../ngx_brotli
$ sudo make modules 

Brotli modules (*.so files) are now generated, copy them from “./objs” directory to Nginx’s modules directory.

Use the ls command to list the modules.

$ ls ./objs/*.so

Sample output:

objs/ngx_http_brotli_filter_module.so 
objs/ngx_http_brotli_static_module.so

Now copy the modules to the Nginx modules path.

$ sudo cp objs/ngx_http_brotli*.so /etc/nginx/modules/ 

At this point, feel free to delete the tar.gz you downloaded as well as the ngx_brotli/ and nginx-1.19.6/ directories if you want to free up some disk space.

Now open Nginx’s default configuration file located at ‘/etc/nginx/nginx.conf’

$ sudo nano /etc/nginx/nginx.conf

Add the highlighted text at the beginning.

user www-data; 
. . . . 
load_module "modules/ngx_http_brotli_filter_module.so";
load_module "modules/ngx_http_brotli_static_module.so";
. . . . ​​​​​

And add the following highlighted lines at the end of the http {} section in the configuration file

http { 
## 
# Basic Settings 
## 
. . . . 
brotli on; 
brotli_comp_level 6; 
brotli_static on; 
brotli_types application/atom+xml application/javascript application/json application/rss+xml 
application/vnd.ms-fontobject 
application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript 
application/xhtml+xml application/xml 
font/eot font/opentype font/otf font/truetype 
image/svg+xml image/vnd.microsoft.icon 
image/x-icon image/x-win-bitmap text/css 
text/javascript text/plain text/xml; 
}

Finally, restart Nginx 

$ sudo systemctl restart nginx

Brotli compression is now enabled in Nginx server. To verify it, go to a test website e.g, https://www.giftofspeed.com/gzip-test/ and check if it is enabled

Conclusion

In this article we learned how we can enhance your website’s loading speed by adding support for Brotli compression in the Nginx webserver. For more info, please refer to the official documentation