How much CSS minification actually reduces file size
Real-world CSS minification numbers depend heavily on how the original was written. Developer-formatted CSS with comments, blank lines, and long property names typically compresses 20–35%. A verbose CSS framework like a hand-written utility class file might compress 15–25%. Tailwind CSS output (which is already generated) typically compresses less because class names are short and there's little whitespace to remove. For comparison: Bootstrap 5.3 full CSS: 231 KB → 197 KB minified (15% reduction), but gzipped it drops to 26 KB — the takeaway: Gzip or Brotli compression on the server is worth far more than minification alone for large stylesheets.
What the minifier actually does to your CSS
- Whitespace removalAll newlines, tabs, and multiple spaces are replaced with a single space or removed entirely. Spaces inside selectors and around combinators are removed where safe.
- Comment strippingAll
/* comments */are removed. Exception: license comments starting with/*!are preserved by most minifiers to comply with open-source license requirements. - Color shortening
#ffffffbecomes#fff.rgb(0, 0, 0)becomes#000. - Zero value simplification
0px,0em, and0%all become0— units on zero values are redundant in CSS. - Last semicolon removalThe final semicolon before a closing brace is optional in CSS. Minifiers remove it. Safe in all browsers.
When to use a bundler instead
This tool is for one-off minification of a finished stylesheet — a vendor file you're shipping as-is, or a CSS snippet you're inlining in an email. For production builds in a Next.js, Vite, or webpack project, minification happens automatically as part of the build step. Running a stylesheet through this tool before committing it adds no value in those setups — the bundler will minify it anyway (and do more, like dead-code elimination via PurgeCSS or Tailwind's JIT tree-shaking).
How minifying CSS improves your Lighthouse score
Lighthouse and PageSpeed Insights flag two CSS-related performance issues: "Eliminate render-blocking resources" and "Minify CSS". Both have the same fix: compress your CSS and deliver it as efficiently as possible. Here's what each Lighthouse audit is actually measuring:
| Lighthouse audit | What it checks | Fix |
|---|---|---|
| Minify CSS | Whether CSS files contain whitespace and comments that add bytes without adding function | Minify CSS here → replace your existing .css file with the output |
| Eliminate render-blocking resources | CSS loaded in <head> blocks paint until fully downloaded | Inline critical CSS; defer non-critical CSS with media="print" + onload swap |
| Unused CSS | Selectors present in the CSS that match no elements on the page | Use PurgeCSS or Tailwind JIT after minifying — this tool handles whitespace, not dead code |
| Reduce initial server response time | TTFB — how fast the server sends the first byte | Minified CSS loaded from a CDN reduces TTFB for assets; enable gzip/Brotli compression on your server |
For WordPress sites: install a caching plugin (LiteSpeed Cache, W3 Total Cache, or WP Rocket) that minifies CSS automatically on each page load. Manually minifying theme CSS here is useful for theme files you maintain directly — paste the minified output back into your theme's style.css.