CSS Minifier

Why stylesheet size matters more than its byte count suggests

CSS occupies a uniquely damaging position in page loading: it is render-blocking. A browser will not paint anything at all until it has downloaded and parsed the stylesheets, because it cannot know how anything should look and painting first would mean a flash of unstyled content. So every kilobyte of CSS is not merely a kilobyte of bandwidth — it is time added directly to the delay before your visitor sees anything on the screen. On a slow mobile connection, shaving 30 percent off a large stylesheet is a genuinely perceptible improvement to how fast the page feels, which is why minification is a standard part of every production build pipeline.

Minification is not the biggest win available

It is worth keeping perspective. Minification removes bytes that mean nothing to the browser, and it typically buys you 20 to 40 percent. Removing rules that are never used on the page buys you far more — the average site ships a stylesheet where the large majority of the rules never match a single element, usually because a whole framework was included to use a fraction of it. Splitting CSS so that each page loads only what it needs, and inlining the critical styles needed for the first screenful, addresses the render-blocking problem far more directly. Minify by all means, because it is free and automatic, but if your stylesheet is genuinely a performance problem, the unused rules are where the real weight is.