Performance Optimization

Maximize website speed with optimal HTTP compression strategies

Compression Performance Metrics

Compression Ratio

  • Gzip: 60-80% reduction for text
  • Brotli: 15-25% better than gzip
  • Zstandard: Similar to Brotli, faster
  • Deflate: Similar to gzip

Compression Speed

  • Zstandard: Fastest compression
  • Gzip: Good balance
  • Brotli: Slower compression
  • Higher levels = slower speed

Decompression Speed

  • All algorithms: Fast decompression
  • Zstandard: Slightly faster
  • Client CPU impact: Minimal
  • Mobile considerations important

Optimization Strategies

Content-Type Optimization

  • Text files: HTML, CSS, JS, JSON, XML - Always compress
  • Images: Already compressed - Skip compression
  • Fonts: WOFF/WOFF2 pre-compressed - Skip
  • Media: Video/audio pre-compressed - Skip
  • Small files: Under 1KB - Consider skipping

Compression Level Selection

Recommended Compression Levels

  1. Gzip Level 6: Default, good balance
  2. Brotli Level 4: Dynamic content
  3. Brotli Level 11: Static content (pre-compress)
  4. Zstandard Level 3: Real-time compression
  5. Zstandard Level 19: Static content

Pre-compression Strategy

Build-time Compression

# Pre-compress static assets during build
find ./dist -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) \
  -exec gzip -9 -k {} \; \
  -exec brotli -9 -k {} \;

Nginx Static Serving

location ~* \.(js|css|html)$ {
    gzip_static on;
    brotli_static on;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Performance Benchmarking

Compression Testing Script

#!/bin/bash
# Test compression ratios and speeds

FILE="test.html"
echo "Testing compression for $FILE"
echo "Original size: $(wc -c < $FILE) bytes"

# Test gzip
time gzip -c -6 $FILE > $FILE.gz
echo "Gzip size: $(wc -c < $FILE.gz) bytes"

# Test brotli
time brotli -c -4 $FILE > $FILE.br
echo "Brotli size: $(wc -c < $FILE.br) bytes"

# Test zstd
time zstd -c -3 $FILE > $FILE.zst
echo "Zstd size: $(wc -c < $FILE.zst) bytes"

CDN and Edge Optimization

CDN Best Practices

  • Edge compression: Enable at CDN level
  • Origin optimization: Pre-compress when possible
  • Vary header: Ensure proper caching with Vary: Accept-Encoding
  • Compression bypass: Configure for already-compressed content

Mobile Performance

Mobile Optimization Tips

  • Lower compression levels for faster decompression
  • Consider network speed vs CPU trade-offs
  • Test on real devices, not just emulators
  • Monitor battery impact of decompression

Monitoring and Analytics

Performance Monitoring

// Track compression savings
if (performance && performance.getEntriesByType) {
    performance.getEntriesByType('resource').forEach(resource => {
        if (resource.encodedBodySize && resource.decodedBodySize) {
            const saved = resource.decodedBodySize - resource.encodedBodySize;
            const ratio = (saved / resource.decodedBodySize * 100).toFixed(2);
            console.log(`${resource.name}: ${ratio}% compressed`);
        }
    });
}

Advanced Techniques

Shared Dictionary Compression

  • SDCH (deprecated)
  • Shared Brotli dictionaries
  • Custom dictionary creation
  • Delta encoding for updates

Streaming Compression

  • Chunked transfer encoding
  • Server-sent events compression
  • WebSocket compression
  • HTTP/2 header compression

Common Pitfalls

Avoid These Mistakes

  1. Double compression: Don't compress already-compressed files
  2. CPU overload: Monitor server CPU with high compression
  3. Missing Vary header: Can cause caching issues
  4. Ignoring small files: Compression overhead may increase size
  5. Wrong MIME types: Ensure correct content-type headers