How Brotli and gzip compression reduce transfer size

Brotli and gzip Compression

Text compression reduces transfer size by 60–80% for HTML, CSS, and JS. Brotli (br) compresses 15–25% better than gzip for web assets and is supported by 97%+ of browsers.

Compression is negotiated via HTTP headers:

# Browser advertises what it supports
Accept-Encoding: br, gzip, deflate

# Server responds with what it used
Content-Encoding: br

Configure on Nginx:

# nginx.conf
brotli on;
brotli_comp_level 6;  # 1–11; 6 is a good speed/ratio balance
brotli_types text/html text/css application/javascript application/json;

gzip on;  # fallback for clients without Brotli support
gzip_types text/html text/css application/javascript;
gzip_comp_level 6;

For production, pre-compress static assets at build time (max compression, no per-request CPU cost) and serve them directly:

# Brotli pre-compress (level 11 = maximum, fine for build time)
find dist/ -type f \( -name '*.js' -o -name '*.css' -o -name '*.html' \) \
  -exec brotli -11 {} \;
# Creates .br files alongside originals; Nginx serves .br if supported

Do not compress: images (already compressed), video, audio, or any binary format. Compressing pre-compressed files wastes CPU with minimal savings. Always check the Content-Encoding response header in DevTools to confirm compression is active.