Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Minify Your CSS

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

Difficulty
Easy
Impact
Medium
Time
10 min

Before

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

After

.btn{color:#fff;padding:12px 20px}
Before and after code for: How to Minify Your CSS

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 it

  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.

The code

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

On your platform

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.

Sources

Check your site with our free tool

CSS Minifier

More fixes

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

Performance

How to Preload Web Fonts and Fix Invisible Text

Preload key fonts and use font-display: swap so text is never invisible while fonts load.

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 signupLive scan progress