Do you want your website to load faster?
Enabling GZIP and Brotli compression for your Nginx server is easy. It results in faster page loading times and better compression of your website pages.
It is also one of the essentials for a faster website speed and good performance score on mazor speed test tools like GTmetrix and Pingdom. If you want to improve your site SEO and get better rankings on Google, you need GZIP & Brotli compression.
In this tutorial, I have covered quick steps with ready to use commands to help you implement it. This tutorial could be a big time saver to help you enable GZIP & Brotli compression for Nginx.
With both the compression techniques enabled, you will see a better user engagement. Not only does it improve your site experience, but will result in a lower bounce rate.
So if you are running a Nginx web server in Linux, read this article to configure the GZIP & Brotli compression.
What is GZIP Compression?
GZIP compression is a lossless compression technique that reduces the size of your site’s HTML pages, stylesheets, and scripts. The GZIP compression consists of the two coding algorithms. These two algorithms are collectively known as the DEFLATE algorithm. The two coding algorithms of which the DEFLATE algorithm is made are LZ77 encoding and Huffman coding.
So basically the raw data is first compressed using the DEFLATE algorithm and then decompressed using the INFLATE algorithm.
What is Brotli Compression?
Brotli is developed by Google and is a compression technique based on LZ77 lossless compression algorithm, Huffman coding and 2nd order context modelling. Similar to GZIP, Brotli is also a lossless compression algorithm but better than GZIP.
It is popularly used by web servers, and CDNs to compress HTTP content. This results in faster page load time. In this tutorial, we will use the Nginx module for Brotli compression.
Steps to Install Nginx
To install the Nginx module for Brotli on Ubuntu, you need to use the ngx_brotli module. The module comprises of
- ngx_brotli filter module – used to compress responses on-the-fly.
- ngx_brotli static module – used to serve pre-compressed files.
Step 1: Installing ngx_brotli module on Ubuntu
To install the ngx_brotli module on a Ubuntu server, use the following commands and then restart Nginx to allow changes to take effect.
sudo apt-add-repository -y ppa:hda-me/nginx-stable sudo apt-get update sudo apt-get install brotli nginx nginx-module-brotli
To restart Nginx, the following command will be needed.
sudo systemctl restart nginx
Step 2: Installing ngx_brotli module on CentOS 7
To install the Nginx module for Brotli on CentOS 7 server, we shall use GetPageSpeed extras YUM repository.
sudo yum -y install https://extras.getpagespeed.com/release-el7-latest.rpm sudo yum -y install nginx nginx-module-nbr
Once the installation is complete, you need to enable the module. For this you edit the Nginx configuration file – /etc/nginx/nginx.conf
Now add the following lines at the top as shown in the screenshot below.
load_module modules/ngx_http_brotli_filter_module.so; load_module modules/ngx_http_brotli_static_module.so;
After you have added the lines, you should have the config file that looks as following screenshot.
Now you can proceed with Nginx configuration.
Step 3: Configure Nginx to use Brotli / gzip compression
If you have reached step 3, it means the compression modules are installed.
Next, open the configuration file for your site and add the commands as shown below.
#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;Again restart Nginx for the changes to take effect.
sudo systemctl restart nginx
Step 4: How to Test Brotli / gzip compression on Your website?
Using curl, you can test Brotli & GZIP compression for your website. The Brotli compression starts with br
$ curl -IL https://vashishthakapoor.com -H "Accept-Encoding: br"
HTTP/2 200
date: Sat, 20 Apr 2019 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: brNow, test the Gzip Encoding with curl and the encoding will start with gzip.
$ curl -IL https://vashishthakapoor.com -H "Accept-Encoding: gzip"
HTTP/2 200
date: Sat, 20 Apr 2019 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: gzipYou will get a response in Brotli compressed format when the Brotli compression is enabled on your web server. Alternatively, by using a web browser, you can check content encoding.
Follow the below steps to check content encoding on your web browser.
Right click on the web browser window. Then click Inspect > Network > Headers > “Response Headers” > “Content-Encoding” header
The result will be as shown below
Conclusion
Enabling Brotli & GZIP compression for Nginx was really not a rocket-science. But that is only if you follow the steps I have shown in this tutorial.
After enabling Brotli & GZIP compression, you can test the speed of your website using speed test tools online.
About the author: Vashishtha Kapoor is a Web Hosting Expert and has over 5 years of experience in SEO, PPC, Website Management and WordPress development. Vashishtha writes about WordPress customizations, web design, server administration and ad-tech topics