How to Minify CSS and JavaScript (Fix Guide)

What this means

Why it matters

How to fix it

1. 1

   Confirm which files are actually unminified

   Open a flagged CSS or JS file directly in the browser (click its URL in View Source). If you see indentation, comments, and full-length variable names, it is unminified. In Chrome DevTools, the Network tab shows transferred vs. resource size, and the Coverage tab shows how much of each file goes unused. Note whether the culprit is your own theme code, a plugin, or a third-party script you don't control, because the fix differs for each.

2. 2

   WordPress: use one optimization plugin

   Do not hand-edit theme files. Install a single optimization plugin and enable its minify options: WP Rocket (File Optimization > Minify CSS files / Minify JavaScript files), Autoptimize (tick Optimize CSS Code and Optimize JavaScript Code), or LiteSpeed Cache (Page Optimization > CSS Settings / JS Settings). Yoast and Rank Math do not minify, so pair them with one of these. After enabling, click through your key pages, because the file-combining features bundled alongside minify occasionally break sliders or forms. If something breaks, exclude that specific script rather than turning minification off.

3. 3

   Custom and headless sites: minify at build time

   If you ship code through a bundler, minification belongs in your build, never patched onto live files. Vite and Next.js minify production builds automatically (vite build, next build); confirm you are deploying the production build and not running a dev server. For manual setups, esbuild is the fastest option, or use Terser for JS and cssnano for CSS. See the code example for an esbuild one-liner and package.json scripts.

4. 4

   Handle third-party scripts you can't minify

   You cannot minify a script hosted on someone else's domain (analytics, chat widgets, ad tags). For those, the fix is loading strategy, not minification: add async or defer, load them after user interaction, or self-host where the license allows. Exclude external URLs from your optimizer so it doesn't try and fail to process them, and minify only the files you actually serve.

5. 5

   Re-test and verify nothing broke

   After deploying, clear every cache layer: plugin cache, CDN cache, and browser. Re-run PageSpeed Insights and re-crawl with this tool to confirm the warning clears. Then click through interactive elements one more time: forms, menus, carousels, add-to-cart. Minification is behavior-preserving in theory, but the combine and defer features often bundled with it are the usual cause of post-minify breakage.

Example

# One-off: minify a single file with esbuild
npx esbuild src/main.js --minify --outfile=dist/main.min.js
npx esbuild src/style.css --minify --outfile=dist/style.min.css

# In package.json — run automatically on every build:
# {
#   "scripts": {
#     "build:js": "esbuild src/main.js --bundle --minify --outfile=dist/main.min.js",
#     "build:css": "esbuild src/style.css --minify --outfile=dist/style.min.css",
#     "build": "npm run build:js && npm run build:css"
#   }
# }

# Dedicated alternatives:
npx terser src/main.js --compress --mangle -o dist/main.min.js   # JS
npx cssnano src/style.css dist/style.min.css                    # CSS

# Then reference the minified files in your HTML:
# <link rel="stylesheet" href="/dist/style.min.css">
# <script src="/dist/main.min.js" defer></script>

Minify CSS and JS with esbuild (a single binary that handles both), or with the dedicated Terser and cssnano tools.

Platform-specific steps

Frequently asked