Brotli is the new compression algorithm, and it is now widely supported across many browsers.
With Brotli being a clear winner over standard GZIP compression, not implementing it for your website is not just an oversight, but also negligence of its huge optimization potential.
You’ve been neglecting it, haven’t you? Time to fix things up 🙂
You can use our repository to easily install the RPM package for the dynamic Brotli module for NGINX.
The dynamic module is compatible with the latest stable/mainline NGINX for CentOS/RHEL or Amazon Linux.
Step 1. Add GetPageSpeed extras RPM repository
Run the following command to add our repository:
sudo yum -y install https://extras.getpagespeed.com/release-latest.rpm
Step 2. Install NGINX and Brotli module
Then, all you have to do to install NGINX with Brotli module:
sudo yum -y install nginx nginx-module-brotli
Follow the installation prompt to import GPG public key that is used for verifying packages.
Step 3. Enable Brotli support in NGINX
Once you have installed the Brotli NGINX module package, you’ll notice it actually consists of the two separate modules.
You may want to simply follow the installer’s suggestion:
----------------------------------------------------------------------
The Brotil dynamic modules for nginx have been installed.
To enable these modules, add the following to /etc/nginx/nginx.conf
and reload nginx:
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;
Please refer to documentation here:
https://github.com/eustas/ngx_brotli
----------------------------------------------------------------------
Doing so will enable both regular and static Brotli filters. But what is their purpose and why two?
The regular Brotli module, ngx_http_brotli_filter_module.so, will dynamically compress everything that NGINX serves to end visitors.
The static Brotli module, ngx_http_brotli_static_module.so, allows you to serve Brotli-encoded versions of your static files which you have pre-compressed in advance. You may want to check out our guide on serving pre-compressed brotli files with NGINX’s brotli_static module.
So in most cases, you’re fine with just the regular Brotli module, but if you’re a hardcore optimizer you will pre-compress your files with Brotli’s highest compression level, and enable the second module as well.
Enable Brotli compression for all websites
Now that our NGINX has Brotli compression capability, you can start tinkering with configuration and actually enable the new compression algorithm.
The best way to do this is by using conf.d auto-include facility of your NGINX distribution.
Create the new file /etc/nginx/conf.d/brotli.conf and define your desired compression parameters there.
The following minimalistic configuration will ensure Brotli compression for the majority of compressible file formats:
brotli on;
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;
brotli_comp_level 4;
A more complete MIME type list has been suggested here:
application/atom+xml
application/geo+json
application/javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-font-opentype
application/x-font-truetype
application/x-font-ttf
application/x-javascript
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
application/xml+rss
font/eot
font/opentype
font/otf
image/bmp
image/svg+xml
image/vnd.microsoft.icon
image/x-icon
image/x-win-bitmap
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy
text/xml
Now we’ve listed all the MIME types of files which will be Brotli-compressed.
We choose compression level 4 over the default 6, because the sweet spot of Brotli’s compression vs processor load, compared to Gzip, is at level 4. At that level, the level of compression is already higher than Gzip’s default, while also finishing compression more quickly.
To apply the changes, reload your NGINX (if it was running), or start it.
PageSpeed module compatibility
As it stands, the PageSpeed NGINX module does not support Brotli compression internally.
You can use if together with Brotli NGINX module, but you will have to disable internal PageSpeed compression via:
pagespeed HttpCacheCompressionLevel 0;
This will ensure that the Brotli compression works, at the cost of storing optimized assets uncompressed.
Verify Brotli compression works
Via Command-Line
It’s easiest to launch the Terminal app (if you have OS X) and check if your NGINX emits Brotli encoded responses.
Simply use curl like this:
curl -IL https://example.com -H "Accept-Encoding: br"
As long as you see the response includes Content-Encoding: br, it means that NGINX properly handles Brotli compression.
Using CLI to check Brotli support, implies at least some knowledge of working with the Terminal app. So you can use your browser method instead.
Via browser
- Launch Chrome (what developer doesn’t have it?) and navigate to your website
- Right-click anywhere on the opened page and choose “Inspect”.
- Developer tools sidebar will open.
- Click on “Network” in the developer tools sidebar, then “Doc”. This tells Chrome to log only requests to the main document.
- Now reload the page, and expand the log entry which was created by clicking it.
- Scroll down to “Response Headers” and find “Content-Encoding” header. The value of “br” means that the response was encoded via Brotli.
Congrats!
The Brotli module automatically compresses assets for supporting browsers, and also sends response header Vary: Accept-Encoding. This instructs intermediate caches to vary cache based on compression methods supported by clients.
Feels like something is still missing? Then continue reading on how to install PageSpeed module in NGINX 🙂