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
- Reduced file sizes (typically 50-80% smaller)
- Faster page loads (especially on mobile networks)
- Improved SEO rankings (page speed is a ranking factor)
- Lower bandwidth costs (reduced data transfer)
- 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
- Browser DevTools:
- Network tab > check “Content-Encoding” header
- Size column shows compressed vs original size
- cURL command:
curl -H "Accept-Encoding: gzip, br" -I https://yoursite.com/static/main.js
- Online tools:
- WebPageTest.org
- GTmetrix
- PageSpeed Insights
Best Practices
- Prioritize Brotli where supported (all modern browsers)
- Fallback to Gzip for broader compatibility
- Compress at build time for static assets
- Enable dynamic compression for API responses
- Exclude already compressed files (e.g., images, PDFs)
- 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:
- Enable “Compress Objects Automatically”
- Set “Forward Headers” to include Accept-Encoding
For Cloudflare:
- 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.