How CSS Minification Works
“Minify CSS” appears in every Lighthouse report, usually with an unimpressive few-kilobyte saving attached. So why does everyone still do it? Because CSS bytes are not ordinary bytes — they block rendering.
Why CSS bytes are expensive
Browsers refuse to paint a page until its stylesheets are downloaded and parsed — otherwise you'd see unstyled content flash and reflow. That makes CSS render-blocking: every byte of it stands between the user and First Contentful Paint. A kilobyte of CSS delays rendering in a way a kilobyte of image never does, especially on mobile connections where latency and bandwidth are worst.
What minification removes
- Comments — including the multi-line header art
- Line breaks and indentation
- Spaces around
{ } : ; ,and combinators - The last semicolon before every closing brace
- Empty rules
.button { color: red; } becomes .button{color:red}. Nothing semantic changes — the browser reads both identically. Aggressive minifiers go further (shortening #ffffff to #fff, collapsing shorthands), buying a little more at slightly more risk; the whitespace-and-comments tier is the guaranteed-safe one.
How it stacks with gzip
“Doesn't gzip make minification pointless?” No — they compound. Gzip compresses repeated patterns but still has to encode the whitespace and comments; removing them first gives compression less junk to carry. Typical numbers for a real stylesheet: raw 100 KB → minified 70 KB → minified+gzip ~15 KB, versus ~20 KB gzipping the unminified file. The delta survives compression.
When to use an online minifier
Build pipelines (Vite, Next.js, Tailwind) minify automatically — don't hand-minify what a bundler owns. The online tool earns its keep everywhere else: CMS “custom CSS” boxes, legacy sites edited over FTP, HTML email styles, embedded widgets, and quick before/after size checks when you're deciding whether a stylesheet is worth splitting.
Keep the readable version
Minification is a one-way trip for comments — they're gone. Always keep the readable source file and treat the minified output as a build artifact, even when the “build” is you pasting into a box.
Try it on your stylesheet
The CSS minifier strips comments and whitespace with string-safe parsing (your content: "a b" values survive) and reports original size, minified size and percent saved. Building styles worth shipping? The gradient generator and box shadow generator write the fancy parts for you.