CSS Minifier
Minify your CSS code by removing spaces, line breaks, and comments.
Why minify CSS and how much does it improve performance?
CSS minification is the process of removing all unnecessary characters from source code (whitespace, comments, line breaks, indentation) without altering its functionality. A well-formatted CSS file for development can contain up to 60-70% of characters that are not necessary for the browser to correctly interpret the styles.
Minification is an essential step in the production build pipeline. Smaller CSS means less data transferred over the network, faster load times, and better scores on tools like Google PageSpeed Insights. On sites with a lot of CSS, the reduction can be hundreds of kilobytes.
Practical use cases
Web optimization: Before deploying to production, minify all your CSS. Combined with gzip/brotli, you can reduce total CSS size by 80-90%.
HTML emails: Email clients have size limits (Gmail truncates emails larger than 102KB). Minifying inline CSS is crucial for your emails to display completely.
Critical inline CSS: To improve First Contentful Paint, critical CSS is inserted inline in the HTML. Minifying this snippet reduces HTML size and speeds up the first render.
Frequently asked questions
Is minifying the same as compressing?
No. Minifying removes unnecessary characters from the code. Compressing (gzip/brotli) applies a compression algorithm to the already minified file. They are complementary: first minify, then the server compresses when sending.
Does minification affect CSS functionality?
No, if done correctly. Minification only removes spaces and comments. However, aggressive minifiers may reorder properties or remove selectors that appear unused. Always test after minifying.
Should I minify during development?
No. Keep your CSS unminified during development to facilitate debugging (line numbers and indentation are essential). Only minify in the production build step using tools like PostCSS, esbuild, or this tool.
How much can I reduce my CSS size?
Typically between 40-70% with minification alone. Combined with gzip, the total reduction can reach 80-90%. A 100KB file can end up at 10-15KB after minifying and compressing.
What minification removes
| Element | Before | After |
|---|---|---|
| Comments | /* header */ .nav {} | .nav{} |
| Spaces | .nav { color: red; } | .nav{color:red} |
| Line breaks | .a{}\n.b{} | .a{}.b{} |
| Trailing semicolon | .nav{color:red;} | .nav{color:red} |