Brotli Compression — Better Compression Ratios in Cloudflare

In this tutorial, you'll learn about Brotli Compression. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Cloudflare Brotli compression uses Google's Brotli algorithm to compress web assets up to 20% smaller than Gzip, reducing transfer sizes and accelerating page loads for all HTTPS visitors.

What You'll Learn

By the end of this tutorial, you will understand how Brotli compression differs from Gzip, how to enable it in Cloudflare, and how to verify that compressed assets are being delivered to your users.

Why It Matters

Smaller files mean faster downloads. Brotli achieves better compression ratios than Gzip, especially for text-based assets like HTML, CSS, and JavaScript. Cloudflare enables Brotli at the edge with no server configuration changes.

Real-World Use

DodaZIP handles compression for large file archives. The same principles apply on the web: better algorithms mean less data travels over the network, which is critical for mobile users on limited data plans.

Your Learning Path

flowchart LR
  A[Auto Minify] --> B[Brotli Compression]
  B --> C[Early Hints]
  C --> D["HTTP/2 & HTTP/3"]
  D --> E[Signed Exchanges]
  B --> F{You Are Here}
  style F fill:#f90,color:#fff

What Is Brotli?

Brotli is a lossless compression algorithm developed by Google. It uses a predefined dictionary of common web strings combined with LZ77 and Huffman coding to achieve higher compression ratios than Gzip at comparable speeds.

Cloudflare enables Brotli for all HTTPS connections automatically. When a browser sends Accept-Encoding: br in its request headers, Cloudflare serves the Brotli-compressed version if available.

Brotli vs Gzip

Enabling Brotli in Cloudflare

1. Log in to the Cloudflare dashboard.
2. Select your domain.
3. Navigate to Speed > Optimization.
4. Locate the Brotli section and toggle it on.
5. Brotli is applied automatically to qualifying responses that include Content-Type: text/html, text/css, application/<a href="/programming-languages/javascript/">JavaScript</a>, and similar MIME types.

# Check if your server delivers Brotli-compressed content
curl -H "Accept-Encoding: br" -I https://yourdomain.com/style.css

# Expected output showing Content-Encoding: br
# HTTP/2 200
# content-encoding: br
# content-type: text/css
# vary: Accept-Encoding

Compression Ratio Comparison

// Sample test comparing Gzip vs Brotli for a 150 KB JavaScript file
const fs = require('fs');
const zlib = require('zlib');

const original = fs.readFileSync('app.js');
const originalSize = original.length;

const gzipped = zlib.gzipSync(original);
const brotlied = zlib.brotliCompressSync(original, { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 4 } });

console.log('Original size:', originalSize, 'bytes');
console.log('Gzip size:', gzipped.length, 'bytes', ((1 - gzipped.length / originalSize) * 100).toFixed(1) + '% savings');
console.log('Brotli size:', brotlied.length, 'bytes', ((1 - brotlied.length / originalSize) * 100).toFixed(1) + '% savings');

// Expected output:
// Original size: 153600 bytes
// Gzip size: 49152 bytes, 68.0% savings
// Brotli size: 39936 bytes, 74.0% savings

Caching and Brotli

Cloudflare caches both Gzip and Brotli versions of static assets. When a request arrives with Accept-Encoding: br, the edge serves the cached Brotli variant directly without recompressing.

# Origin server should set Vary: Accept-Encoding
# Cloudflare respects this header for cache differentiation
location /static/ {
  add_header Vary Accept-Encoding;
  expires 30d;
}

Common Errors

Brotli not applied to all assets. Cloudflare only applies Brotli to responses smaller than a certain size threshold and with appropriate content types. Large binary files like images are not compressed.

Brotli increases CPU usage at the origin. If you are using a low-cost shared host, consider letting Cloudflare handle Brotli compression at the edge instead of the origin.

Browser not receiving Brotli. Outdated browsers or certain curl versions without Brotli support will receive Gzip instead. Cloudflare falls back automatically.

Content-Encoding header mismatch. If your origin already sends Content-Encoding: br, Cloudflare passes it through. Disable origin-level Brotli to let Cloudflare manage compression.

Cache misses invalidate compression. If an asset is not cached, Cloudflare fetches from the origin and compresses on the fly, adding latency for the first uncached request.

Practice Questions

1. What advantage does Brotli's static dictionary provide over Gzip?
2. How does Cloudflare determine whether to serve Brotli or Gzip to a client?
3. Why might Brotli compression be unsuitable for API responses serving JSON?

Challenge

Set up a test page with a 500 KB unminified JavaScript file. Enable Auto Minify and Brotli in Cloudflare. Measure the total bytes transferred with and without both features enabled.

Real-World Task

Configure your origin server to set Vary: Accept-Encoding on all static assets and verify that Cloudflare serves the correct compressed variant to different user agents.

FAQ

Related Tutorials

• Auto Minify — Reduce file size before compression for maximum savings
• Early Hints — Send compression hints before the full response
• HTTP/2 & HTTP/3 — Multiplexing compressed streams

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.