What a CSS compressor does
A CSS compressor removes everything the browser does not need to read your stylesheet: comments, spaces, line breaks and redundant characters. The meaning of the CSS does not change. This is also called minifying, and the CSS minifier does the same job with a fixed set of options. This page lets you pick how far to go, and shows what each step saved.
Three compression levels
| Level | What changes | Risk |
|---|---|---|
| Safe | Comments and extra whitespace only. License comments can be kept. | None |
| Balanced | Safe, plus the last semicolon in each rule, empty rules, shorter hex colors, units removed from zero lengths, and shorter numbers. | Very low |
| Maximum | Balanced, plus shorter color names, repeated identical declarations removed and neighboring rules with the same selector merged. | Low, but check the result |
Balanced is the right choice for most projects. Choose Maximum when every byte counts, and test your pages afterwards. You can also change any single option under Advanced options.
What Maximum does in detail
- Color names and codes: the shorter one is used, so white becomes #fff and #f00 becomes red. This is done only in properties that take colors, such as color, background and border, and never inside url() or strings.
- Repeated declarations: if a rule sets the same property to the same value twice, only the last one is kept. Different values, such as a fallback and a newer value, are never touched.
- Merged rules: two rules next to each other with the same selector become one, and so do two neighboring @media blocks with the same condition. Rules are never merged when their selectors differ, because one selector that a browser does not understand would then disable the whole rule.
Where the bytes go
Below the result you see a table with the bytes saved by each step: whitespace, comments, semicolons and empty rules, shorter numbers and colors, and the Maximum extras. Files with many comments save most there, and heavily indented files save most in whitespace.
Compression on the server: gzip and Brotli
Minifying is only half of the story. Web servers also compress text files while sending them, with gzip or Brotli. The two work together: minifying removes characters, and gzip then compresses what is left. The tool shows the gzip size of your input and output, because that is close to what visitors download. To turn on gzip in Apache, add this to your .htaccess file:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css </IfModule>
Brotli usually compresses a little better than gzip, and current browsers support it over HTTPS. Many hosts and CDNs turn it on for you.
Size budget
If your project has a performance budget, enter it in KB. The tool tells you whether the compressed CSS is under or over it.
Read minified code again with the CSS beautifier, tidy your own code with the CSS formatter, and learn more in the CSS minification guide. For scripts and pages, see the JavaScript minifier and the HTML minifier.