🗜️ CSS Minifier
Minify CSS by removing whitespace, comments, and unnecessary characters. Runs entirely in your browser.
Why Minify CSS? – Faster Rendering and Better Page Performance
CSS minification removes characters that are unnecessary for the browser to parse stylesheets — comments, whitespace, newlines, and redundant semicolons — without changing the visual output. Since CSS is render-blocking by default, reducing its size directly improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP), both key Google Core Web Vitals metrics.
What CSS Minification Removes
- Comments —
/* ... */developer comments throughout the stylesheet - Whitespace and newlines — Indentation, blank lines, and spaces between selectors and properties
- Trailing semicolons — The last semicolon before a closing brace is optional
- Redundant values —
margin: 0pxcan becomemargin:0
CSS Minification Savings
Typical CSS minification reduces file size by 15–40%, with well-commented, formatted stylesheets seeing the highest savings. For example, a 100 KB CSS file might shrink to 60–75 KB after minification. Combined with Brotli compression, the over-the-wire size can drop by 80–90%.
CSS Performance Optimization Tips
- Minify in your build pipeline — Use cssnano, clean-css, or PostCSS in Webpack, Vite, or Gulp
- Critical CSS inlining — Inline above-the-fold CSS in
<style>tags and defer the rest - Remove unused CSS — Use PurgeCSS or UnCSS to eliminate selectors not used in your HTML
- Enable server compression — Gzip or Brotli on Nginx, Apache, CDNs for additional 60–70% reduction
- Use CSS custom properties — Reduce repetition and total CSS size with
var(--color-primary)