Why Brotli Compression Matters
Data sent across the internet is often compressed to improve how fast it can be transferred. Brotli is a modern compression algorithm developed by Google that significantly outperforms older methods like GZip, offering 15-25% better compression ratios.
Enabling Brotli compression provides:
- Smaller file transfers than GZip compression
- Faster page load times especially for JavaScript-heavy applications
- Reduced bandwidth costs from serving less data
- Better Core Web Vitals scores for SEO
- Improved mobile performance where every byte matters
Brotli is supported by 97%+ of browsers, including Chrome, Firefox, Safari, and Edge. For the small percentage of older browsers, Expedited WAF automatically falls back to GZip.
Brotli vs GZip
Brotli achieves better compression than GZip for several reasons:
- Uses a larger dictionary of common web content patterns
- Employs more sophisticated compression algorithms
- Optimized specifically for web content (HTML, CSS, JavaScript)
Typical compression comparison:
| File Type | GZip Size | Brotli Size | Additional Savings |
|---|---|---|---|
| HTML | 20 KB | 16 KB | 20% smaller |
| CSS | 25 KB | 20 KB | 20% smaller |
| JavaScript | 125 KB | 100 KB | 20% smaller |
| JSON | 8 KB | 6 KB | 25% smaller |
How Brotli Works
When a browser requests a resource, it sends an Accept-Encoding: br, gzip header indicating it supports Brotli. If your server supports Brotli, it compresses the response and sends it with a Content-Encoding: br header. The browser automatically decompresses the content.
Expedited WAF handles Brotli compression at the edge, so your Heroku dynos don’t need to spend CPU cycles on compression.
Prerequisites
What you need to get started:
- Expedited WAF add-on installed on your Heroku application
How To Enable Brotli Compression on Heroku
Step 1: Open the Performance Settings
Navigate to your Expedited WAF dashboard and select the Site Speed Up page from the sidebar menu.
Step 2: Enable Brotli Compression
Toggle on Brotli compression. Expedited WAF will automatically use Brotli for browsers that support it.
Step 3: Verify Compression
Test that Brotli is working using browser developer tools:
- Open your site with DevTools open (Network tab)
- Look for the
Content-Encoding: brheader on responses - Compare the transferred size vs actual size to see compression savings
What Gets Compressed
Expedited WAF compresses text-based content types with Brotli:
- HTML pages
- CSS stylesheets
- JavaScript files
- JSON API responses
- XML data
- SVG images
- Web fonts (WOFF, TTF)
Binary files like images and videos are not compressed, as they’re already compressed.
Common Use Cases
JavaScript-Heavy SPAs
Single-page applications often have large JavaScript bundles (1MB+). Brotli’s superior compression significantly reduces initial load time.
API Backends
JSON API responses compress extremely well with Brotli. Mobile apps benefit from reduced data transfer.
Global Applications
International users on slower connections see the biggest benefits from maximum compression.
Performance-Critical Sites
E-commerce, media, and SaaS applications where page speed directly impacts revenue.
Browser Support
Brotli is supported by virtually all modern browsers:
- Chrome: 50+ (2016)
- Firefox: 44+ (2016)
- Safari: 11+ (2017)
- Edge: 15+ (2017)
- Opera: 36+ (2016)
- iOS Safari: 11+ (2017)
- Android Chrome: 50+ (2016)
For the small percentage of users on older browsers, Expedited WAF automatically falls back to GZip compression.
Troubleshooting
Issue: Content-Encoding shows gzip instead of br
- The browser may not support Brotli (check browser version)
- Some browser extensions disable Brotli
- Test in an incognito window
Issue: Compression not working at all
- Verify the WAF is correctly proxying your traffic
- Check that the content type is compressible (text-based)
- Ensure the response size is large enough to benefit (small files may not be compressed)
Issue: Safari showing issues
- Older Safari versions had Brotli bugs
- Ensure users are on Safari 11+
- Expedited WAF handles fallback automatically
Related Guides
Resources
Learn more about Brotli compression: