Skip to main content
SlapMyWeb
Fix Guide

How to Minify Your CSS

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

Easy Medium Impact 10 min

Unminified CSS ships every space, newline and comment the stylesheet was written with, inflating the file the browser must download and parse before it can paint. Minify it as part of the build — every modern bundler does this by default — and serve it compressed. The saving is typically 20 to 30 percent for no change to how the page looks.

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

1

Minify in your build

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

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.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit
Free foreverNo signupResults in 30s