Lesson 5 / 25
Asset compression and minification
Reduce file sizes by compressing and minifying CSS, JavaScript, and HTML.
Gzip and Brotli compression
Enable gzip (browser support ~99%) or Brotli (15-20% better compression). Both are transport-level: add Content-Encoding: gzip header. Typical reduction: 70-80% for text assets.
Minification tools
Use Terser (JavaScript), CSSNano (CSS), HTMLMinifier. Remove comments, whitespace, unused code. Build tools like Webpack, Vite do this automatically. Typical reduction: 30-50%.
Tree-shaking and unused code removal
Modern bundlers analyze ES6 imports to eliminate dead code. Mark packages as sideEffects: false in package.json. Reduce bundle size by removing truly unused dependencies and code paths.
Compression best practices
Always enable compression on server. Prefer Brotli for static assets, gzip for dynamic. Test compression ratio. Small assets (<1KB) may not benefit from compression due to overhead.
Quick check
Quick check: What is typical compression reduction with gzip?
- 70-80% for text assets
- 10-20% for text assets
- Compression doesn't work for text