How to Minify CSS and JavaScript for Faster Websites
Page speed directly affects user experience, bounce rates, and Google rankings. Minification is one of the fastest wins you can make — it requires no code changes and typically reduces CSS and JS file sizes by 20–40% with zero effort.
What Is Minification?
Minification removes everything that's not needed for execution: whitespace, line breaks, comments, long variable names (in JS), and redundant syntax. The result is functionally identical but much smaller.
Before (readable CSS — 185 bytes)
.button {
display: inline-flex;
padding: 8px 16px;
background-color: #4f46e5;
color: white;
border-radius: 6px;
font-weight: 600;
} After (minified — 91 bytes)
.button{display:inline-flex;padding:8px 16px;background-color:#4f46e5;color:#fff;border-radius:6px;font-weight:600} What Gets Removed
Indentation and blank lines serve readability only. Browsers don't need them.
/* CSS comments */ and // JS comments are stripped entirely.
The last rule in a CSS block doesn't need a semicolon. Minifiers remove it.
color: #ffffff → color:#fff. color: white → color:#fff.
Terser and similar tools rename variables from descriptive names (e.g. totalItemCount) to single characters (e.g. a). This is the biggest size saving in complex JS.
Modern bundlers (Rollup, esbuild, Vite) also remove unused exports (tree shaking) — more powerful than minification alone.
Typical Size Savings
| File type | Minification savings | With gzip |
|---|---|---|
| CSS | 20–35% | ~70% from original |
| JavaScript | 30–50% | ~75% from original |
| HTML | 10–20% | ~65% from original |
Minify first, then gzip/Brotli compress. Compression works better on minified files since repeated patterns are reduced.
How to Automate Minification
Vite / Rollup
Minification is built in for production builds. CSS uses LightningCSS, JS uses Rollup + terser. Just run vite build — no config needed.
webpack
Use css-minimizer-webpack-plugin for CSS and TerserPlugin for JS. Both ship with webpack 5 and are enabled in production mode by default.
esbuild
The fastest minifier available. Use --minify flag for CLI: esbuild app.js --bundle --minify --outfile=app.min.js
PostCSS + cssnano
For CSS-only pipelines, cssnano is the most feature-complete minifier. Combine with autoprefixer and other PostCSS plugins.
CDN automatic minification
Cloudflare, Vercel, and Netlify can minify assets automatically via platform settings — no build step changes required.
Minify CSS and JavaScript online — free