Not setting up gzip or Brotli compression

Proper compression setup is crucial for optimizing web application performance. Both Gzip and Brotli compression can significantly reduce asset sizes, improving load times and reducing bandwidth costs.

Why Compression Matters

1. Reduced file sizes (typically 50-80% smaller)
2. Faster page loads (especially on mobile networks)
3. Improved SEO rankings (page speed is a ranking factor)
4. Lower bandwidth costs (reduced data transfer)
5. Better user experience (especially in low-bandwidth regions)

Server Configuration Guides

1. Nginx Configuration

For Gzip:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
gzip_min_length 1000;

For Brotli (requires Nginx with Brotli module):

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
brotli_min_length 1000;

2. Apache Configuration

.htaccess for Gzip:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

3. Node.js/Express Setup

const express = require('express');
const compression = require('compression');

const app = express();

// Enable gzip compression
app.use(compression({
  // Optional: enable Brotli if available
  brotli: { 
    enabled: true,
    params: {
      [zlib.constants.BROTLI_PARAM_QUALITY]: 11
    }
  }
}));

Build-Time Compression

1. Webpack Compression Plugin

npm install compression-webpack-plugin --save-dev

webpack.config.js:

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
    new CompressionPlugin({
      filename: '[path][base].br',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
    })
  ]
}

2. Vite Plugin

npm install vite-plugin-compression --save-dev

vite.config.js:

import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
    }),
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
    })
  ]
});

Verification Methods

1. Browser DevTools:

• Network tab > check “Content-Encoding” header
• Size column shows compressed vs original size

1. cURL command:

   curl -H "Accept-Encoding: gzip, br" -I https://yoursite.com/static/main.js

3. Online tools:

• WebPageTest.org
• GTmetrix
• PageSpeed Insights

Best Practices

1. Prioritize Brotli where supported (all modern browsers)
2. Fallback to Gzip for broader compatibility
3. Compress at build time for static assets
4. Enable dynamic compression for API responses
5. Exclude already compressed files (e.g., images, PDFs)
6. Set proper cache headers for compressed assets

Advanced Configuration

Content-Security-Policy

Add to your HTTP headers when serving compressed content:

Content-Security-Policy: default-src 'self';
X-Content-Type-Options: nosniff;

CDN Configuration

For AWS CloudFront:

1. Enable “Compress Objects Automatically”
2. Set “Forward Headers” to include Accept-Encoding

For Cloudflare:

1. Enable “Brotli” in Speed > Optimization

Troubleshooting

Issue: Compression not working

• Verify server modules are installed (nginx -V should show --with-http_gzip_module and --add-module=/path/to/brotli)
• Check MIME types are correct
• Ensure client sends Accept-Encoding header
• Verify files meet minimum size threshold

By implementing proper compression, you can significantly improve your web application’s performance while reducing bandwidth costs. Always test compression effectiveness as part of your deployment process.