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 Debian / Ubuntu

Install build dependencies required to compile ngx_brotli module.

sudo apt update
sudo apt install curl build-essential  vim dpkg-dev gnupg2 libpcre3 zlib1g-dev libpcre3-dev -y

Import Nginx GPG key.

curl  -fsSL https://nginx.org/keys/nginx_signing.key|sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/nginx.gpg

Add Nginx APT repository.

### Ubuntu ###
sudo tee  /etc/apt/sources.list.d/nginx.list<<EOF
deb http://nginx.org/packages/ubuntu/ $(lsb_release -cs) nginx
deb-src http://nginx.org/packages/ubuntu/ $(lsb_release -cs) nginx
EOF

### Debian ###
sudo tee  /etc/apt/sources.list.d/nginx.list<<EOF
deb http://nginx.org/packages/debian/ $(lsb_release -cs) nginx
deb-src http://nginx.org/packages/debian/ $(lsb_release -cs) nginx
EOF

Download the Nginx source into the local system.

sudo apt update
cd /usr/local/src && sudo apt source nginx

Install the build dependencies for nginx

sudo apt build-dep nginx -y

Download Brotli source from the Git repository

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

Switch to nginx-*/ directory.

cd nginx-*/

Edit the debian/rules file.

vim debian/rules

Find below two build environments:

• config.env.nginx
• config.env.nginx_debug

Edit the Build Flags on both environments by adding the ‘–add-module=‘ option for ngx_brotli

--add-module=/usr/local/src/ngx_brotli

It should look similar to one shown in the following screenshot.

Once changes are made in the file, compile and build the nginx package with ngx_brotli support

dpkg-buildpackage -b -uc -us

Two Debian packages should be generated after compile is complete.

$ ls -l /usr/local/src/*.deb
-rw-r--r-- 1 root root 1347932 Aug 24 00:16 /usr/local/src/nginx_1.24.0-1~jammy_amd64.deb
-rw-r--r-- 1 root root 9913360 Aug 24 00:16 /usr/local/src/nginx-dbg_1.24.0-1~jammy_amd64.deb

Install generated Nginx packages with Brotli support:

cd /usr/local/src/
sudo dpkg -i *.deb

Installation output:

Selecting previously unselected package nginx.
(Reading database ... 57775 files and directories currently installed.)
Preparing to unpack nginx_1.24.0-1~jammy_amd64.deb ...
----------------------------------------------------------------------

Thanks for using nginx!

Please find the official documentation for nginx here:
* https://nginx.org/en/docs/

Please subscribe to nginx-announce mailing list to get
the most important news about nginx:
* https://nginx.org/en/support.html

Commercial subscriptions for nginx are available on:
* https://nginx.com/products/

----------------------------------------------------------------------
Unpacking nginx (1.24.0-1~jammy) ...
Selecting previously unselected package nginx-dbg.
Preparing to unpack nginx-dbg_1.24.0-1~jammy_amd64.deb ...
Unpacking nginx-dbg (1.24.0-1~jammy) ...
Setting up nginx (1.24.0-1~jammy) ...
Created symlink /etc/systemd/system/multi-user.target.wants/nginx.service → /lib/systemd/system/nginx.service.
Setting up nginx-dbg (1.24.0-1~jammy) ...
Processing triggers for man-db (2.10.2-1) ...

See screenshot

Restart Nginx to use Brotli.

sudo systemctl restart nginx

test

If you see ‘content-encoding: br‘ in the ouput then brotli support is okay.

Install ngx_brotli module on CentOS / Rocky / AlmaLinux

Install required dependencies.

sudo yum install -y curl wget git epel-release socat pcre pcre-devel zlib zlib-devel openssl openssl-devel
sudo yum -y groupinstall "Development Tools"

Add Nginx repository into your system

sudo vim /etc/yum.repos.d/nginx.repo

Paste the following contents.

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

Enable the repository to use it.

sudo yum-config-manager --enable nginx-mainline

Install Nginx package and enable the service.

sudo yum install -y nginx
sudo systemctl enable nginx.service

Download latest release of mainline Nginx source code and extract it. You can also check the latest releases tag on Github.

cd ~/
VER=1.25.2
wget http://nginx.org/download/nginx-$VER.tar.gz
tar xvf nginx-$VER.tar.gz

Dwnload brotli NGINX module source code:

git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init --recursive
cd ..

Configure the build to use brotli:

cd nginx-$VER
./configure --with-compat --add-dynamic-module=../ngx_brotli

Compile the ngx_brotli as a dynamic module

make modules

Next we need to copy brotli module into Nginx’s module directory /etc/nginx/modules:

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

You can confirm if the modules exist now.

$  ls -1 /etc/nginx/modules
ngx_http_brotli_filter_module.so
ngx_http_brotli_static_module.so

Set permissions for the modules files to 644:

sudo chmod 644 /etc/nginx/modules/*.so

Enable the modules after installation by editing nginx configuration file – /etc/nginx/nginx.conf and add these lines near top.

$ sudo vim /etc/nginx/nginx.conf 
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Validate Nginx configuration. There should be no error.

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Restart nginx web server.

sudo systemctl restart nginx

Configure Nginx to use Brotli / gzip compression

Now that we have installed our compression modules, open nginx configuration file for editing.

sudo vim /etc/nginx/conf.d/gzip_brotli.conf

Add below lines inside the file.

# 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 -H 'Accept-Encoding: br' -I http://localhost
HTTP/1.1 200 OK
Server: nginx/1.24.0
Date: Thu, 24 Aug 2023 00:41:42 GMT
Content-Type: text/html
Last-Modified: Tue, 15 Aug 2023 19:24:52 GMT
Connection: keep-alive
ETag: W/"6434bbbe-267"
Content-Encoding: br

Check gzip Encoding with curl:

$ curl -IL http://localhost -H "Accept-Encoding: gzip"
HTTP/1.1 200 OK
Server: nginx/1.24.0
Date: Thu, 24 Aug 2023 00:55:00 GMT
Content-Type: text/html
Last-Modified: Tue, 15 Aug 2023 19:24:52 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"6434bbbe-267"
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:

• https://brotli.org/
• https://github.com/google/ngx_brotli
• https://docs.nginx.com/nginx/admin-guide/web-server/compression/