CSS minification is one of those optimisations that's easy to apply and genuinely makes a difference for page load speed. But it's worth knowing exactly what a minifier does — and doesn't — change about your stylesheet.
What a minifier removes
Comments
All / block comments / are stripped. The one exception: comments starting with /*! are preserved by convention — they hold licence notices that must appear in distributed files.
Whitespace
Every space, tab, and newline that CSS doesn't need for correctness is removed. That includes:
- Spaces around
:, {, }, ,, and ; - Line breaks between rules
- Indentation
Trailing semicolons
The last property in any { } block doesn't need a semicolon. Minifiers remove it.
Redundant units on zero
margin: 0px becomes margin:0. The px is meaningless when the value is zero.
What a minifier keeps
All your CSS rules. Every selector, property, and value. Minification never removes live code — only syntax around it.
Vendor prefixes. -webkit-, -moz-, -ms- are kept exactly as written.
At-rules. @media, @keyframes, @import, @charset are all preserved.
Minification vs tree-shaking
These are different optimisations:
- Minification — keeps all rules, compresses syntax
- Tree-shaking (PurgeCSS, Tailwind JIT) — removes CSS rules that are never referenced in your HTML/JS
For utility-heavy frameworks like Bootstrap or Tailwind, tree-shaking produces much larger savings than minification alone. Do both: tree-shake first, then minify the result.
Typical savings
| Scenario | Typical reduction |
|----------|------------------|
| Handwritten CSS with comments | 25–40% |
| Already compact CSS | 5–15% |
| After Brotli on top | Additional 60–70% |
How to minify
Build tools: Vite, webpack (CssMinimizerWebpackPlugin), PostCSS + cssnano — all handle this automatically in production builds.
CLI: npx lightningcss --minify input.css -o output.min.css
One-off: The CSS Minifier on SnappyTools lets you paste CSS, see instant results with a bytes-saved counter, and copy the output. It also has a Beautify tab for when you receive minified CSS and need to read it. Runs entirely in your browser — nothing is uploaded.
Minification is the safest performance optimisation in the CSS toolbox. Knowing it only removes whitespace and comments (never logic) makes it a no-brainer step before every production deploy.