CSS Minifier

What Is CSS Minification?

CSS minification removes unnecessary characters from CSS code without changing functionality. This includes whitespace, comments, redundant semicolons, and unnecessary quotes. The result is a smaller file that loads faster. Minification typically reduces CSS file sizes by 20-40%, directly improving page load times and Core Web Vitals scores.

Impact on Page Speed

CSS is a render-blocking resource — browsers must download and parse CSS before displaying content. Smaller CSS files mean faster First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Google's PageSpeed Insights specifically recommends minifying CSS as a performance optimization. Every kilobyte saved reduces load time, especially on mobile networks.

Minification vs Compression

Minification and compression (gzip/brotli) are complementary techniques. Minification removes unnecessary characters from the source code. Compression uses algorithms to reduce file size during transfer. Together they achieve maximum size reduction. Modern web servers apply gzip or brotli compression automatically, but minification provides additional savings because compressed minified code is smaller than compressed unminified code.

Build Tool Integration

In production workflows, CSS minification is typically automated. Webpack uses css-minimizer-webpack-plugin. Vite minifies CSS by default in production builds. PostCSS has cssnano for advanced optimization. Gulp and Grunt have their own CSS minification plugins. This online tool is ideal for quick one-off minification or when you don't have a build pipeline set up.

Minification Gotchas

While CSS minification is generally safe, some edge cases can cause issues. Spaces in calc() expressions must be preserved (e.g., calc(100% - 20px)). Some CSS hacks rely on specific whitespace patterns. Content property values with spaces need their quotes preserved. Quality minifiers handle these cases correctly, but always test your minified CSS before deploying.