Brotli Compression: Next-Generation Web Compression

Achieve 20-26% better compression than gzip with Google's modern algorithm

What is Brotli Compression?

Brotli is a modern compression algorithm developed by Google that provides significantly better compression ratios than gzip while maintaining fast decompression speeds. It's specifically optimized for web content.

Accept-Encoding: br
Content-Encoding: br

Brotli Advantages

  • 20-26% smaller files compared to gzip
  • Optimized dictionary for web content
  • 11 quality levels for fine-tuned compression
  • Faster decompression than gzip at similar ratios
  • Supported by all modern browsers over HTTPS

Brotli vs Gzip Comparison

HTML Compression

Gzip: 73% reduction

Brotli: 81% reduction

Brotli excels with HTML's repetitive structure.

CSS Compression

Gzip: 79% reduction

Brotli: 85% reduction

CSS benefits greatly from Brotli's dictionary.

JavaScript Compression

Gzip: 71% reduction

Brotli: 79% reduction

Significant improvements for JS bundles.

Compression Speed

Gzip: Faster compression

Brotli: Slower compression

Brotli trades CPU time for better ratios.

Browser Support for Brotli

Brotli is supported by all modern browsers, but only over HTTPS connections:

Chrome/Edge

✅ Full support since Chrome 50

HTTPS required

Firefox

✅ Full support since Firefox 44

HTTPS required

Safari

✅ Support since Safari 11

macOS 10.13+ / iOS 11+

Mobile Browsers

✅ All modern mobile browsers

Android 5+ / iOS 11+

# Browsers send this header for Brotli support:
Accept-Encoding: gzip, deflate, br

Implementing Brotli Compression

Nginx Configuration

# Install nginx-module-brotli first
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    # Enable Brotli compression
    brotli on;
    brotli_comp_level 6;
    brotli_types text/plain text/css text/xml text/javascript 
        application/javascript application/json 
        application/xml+rss image/svg+xml;
    
    # Enable static Brotli files
    brotli_static on;
}

Apache Configuration

# Requires mod_brotli (Apache 2.4.26+)
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain
    AddOutputFilterByType BROTLI_COMPRESS text/css text/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/json
    
    # Compression level (0-11)
    BrotliCompressionLevel 6
    BrotliWindowSize 22
</IfModule>

Node.js Implementation

const express = require('express');
const shrinkRay = require('shrink-ray-current');

const app = express();

app.use(shrinkRay({
    brotli: {
        quality: 6,  // 0-11, higher = better compression
    },
    threshold: 1024, // Don't compress small files
    cache: () => true, // Cache compressed versions
}));

Brotli Quality Levels

Brotli offers 11 quality levels (0-11) compared to gzip's 9 levels:

Level 0-3: Real-time

Fastest compression, suitable for dynamic content. Similar to gzip performance.

Level 4-6: Balanced

Good compression with reasonable CPU usage. Level 4-5 recommended for dynamic content.

Level 7-9: High

Better compression but slower. Good for static assets that change occasionally.

Level 10-11: Maximum

Best compression but very slow. Only for pre-compressed static files.

Recommended Settings

  • Dynamic content: Quality 4-5
  • Static assets: Quality 6-7
  • Pre-compressed: Quality 11

Pre-compressing Files with Brotli

For static assets, pre-compress files to save CPU during requests:

Command Line Tool

# Install brotli
apt-get install brotli  # Debian/Ubuntu
brew install brotli     # macOS

# Compress files
brotli -q 11 style.css -o style.css.br
brotli -q 11 script.js -o script.js.br

# Bulk compression
find . -type f \( -name "*.css" -o -name "*.js" -o -name "*.html" \) \
    -exec brotli -q 11 {} \;

Build Process Integration

// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');

module.exports = {
    plugins: [
        new CompressionPlugin({
            filename: '[path][base].br',
            algorithm: 'brotliCompress',
            test: /\.(js|css|html|svg)$/,
            compressionOptions: {
                params: {
                    [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
                },
            },
            threshold: 1024,
        }),
    ],
};

Testing Brotli Compression

Using curl

# Test if Brotli is working
curl -H "Accept-Encoding: br" -I https://example.com/

# Compare file sizes
curl -H "Accept-Encoding: identity" -s -o /dev/null -w "%{size_download}\n" https://example.com/
curl -H "Accept-Encoding: br" -s -o /dev/null -w "%{size_download}\n" https://example.com/

Online Testing Tools

  • Use browser DevTools Network tab
  • Check for "Content-Encoding: br" header
  • Compare transferred vs actual file sizes
  • Use online compression testing tools

Brotli Best Practices

HTTPS Only

Brotli only works over HTTPS. Ensure your site uses SSL/TLS.

Fallback to Gzip

Always enable gzip as fallback for older browsers and HTTP connections.

Content Negotiation

Properly implement Vary: Accept-Encoding for CDN compatibility.

Monitor Performance

Track compression ratios and CPU usage to optimize quality levels.

Brotli + Gzip Strategy

For maximum compatibility and performance, use both:

# Nginx: Enable both Brotli and Gzip
brotli on;
brotli_types text/plain text/css application/javascript;
gzip on;
gzip_types text/plain text/css application/javascript;

# Server will choose based on Accept-Encoding header