Compression

Gzip Compression

Reduce file sizes for faster transfer.

How Gzip Works

1. Finds duplicate strings in text
2. Replaces duplicates with references
3. Typically 60-80% reduction for text

Server Configuration

// Express.js
const compression = require('compression');
app.use(compression());

// With options
app.use(compression({
  level: 6, // 1-9, default 6
  threshold: 1024, // Only compress > 1KB
  filter: (req, res) => {
    if (req.headers['x-no-compression']) return false;
    return compression.filter(req, res);
  },
}));

# Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
gzip_min_length 256;
gzip_vary on;

Webpack Compression

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

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\\.(js|css|html|svg)$/,
      threshold: 1024,
      minRatio: 0.8,
    }),
  ],
};

When Gzip Helps

Content Type	Compression
HTML	Excellent (80%+)
CSS	Excellent (70%+)
JavaScript	Excellent (70%+)
JSON	Excellent (70%+)
SVG	Excellent (70%+)
Images	Already compressed
Video	Already compressed

Brotli Compression

Better compression than Gzip for web content.

Brotli vs Gzip

Feature	Gzip	Brotli
Compression Ratio	60-80%	70-90%
Speed	Faster	Slower
Browser Support	100%	97%+
Static Content	Good	Excellent

Server Configuration

# Nginx with Brotli
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;

// Express.js with Brotli
const zlib = require('zlib');

app.use((req, res, next) => {
  if (req.headers['accept-encoding']?.includes('br')) {
    res.setHeader('Content-Encoding', 'br');
    const brotli = zlib.createBrotliCompress({
      params: {
        [zlib.constants.BROTLI_PARAM_QUALITY]: 6,
      },
    });
    const originalEnd = res.end;
    res.end = function(chunk, encoding) {
      if (chunk) {
        chunk = brotli.compress(chunk);
      }
      return originalEnd.call(this, chunk, encoding);
    };
  }
  next();
});

Webpack Brotli

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

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\\.(js|css|html|svg)$/,
      threshold: 1024,
      minRatio: 0.8,
    }),
  ],
};

CDN Support

Most CDNs support Brotli:

• Cloudflare: Automatic
• CloudFront: Configurable
• Fastly: Supported

# Response headers
Content-Encoding: br
Vary: Accept-Encoding

When to Compress

Compression Guidelines

// Check if content should be compressed
function shouldCompress(contentType, size) {
  // Don't compress already compressed formats
  const compressedTypes = [
    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
    'video/mp4', 'video/webm',
    'audio/mp3', 'audio/ogg',
    'application/zip', 'application/gzip',
    'font/woff', 'font/woff2',
  ];

  if (compressedTypes.includes(contentType)) return false;
  if (size < 1024) return false; // Don't compress < 1KB
  return true;
}

Pre-compression

// Build-time compression
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      test: /\\.(js|css)$/,
      algorithm: 'brotliCompress',
    }),
  ],
};

Runtime Compression

// Dynamic compression based on content
async function compressResponse(res, data, contentType) {
  if (shouldCompress(contentType, data.length)) {
    const accepted = req.headers['accept-encoding'];
    
    if (accepted.includes('br')) {
      res.setHeader('Content-Encoding', 'br');
      return await brotliCompress(data);
    } else if (accepted.includes('gzip')) {
      res.setHeader('Content-Encoding', 'gzip');
      return await gzip(data);
    }
  }
  return data;
}

Compression Checklist

• Enable Brotli for text-based assets
• Enable Gzip as fallback
• Don't compress already compressed formats
• Set proper Content-Encoding headers
• Use Vary: Accept-Encoding
• Pre-compress static assets at build time
• Monitor compression ratios

Best Practices

1. Use Brotli for better compression
2. Pre-compress static assets
3. Don't compress images/videos (already compressed)
4. Set minimum size threshold (1KB)
5. Use Vary header for proper caching