Learn how to – Enable GZIP & Brotli Compression for Nginx on Linux

Learn how to – Enable GZIP & Brotli Compression for Nginx on Linux.

Question? – I’ve just installed Nginx Web server on my Linux system, how can I enable gzip & Brotli compression for static website assets such as HTML/JS/CSS/JSON files?. A faster web page load time is the desire of every Web developer and Systems administrator. Not only does the compression improve your Google page ranking, but you’ll also have better user experience and improved site engagement.

This article is focused on guiding you through configuring gzip & Brotli compression on an Nginx web server running in Linux. Gzip & Brotli are the most popular compression algorithms supported by major web browsers.

Gzip compression Algorithm?

GZIP provides a lossless compression, this means the original data can be recovered when decompressing it. It is based on the DEFLATE algorithm, which is a combination of LZ77 and Huffman coding.

Brotli compression Algorithm?

Just like gzip, brotli is a lossless compression algorithm widely supported across many browsers. It is developed by Google and is best suited for compression of text-based static resources, like json, js,css, and html. We will use NGINX module for Brotli compression in this setup.

Install ngx_brotli – Nginx module for Brotli

ngx_brotli is the Nginx module which uses Brotli for compression task. It is a set of two modules:

• ngx_brotli filter module – used to compress responses on-the-fly.
• ngx_brotli static module – used to serve pre-compressed files.

Installing ngx_brotli module on Ubuntu

The commands below are used to install ngx_brotli module on an Ubuntu system.

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

Restart Nginx to use Brotli.

sudo systemctl restart nginx

Installing ngx_brotli module on CentOS 7

We’ll use GetPageSpeed extras YUM repository to install Nginx module for Brotli on CentOS 7 server.

sudo yum -y install https://extras.getpagespeed.com/release-el7-latest.rpm
sudo yum -y install nginx nginx-module-nbr

The module needs to be enabled after installation. Edit nginx configuration file – /etc/nginx/nginx.conf and add these lines near top.

 load_module modules/ngx_http_brotli_filter_module.so;
 load_module modules/ngx_http_brotli_static_module.so;

Here is the screenshot for my Computingforgeeks Nginx configuration.

Configure Nginx to use Brotli / gzip compression

Now that we have installed our compression modules. Open Nginx configuration file for your site and add below lines.

# gzip
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

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

Nginx web server needs a restart for the static contents to be compressed.

sudo systemctl restart nginx

Testing Brotli / gzip compression on a website

Browsers which supports brotli send ‘br’ along with ‘gzip’ in the accept-encoding request header.

$ curl -IL https://ownyourlife.com.ng -H "Accept-Encoding: br"
HTTP/2 200 
date: Sat, 20 Apr 2022 20:06:28 GMT
content-type: text/html; charset=UTF-8
vary: Accept-Encoding
...
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 4ca9bd24fdfecb79-MBA
content-encoding: br

Check gzip Encoding with curl:

$ curl -IL https://ownyourlife.com.ng -H "Accept-Encoding: gzip"
HTTP/2 200 
date: Sat, 20 Apr 2022 20:06:28 GMT
content-type: text/html; charset=UTF-8
vary: Accept-Encoding
...
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 4ca9bd24fdfecb79-MBA
content-encoding: gzip

If brotli is enabled on your web server, you will get a response in brotli compressed format. You can also use a Web browser to check content encoding, under:

Inspect > Network > Headers > "Response Headers" > "Content-Encoding" header

Congrats!. You should now have faster website loading after enabling compression of static site assets. Use GTmetrix and Pingdom to perform your Website Speed test.

Reference:

• GetPageSpeed