# Asset compression and minification — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-05

> 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

**Quiz:** What is typical compression reduction with gzip?

- [ ] 70-80% for text assets
- [ ] 10-20% for text assets
- [ ] Compression doesn't work for text