How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Easy Medium Impact 10 min

Why It Matters

Hand-written CSS is full of comments, indentation and blank lines that the browser doesn't need. Minifying removes them, shrinking the file 30-50% so it downloads and parses faster — with zero change to how the page looks.

How to Fix

Minify in your build

Run CSS through a minifier (cssnano, esbuild, or your bundler's production mode) — never edit minified files by hand.

Serve the minified file

Reference the .min.css in production and keep the readable source for development.

Code Fix

css

Before (broken)

.btn {
  color: #ffffff;
  /* primary call to action */
  padding: 12px 20px;
}

After (fixed)

.btn{color:#fff;padding:12px 20px}

Platform-Specific Instructions

WordPress

Enable "Minify CSS" in a caching plugin (WP Rocket, LiteSpeed, Autoptimize).

Next.js

Next.js minifies CSS automatically in next build — no config needed.

Check with our tool

CSS Minifier

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit