Ready to try it? Use the CSS minifier, or choose a level in the CSS compressor.
What is CSS minification?
Minification removes every character from a stylesheet that the browser does not need, without changing how the page looks. A smaller file downloads faster, and CSS is render blocking, which means the browser waits for it before it paints the page. Less to download means an earlier first paint.
Before and after
/* Buttons */
.btn {
color: #FFFFFF;
margin: 0px auto;
padding: 0.5em 1.0em;
}
.btn{color:#fff;margin:0 auto;padding:.5em 1em}
What a minifier changes
| Change | Example | Safe? |
|---|---|---|
| Remove comments | /* Buttons */ is gone | Yes. Keep /*! license */ comments if you need them |
| Remove whitespace | color: red; becomes color:red; | Yes |
| Remove the last semicolon | a{b:c;} becomes a{b:c} | Yes |
| Shorten hex colors | #ffffff becomes #fff | Yes |
| Zero without a unit | 0px becomes 0 | Yes for lengths. Not for 0%, 0s or 0deg |
| Shorter numbers | 0.50 becomes .5 | Yes |
| Merge neighboring rules | a{x:y}a{z:w} becomes a{x:y;z:w} | Only when the selectors are identical and the rules are next to each other |
How much will you save?
It depends on how the file was written. A heavily commented, generously indented stylesheet can lose 30 percent or more. A file that is already compact may lose 5 to 10 percent. Measure your own file. The compressor shows how many bytes each step saved, so you can see which one matters most for you.
Minifying, gzip, Brotli and more
- Minification changes the file itself.
- gzip and Brotli compress the file while the server sends it. They make the biggest difference, and they work together with minification. See the CSS compressor for a server example.
- Removing unused CSS deletes rules that no page uses. It saves a lot on sites that load a big framework, but it needs a tool that scans your pages, and it can remove styles that are added later by scripts.
- Critical CSS inlines the rules for the first screen in the page, and loads the rest later.
- Caching makes sure returning visitors do not download the file again.
How to minify
- Online: paste your code in the CSS minifier. Good for a single file or a quick check.
- In your build: most build tools minify CSS when you build for production. If you build by hand, a command line tool works, for example
npx clean-css-cli -o style.min.css style.cssornpx lightningcss-cli --minify style.css -o style.min.css. - In a PostCSS setup: the cssnano plugin minifies CSS as one step of the pipeline.
Keep a readable source
Always edit the original file and minify a copy, for example style.css and style.min.css. If you only have the minified file, the CSS beautifier restores the layout, but the comments are gone for good. Source maps connect a minified file to its source in browser developer tools, and most build tools can create them.
What can go wrong
- Spaces that matter. In calc() the spaces around + and - are required. A good minifier keeps them.
- Zero with a unit. 0s, 0deg and 0% are not the same as 0 in every property, so they should keep their unit.
- Merging rules in a different order. Moving or merging rules that are not neighbors can change which rule wins. Safe minifiers merge only neighbors.
- Old browser hacks. Very old tricks may rely on unusual syntax. Test in the browsers you support.
- Custom properties. The value of a --variable is passed on as it is, so it should not be rewritten.
A short checklist
- Minify a copy of your CSS.
- Check the size with and without gzip.
- Open the main pages and compare them with the original, in more than one browser.
- Upload the minified file, and keep the readable source in your project.
More tools
The CSS formatter and CSS pretty print help while you write, and the CSS formatting guide covers style. You can also reduce images with the image compressor, because images are usually the largest part of a page.