DevOps
Optimize Website Speed: Setting Up Brotli Compression with Nginx
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
Compression Algorithms Overview
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 brotliIf 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-extras
This 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 nginxConfiguring 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
- Brotli not working: Ensure nginx-extras is installed or compiled correctly.
- Content-Encoding not showing: Check if the browser supports Brotli (Accept-Encoding: br).
- Files not compressing: Verify brotli_types includes the correct file types.
- Slow performance: Reduce brotli_comp_level to 4 or 5 for better speed.
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
