Compressing CSS Files — Gzip Ratios & Tips
Understand gzip compression for CSS stylesheets. CSS is one of the most compressible web assets due to its repetitive syntax patterns.
Detailed Explanation
CSS Compression with Gzip
CSS is among the most compressible web asset types. The repetitive nature of CSS syntax — property names, selectors, and values — makes it ideal for dictionary-based compression.
Typical CSS Compression Ratios
| CSS Type | Gzip Ratio | Typical Savings |
|---|---|---|
| Raw authored CSS | 80–85% | Excellent |
| Minified CSS | 75–82% | Very good |
| Tailwind utility CSS | 90–95% | Outstanding |
| CSS-in-JS output | 70–78% | Good |
Why CSS Compresses So Well
- Repeated property names:
background-color,margin,padding,display,font-sizeappear many times - Repeated values:
0,none,auto,inherit, color values, spacing values - Selector patterns: Class naming conventions create repetitive prefixes (
.btn-,.card-,.nav-) - Structural syntax: Braces, colons, semicolons are highly frequent
Tailwind CSS: A Special Case
Tailwind utility-class CSS compresses exceptionally well because:
- Thousands of class definitions share the same structural pattern
- Property values repeat extensively (
0,1px,0.5rem) - The purged output still has massive repetition
A 300 KB purged Tailwind CSS file typically compresses to 15–25 KB with gzip.
Optimization Order
For maximum savings: Purge unused CSS → Minify → Gzip/Brotli
Each step is complementary. Purging removes unused rules, minification removes whitespace and shortens values, and gzip compresses the remaining patterns.
Use Case
CSS optimization for web performance. Particularly useful for teams using utility-first CSS frameworks like Tailwind, where raw file sizes can be large but compressed sizes are remarkably small.