What minified CSS looks like
Minification is a purely textual transformation - the rules that reach the browser are identical, only the bytes carrying them are fewer.
Before — 118 bytes
/* Card surface */
.card {
margin: 0px;
padding: 16px 16px;
color: #ffffff;
}After — 43 bytes
.card{margin:0;padding:16px;color:#fff}Four separate savings are visible here: the comment is dropped, whitespace and the final semicolon go, 0px becomes 0 because a zero length needs no unit, the duplicated 16px 16px collapses to one value, and #ffffff shortens to its three-digit form.
Minify, gzip and Brotli are not the same thing
These three are often treated as alternatives. They are not - they stack, and using all three gives a smaller result than any one alone.
| Minification | gzip | Brotli | |
|---|---|---|---|
| What it changes | Rewrites the source to be shorter | Compresses the bytes in transit | Compresses the bytes in transit |
| When it happens | Build time, once | Every response, by the server | Every response, by the server |
| What the browser receives | Shorter source | Compressed bytes, decompressed on arrival | Compressed bytes, decompressed on arrival |
| Helps parse time | Yes - there is genuinely less to parse | No - the file is identical once decompressed | No - the file is identical once decompressed |
| Typical extra saving | 20–40% on unminified CSS | 70–80% on text | Roughly 15–20% better than gzip |
The order matters: minify first, then let the server compress. Minification is the only one of the three that reduces work for the browser’s parser, because gzip and Brotli hand over exactly the same css they were given once decompression finishes. Compression is usually already switched on at the CDN, which is why minifying is the step most likely to be missing.
Related developer tools
What does minifying CSS do?
Minifying CSS removes whitespace, comments, and redundant syntax without changing how the stylesheet behaves, typically cutting 20–40% of an unminified file before gzip. Smaller CSS means less to download and parse, which directly improves render-blocking time and Largest Contentful Paint.
Is minification the same as gzip?
No. Minification rewrites the source to be shorter, and gzip or Brotli compresses whatever bytes are then sent. They stack: minify first, compress in transit, and the total saving is larger than either alone. Minified files also parse faster in the browser, which compression alone does not help.
Runs in your browser. Your files and text never leave your device - nothing is uploaded.