DevOps
Configuring Brotli Compression with Nginx for Faster Web Performance
Need technical help?
Our experts will get back to you within 24 hours.
Problem
The website is running on Nginx, but page load times are slow due to large file sizes. Gzip compression is enabled, but we want better performance with Brotli, which offers higher compression rates and faster loading speeds.
However, Nginx does not support Brotli by default, and you need to configure it manually.
Solution
We will go through step-by-step instructions to:
Install Brotli on Nginx
Enable Brotli compression for static & dynamic content
Test and verify Brotli compression is working
Why Use Brotli Compression?
- Developed by Google, Brotli is a modern compression algorithm that outperforms Gzip.
- Up to 20% better compression than Gzip for web assets like HTML, CSS, and JavaScript.
- Reduces page load times and improves SEO ranking.
- Widely supported by browsers like Chrome, Firefox, and Edge.
- Comparison of Gzip vs. Brotli Compression
Gzip
- Compression Ratio: Moderate (~60-70%)
- Decompression Speed: Fast
- Browser Support: All browsers
Brotli
- Compression Ratio: Higher (~70-80%)
- Decompression Speed: Very Fast
- Browser Support: All modern browsers
Installing Brotli on Nginx
Step 1: Check if Nginx Already Supports Brotli
Run:
nginx -V 2>&1 | grep brotli
If you see no output, Brotli is not installed, and we need to enable it manually.
Step 2: Install Brotli Module for Nginx
Option 1: Install Brotli with Precompiled Nginx Package (Ubuntu/Debian)
For Ubuntu users, install Brotli with:
sudo apt updatesudo apt install -y nginx-extrasThis package includes the Brotli module.
Option 2: Compile Nginx with Brotli Manually (For Advanced Users)
If nginx-extras is unavailable, manually compile Nginx with Brotli:
sudo apt update && sudo apt install -y git gcc g++ make zlib1g-dev libpcre3 libpcre3-devcd /usr/local/srcgit clone https://github.com/google/ngx_brotli.gitcd ngx_brotli && git submodule update --init
Then, recompile Nginx with Brotli:
./configure --add-module=/usr/local/src/ngx_brotli make && sudo make install
After installation, restart Nginx:
sudo systemctl restart nginx
Configuring Brotli in Nginx
After installation, enable Brotli in the Nginx configuration file.
Step 1: Open the Nginx Configuration File
Edit the Nginx config file:
sudo nano /etc/nginx/nginx.confStep 2: Enable Brotli Compression
Inside the http {} block, add:http { # Enable Brotli brotli on; brotli_static on;
# Set Brotli compression levels (1-11, higher is better but slower)
brotli_comp_level 6;
# File types to compress brotli_types text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml; # Minimum file size for Brotli compression (default: 20 bytes) brotli_min_length 1000; # Enable Gzip as a fallback for non-Brotli supported clients gzip on; gzip_types text/plain text/css application/json application/javascript text/xml image/svg+xml;}
Save and exit (CTRL+X, then Y, then ENTER).
Restart Nginx and Verify Configuration
Step 1: Restart Nginx
Apply the changes:
sudo systemctl restart nginxStep 2: Test Brotli Compression
Run the following command:
curl -H "Accept-Encoding: br" -I https://yourdomain.comIf successful, the output will include:
Content-Encoding: brThis confirms that Brotli compression is working.
Verify Brotli Using Browser Developer Tools
Open Chrome Developer Tools
Open your website in Chrome.
Press F12 (or Ctrl + Shift + I) to open DevTools.
Go to Network > Click on a request > Headers Tab.
Look for Content-Encoding: br (this confirms Brotli is active).
Expected Output:
content-encoding: br Troubleshooting Brotli Compression
Conclusion
By enabling Brotli compression on Nginx, you can achieve:
- Faster website load times
- Better SEO performance
- Reduced bandwidth usage
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our DevOps Expertise.
Devops
