Enable Text Compression: Shrink Your HTML, CSS, and JS

If your server sends uncompressed text files, you're making users download 3-5× more data than necessary. Text compression is one of the simplest and highest-impact performance fixes.

Why Text Compression Matters

• 60-80% size reduction — a 200KB JavaScript file becomes 40-60KB
• Faster everything — HTML, CSS, and JS all benefit
• Zero quality loss — compression is lossless, the browser decompresses perfectly
• Universally supported — every modern browser supports Gzip; 97%+ support Brotli

Gzip vs Brotli

Feature	Gzip	Brotli
Compression ratio	Good	15-20% better
Compression speed	Faster	Slower (but pre-compress!)
Decompression speed	Similar	Similar
Browser support	99%+	97%+
Best for	Dynamic content	Static assets

Recommendation: Use Brotli for static assets (pre-compressed at build time) and Gzip for dynamic responses.

How to Enable Compression

Nginx

# Enable Gzip
gzip on;
gzip_vary on;
gzip_min_length 256;
gzip_types
  text/html
  text/css
  text/javascript
  application/javascript
  application/json
  image/svg+xml
  text/xml
  application/xml;

# Enable Brotli (requires ngx_brotli module)
brotli on;
brotli_comp_level 6;
brotli_types
  text/html
  text/css
  text/javascript
  application/javascript
  application/json
  image/svg+xml;

Apache

# Enable in .htaccess
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml text/xml application/xml
</IfModule>

Express.js (Node)

import compression from "compression";
import express from "express";

const app = express();
app.use(compression()); // Gzip by default

For Brotli:

import shrinkRay from "shrink-ray-current";

app.use(shrinkRay()); // Brotli + Gzip with smart negotiation

Vercel / Netlify / Cloudflare

These platforms enable Brotli compression automatically. No configuration needed.

Next.js

Next.js enables Gzip by default. For Brotli, configure in next.config.js:

module.exports = {
  compress: true, // Gzip enabled by default
};

If deploying to Vercel, Brotli is handled at the CDN level automatically.

Pre-Compressing Static Assets

For the best compression ratios, compress files at build time:

# Brotli pre-compression
find .next/static -type f \( -name "*.js" -o -name "*.css" \) \
  -exec brotli --best {} \;

# This creates .br files alongside originals
# Configure your server to serve .br files when Accept-Encoding: br

Webpack Plugin

const CompressionPlugin = require("compression-webpack-plugin");
const zlib = require("zlib");

module.exports = {
  plugins: [
    // Gzip
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html|svg)$/,
    }),
    // Brotli
    new CompressionPlugin({
      algorithm: "brotliCompress",
      test: /\.(js|css|html|svg)$/,
      compressionOptions: { level: 11 },
      filename: "[path][base].br",
    }),
  ],
};

Verifying Compression

Browser DevTools

1. Open DevTools → Network
2. Click any text resource (JS, CSS, HTML)
3. Check Response Headers for content-encoding: br or content-encoding: gzip

Command Line

# Check if compression is working
curl -I -H "Accept-Encoding: br,gzip" https://yoursite.com \
  | grep content-encoding

# Expected output:
# content-encoding: br

Compare Sizes

In the Network tab, compare "Size" (transferred) vs "Content" (uncompressed). If they're the same, compression isn't enabled.

Quick Wins Checklist

• Verify compression is enabled (check content-encoding header)
• Enable Brotli if your server/CDN supports it
• Ensure all text types are covered (HTML, CSS, JS, JSON, SVG)
• Pre-compress static assets at build time for best ratios
• Don't compress already-compressed files (JPEG, PNG, WOFF2)
• Set gzip_min_length 256 — don't compress tiny files