Minify CSS and JavaScript

Lighthouse raises Minify JavaScript and Minify CSS when a page ships files that still contain whitespace, line breaks, comments and long variable names that only matter to the developer. Minification strips all of that without changing what the code does. On its own it is a modest gain, usually smaller than compression or removing unused code, but it is cheap, it stacks with every other optimization, and an unminified file in production is a reliable sign that the build pipeline is not doing its job.

From PerfDelta's measurements: Lighthouse reports this finding on 14% of 4,108 measured home pages. The median estimated saving is 275 ms. More in the data section below.

What the audits check

For each JavaScript and CSS file the page loads, Lighthouse estimates how much smaller it would be after minification. Files where the saving is at least ten percent of the size and above a small absolute threshold are listed, with the estimated byte saving. The audit looks at the source as transferred, so a file that is compressed but not minified still appears, because minification and compression remove different kinds of redundancy.

Minification and compression are different steps

Compression (Brotli or gzip) finds repeated byte sequences and encodes them more compactly, which already shrinks whitespace and comments a lot. Minification removes them entirely and additionally shortens identifiers, folds constants and drops dead branches, which compression cannot do. The two combine: a minified file compresses to a smaller result than the unminified original. Treat text compression as the first step and minification as the second; both belong in a production build.

How to minify JavaScript and CSS

1. Let the build tool do it

Every modern bundler minifies in production mode: Vite and Rollup through esbuild or Terser, webpack through Terser and the CSS minimizer plugin, Parcel by default. Next.js, Nuxt, Astro and SvelteKit ship minified output from their production builds without extra configuration. If the audit lists files from your own build, the usual causes are a development build deployed by mistake, a NODE_ENV that is not production, or a file copied into a static folder that bypasses the bundler.

# Vite: minified by default
vite build

# webpack: production mode enables Terser
webpack --mode production

2. Minify at the CDN or server

Cloudflare, Fastly and several hosting platforms can minify JavaScript and CSS on the fly. This is a reasonable fallback for files you do not control, but it is riskier than build-time minification: an on-the-fly minifier cannot run tests, and a rare syntax edge case breaks the live site instead of the build. Prefer the build step for your own code and use CDN minification for the rest.

3. WordPress, Shopify and other platforms

• WordPress: core and well-maintained plugins ship minified files. The audit usually points at a theme or plugin that includes an unminified build, or at inline scripts a page builder injects. Caching plugins offer minification options; enable them for CSS first, test, then JavaScript, because combining and minifying scripts can change execution order.
• Shopify: theme assets are minified by the platform. Findings here almost always come from apps that inject their own scripts; the fix is to remove the app or ask the vendor.
• Site builders (Wix, Squarespace, Webflow): the platform minifies its own code. Remaining findings point at custom code blocks or embeds you added.

4. Minify inline code too

Inline <script> and <style> blocks in the HTML are part of the document and are covered by HTML minification rather than this audit, but they add to the document size. Keep inline code short, move anything over a few kilobytes into a cacheable external file, and let the template engine strip HTML whitespace in production.

5. Keep source maps out of the production bundle

Source maps are useful for debugging but must not be inlined into production files, where they can multiply the file size. Emit them as separate .map files that only developer tools request, or upload them to your error tracker instead of the public server.

What minification is worth

For a typical minified-plus-compressed bundle, the minification share of the saving is in the range of a few percent to a few tens of percent of the uncompressed size, depending on how verbose the source is. It is rarely the fix that turns a failing LCP into a passing one. The findings that move Core Web Vitals are unused JavaScript, render-blocking resources and JavaScript execution time. Minification is the hygiene step that makes those gains a little larger and signals that the pipeline is sound.

Frequently asked questions

Can minification break my site?

Build-time minification with a current minifier is safe for standard JavaScript and CSS. Problems come from code that relies on function names at runtime, from very old syntax, or from on-the-fly minifiers that combine files in a different order. Test after enabling, especially on WordPress, where plugin options combine files as well.

Why does Lighthouse flag a file that is already minified?

Some minified files still contain license comments, inline source maps or large embedded data. Check the file in the browser: if it is one long line but very large, the content rather than the formatting is the issue, and the right audit is unused JavaScript.

Should I combine files as well as minify them?

With HTTP/2 and HTTP/3, combining many files into one no longer helps as it did with HTTP/1.1 and can hurt caching. Minify every file, but combine only where a build tool does it with proper dependency handling.

Does minifying HTML count?

Lighthouse does not audit HTML minification separately, but a smaller document arrives sooner and helps First Contentful Paint. Most template engines and static site generators can strip whitespace in production.