CSS Minifier

CSS is render-blocking. The browser will not paint anything until it has downloaded and parsed your stylesheets, which makes every kilobyte of CSS more expensive than the same kilobyte of almost anything else on the page.

Minifying a stylesheet

1. Paste your CSS into the box above.
2. Minify it.
3. Copy the compressed output.
4. Save it as a separate file — keep your readable source intact.
5. Load the minified version in production and test thoroughly.

What minification actually removes

Every space, tab and newline the parser does not need. Every comment. The final semicolon in each rule block. Redundant zero units, so 0px becomes 0. Long hex colours shortened where possible, turning #ffffff into #fff.

None of this changes what the stylesheet does. A 90 KB hand-formatted stylesheet commonly minifies to around 65 KB, and the browser parses it marginally faster too because there is less to tokenise.

The bigger CSS win most sites miss

• Unused rules. Most sites ship an entire framework and use a fraction of it — that is where the real weight is.
• Multiple stylesheets, each costing a separate render-blocking request.
• Critical CSS: inline what is needed above the fold and defer the rest.
• @import statements, which serialise downloads instead of parallelising them.
• Unused font weights pulled in by a webfont link nobody audited.

Minify in a build step, never by hand

Editing minified CSS is miserable and error-prone. Keep your readable source in version control, run the minifier as part of your build or deployment, and make sure source maps are generated so browser devtools can still show you the original line numbers when something breaks.

CSS minification questions