Optimize CSS for the Web

CSS optimisation for the web encompasses several complementary techniques that each address a different source of inefficiency in how stylesheets are delivered and processed. Removing unused rules eliminates dead code that the browser must parse but never applies. Minifying the remaining rules eliminates the formatting overhead that developers added for readability but browsers do not need. Extracting critical CSS reduces the initial render-blocking window so the browser can paint the first frame sooner. Applying server-side Brotli or gzip compression reduces the bytes transferred over the network. Minification is the second step in this sequence and it assumes the stylesheet already contains only the rules that serve a purpose. A stylesheet that goes through all four steps might start at 220KB as an unoptimised framework default, drop to 45KB after unused rule removal, shrink further to 31KB after minification, and transfer at just 7KB with Brotli enabled. Each step compounds the benefit of the previous one.

The mechanics of CSS minification for web optimisation are the same as for any other minification context: the tool tokenises the input, discards whitespace and comment tokens, removes optional trailing semicolons, and serialises the remaining tokens. What distinguishes web optimisation as a framing is the emphasis on the downstream effect on real people using the site. Reducing a stylesheet from 180KB to 120KB on a median global mobile connection of 10 megabits per second saves approximately 47 milliseconds of CSS download time per page view. Across 50,000 daily page views on a typical small business site, that saving compounds to 2,350 seconds of cumulative visitor time recovered per day: time that visitors previously spent waiting for the CSS to download that they can now spend reading and interacting with the page. CSS optimisation is not a purely technical exercise performed for its own sake; it has a direct and measurable effect on the experience of real visitors.

For a practical web optimisation workflow that combines multiple techniques, begin with the Chrome DevTools Coverage tool. Open DevTools, click More Tools, select Coverage, then reload the page. Coverage shows the percentage of each loaded CSS file that is actually used on the current page. A stylesheet showing 70 percent unused rules is a strong candidate for rule removal before minification is even applied. After using Coverage to identify and delete unused rules from the source, run the leaner stylesheet through the minifier and compare the final compressed size against the original. The combined saving from removing unused rules and then minifying the remainder typically exceeds 60 percent for pages that rely heavily on a general-purpose CSS framework like Bootstrap or Tailwind, where the majority of shipped utility classes are never triggered by any element on the page.

A full web optimisation workflow benefits from integrating CSS minification with the build tool you already use. PostCSS pipelines run cssnano automatically on every build, Webpack projects register css-minimizer-webpack-plugin in the optimizer chain, and Vite projects enable minification by default in production mode. Each integration ensures that the deployed CSS is always optimised without relying on a developer to remember a manual step. For projects without a build tool, an online minifier covers the gap, but the build-tool integration is more durable because it survives team turnover and time pressure during hotfix deploys. Configure your build to write content-hashed filenames such as styles.7a3b9.min.css so that downstream cache layers, including the visitor browser cache and any CDN caches, invalidate cleanly on every deploy.