How to Minify CSS and JavaScript for Faster Page Loads
Minification removes whitespace, comments, and shortens variable names in CSS and JS files — often reducing file size by 30-50%. Here's how to do it the right way.
Every byte matters when it comes to page load time. Minification is one of the quickest performance wins available — it typically reduces CSS and JavaScript file sizes by 30–50% with zero functional change.
What Minification Does
Minification removes everything that's useful for humans but irrelevant to execution:
- Whitespace, tabs, and newlines
- Comments (
/* ... */and// ...) - Shortening variable names (JS:
longVariableName→a) - Removing unused code (dead code elimination)
- Combining declarations where possible
CSS Minification Example
/* Before (89 bytes) */
.button {
display: flex;
align-items: center;
padding: 8px 16px;
}
/* After (56 bytes) */
.button{display:flex;align-items:center;padding:8px 16px}When to Minify (and When Not To)
Minify production builds only. Never edit minified files directly — always maintain the readable source and generate minified output as part of your build process.
Minification + Gzip = Maximum Compression
Minification and Gzip/Brotli compression work at different levels and stack on top of each other. Minification removes semantic redundancy; Gzip removes pattern redundancy. Together, you often achieve 80–90% size reduction over the original.
Source Maps
Source maps let browsers map minified code back to the original source for debugging. Always generate source maps in development builds. For production, you can host them privately or omit them (errors will show minified line numbers).
Minify CSS and JS instantly with our CSS Minifier and JS Minifier tools.