Minify CSS: What It Is, How to Check It and How to Fix It

What CSS Minification Removes and What It Leaves Alone

Basic minifiers remove comments (except license banners), line breaks, indentation, the spaces around braces and colons, and the last semicolon. Better ones such as CSSO also shorten colors, turn 0px into 0 and merge duplicate rules. The page must render identically, so any difference is a bug.

Before and after on a small rule

/* Before */
/* Page heading */
h1 {
  color: #ffffff;
  margin: 0px auto;
}

/* After */
h1{color:#fff;margin:0 auto}

Minify, compress, purge

Minifying rewrites the file so it is shorter, while gzip or Brotli encode it for the trip, so you want both (see gzip compression). Neither removes unused CSS; that takes a purge tool such as PurgeCSS.

Why Minify CSS? What You Actually Gain

Each readable file was compared with its official .min.css, raw and with gzip level 6.

The saving is a small, cheap win, not a cure for a slow site. It still matters because CSS blocks rendering until it is parsed, as render blocking resources explains.

In our samples animate.css lost a quarter of its raw size and Bootstrap a sixth, so indented framework and theme files gain most. The Lighthouse Minify CSS audit estimates savings by counting only comments and whitespace, so a full minifier can save more.

How SEO Site Checker Tests CSS Minification

The rule: we download each linked stylesheet and divide its characters by its lines. More than 200 per line is minified. At 200 or below it counts as unminified CSS.

What the check reads

The scan renders your page in headless Chromium and collects the stylesheet link tags, checking only the first 8. Each file gets 3 seconds, and the whole batch stops after about 10 seconds, so a slow server can leave files unchecked. Any file we can't download in time counts as unminified, which can drag a clean site down to a Warning. Inline style tags and attributes are ignored.

How one file is judged

Bootstrap 5.3.3 source has 12,057 lines averaging 22.3 characters, so it is flagged. Its minified twin is 6 lines averaging 38,799 and passes, as do animate.min.css at 10,249 and Font Awesome's all.min.css at 11,404.

Passed, warning and failed

The report prints how many files it checked, plus minified and unminified lists whose URLs show for signed in users.

Known blind spots

The rule measures average line length, not minification, so it can misjudge. Output that keeps one rule per line averaged 87.8 in our test and was flagged, as is a file under 200 characters.

Fetching has traps too, and each ends with the file counted as unminified. A URL starting with // fails in our fetcher, a limit of our tool, not a fault in your page, so use full https:// addresses. A relative path such as css/site.css on a page at /blog/post/ is requested from the site root and may return a 404, and because we don't check the HTTP status, that error page is scored as if it were CSS.

The check doesn't judge whether the output is correct, how much CSS is unused, or style tags and attributes, including ones added by scripts. Stylesheets pulled in by an @import rule are not followed either. One scan also feeds the CSS caching and media query check results.

How to Check Whether a CSS File Is Minified

1. Open the file. A minified file is a dense wall of text.
2. Compare sizes. In the Chrome DevTools Network tab, turn on Use large request rows, then read the second (lower) number in the Size column, the uncompressed resource size.
3. Run the report. Run the free SEO report and sign in to see which files landed in each list.
4. Measure it. Print the average line length below. Above 200 passes.

curl -sL https://example.com/css/style.css | awk '{ n += length($0) } END { print n / NR }'

How to Minify CSS Files Step by Step

1. Protect the source. Minifying runs one way, so keep the readable file in version control and never hand edit minified output.
2. Small sites. Paste the CSS into our CSS Minifier and save the result as style.min.css.
3. Projects with a build. Use cssnano through PostCSS, or clean-css or Lightning CSS from an npm script. See the cssnano documentation for options.
4. Bundlers. Vite minifies CSS in production builds by default. webpack's production mode doesn't, so add css-minimizer-webpack-plugin.
5. Point the link tag. Reference the .min.css file with a version query.
6. Verify. Clear caches, compare the page with the old version, then re-run the report.

For PostCSS, save this config, then install and run it.

// postcss.config.js
module.exports = { plugins: [require('cssnano')] };

npm install postcss postcss-cli cssnano
npx postcss style.css -o style.min.css

Without PostCSS, clean-css needs one command.

npx clean-css-cli -o style.min.css style.css

How to Minify CSS in WordPress and Hosted Platforms

For WordPress, install the Autoptimize plugin for WordPress, open its JS, CSS and HTML tab, tick Optimize CSS Code? and save. Caching plugins such as WP Rocket and LiteSpeed Cache have a Minify CSS switch too, though many plugins skip any file named .min, even a readable one. Clear every cache, then re-test.

Third party stylesheets such as a Google Fonts link or a widget's CSS follow the same rule. A Google Fonts stylesheet measured about 31 characters per line when we tried it, so it counts as unminified and you can't change it. Accept that Warning, or self-host the font.

Common Mistakes When You Minify CSS

Watch for: editing only the readable file and forgetting to rebuild, so the live link still points at the old stylesheet.

• Stale caches. A plugin or CDN keeps serving last week's style.min.css, so the report never changes. Purge every layer.
• One giant file. A single stylesheet holding every page's rules still blocks rendering, so split critical rules from the rest.
• Broken layout. Invalid source CSS can fail once whitespace is gone, and an old minifier may squeeze the spaces inside calc(), where CSS requires them.

Scripts share these traps, as our JavaScript minification guide shows.