JavaScript Minification

What JavaScript Minification Does to Your Code

To minify JS is to minimize JavaScript without changing what it does. A minifier strips whitespace and comments, then mangles variable names down to a letter or two. Better ones such as Terser add dead code elimination and fold constant expressions, the compress step in the command later. Source maps show your original lines in DevTools. The MDN minification glossary entry defines it neutrally.

Before and after on a small function

A readable function comes first, then what a minifier typically writes.

// source
// add sales tax to a price
function addTax(price, rate) {
  var total = price * (1 + rate);
  return total;
}

// minified
function addTax(n,t){return n*(1+t)}

The comment, indentation, temporary variable and long parameter names are gone, yet addTax(100, 0.2) still returns 120.

Minification vs compression vs obfuscation

Minification changes the file itself during your build. Gzip and Brotli compression packs the bytes in transit, and the two stack (our gzip compression guide covers that side). Obfuscation vs minification comes down to intent: obfuscation tries to hide logic and often makes the file bigger, while a minified file is only harder to read, not protected.

Why Minifying JavaScript Matters for Speed and SEO

We compressed jQuery 3.7.1 in both forms; gzip figures vary by a few hundred bytes between implementations.

The last row matters most. Even when the server already compresses text (the audit Lighthouse calls Enable text compression), minifying first still cuts roughly two thirds of the bytes sent. That is a big cut in JavaScript file size for what is usually one build setting.

Smaller scripts download sooner on slow connections and give the browser less to parse, which contributes to Largest Contentful Paint, one of the Core Web Vitals. That is a contribution, not a ranking switch. When parsing blocks the main thread it also touches Interaction to Next Paint, and heavy third party code still causes long tasks, and our JavaScript execution time guide covers that.

How SEO Site Checker Tests JavaScript Minification

The test is a line length heuristic you can reproduce by hand.

The rule: for each external script file, divide the total characters by the number of lines. An average line length above 200 characters counts as minified. 200 or below counts as unminified.

What the check reads

We render your page in headless Chromium and parse the final HTML, so scripts added by JavaScript are seen too. We collect the first 8 external script tags in page order and skip inline code, because there is no file to download for it. Each file is fetched on its own with a 3 second timeout, and the whole batch gets about 10 seconds.

How one file is judged

In our tests jQuery 3.7.1 source averaged 25.6 characters per line and was flagged, while jquery.min.js averaged 43,765. The lodash 4.17.21 build averaged 520 and the React 18.3.1 production build averaged 346, so both passed. A file we cannot fetch is counted as unminified.

Pass, warning and fail

The report also shows how many files it checked (8 at most) and, once you sign in, the minified and unminified URLs.

Known blind spots

Line length is only a proxy, so it can be wrong.

• Banner comments. A small file with a long license banner can fall under the limit: our 1,152 byte test file minified with Terser averaged 128 and was flagged.
• Wrapped output. Output wrapped near 120 characters is flagged too: jQuery wrapped that way averaged 99.5.
• Scheme relative URLs and timeouts. A scheme relative URL starting with // counts as unminified. So does a file that fails to download, and the 10 second batch limit can leave slow files out of the count.
• Path joining. Relative paths such as js/app.js are joined to your site root, not the page, so on a nested page we may fetch a different file from the one the browser loads.

This scan also feeds caching, covered in our JavaScript caching guide. To see your own numbers, run the free SEO report on your URL.

Check my site free

How to Check if JavaScript Is Minified

1. Open the file. Minified JavaScript is a few dense lines of short names.
2. Compare in DevTools. In the Chrome DevTools Network panel, filter by JS, reload and compare size with transfer size.
3. Measure the line length. Swap /js/app.js below for your own script path and run it in the console on the same site, since other origins may block the fetch. Above 200 matches our rule closely.

fetch('/js/app.js')
  .then(r => r.text())
  .then(t => console.log(t.length / t.split('\n').length));

If your Lighthouse or PageSpeed Insights version includes it, the Lighthouse Minify JavaScript audit lists estimated savings in KiB. It documents no pass threshold, so it and our rule can disagree on edge cases.

How to Minify JavaScript Files Step by Step

Use a one-off command or a build setting that minifies on every deploy.

1. Keep readable source. Generate minified copies during the build, never by hand.
2. Quick route with Terser. Install it with npm and run the command below. The -c flag compresses and -m mangles names, and the source map it writes lets DevTools map errors back to src/app.js (drop the source map option if you do not want a map file).
3. Bundler route. Code splitting and bundling reduce how many scripts a page loads, and minification shrinks what remains. Webpack production mode minimizes output through TerserPlugin, so set mode to production. Vite minifies during vite build by default, though the minifier depends on the version (current docs name Oxc, older releases used esbuild).
4. Update the script tag. Point it at the new .min.js file or hashed bundle and remove the old reference.
5. Test and re-scan. Click through forms and payments, then run the report again.

npm install terser --save-dev
npx terser src/app.js -c -m --source-map "url=app.min.js.map" -o dist/app.min.js

UglifyJS, SWC, esbuild, Rollup plugins and Google Closure Compiler do similar work, and tree shaking trims what ships. The webpack optimization settings explain the minimize option. For a quick one-off job, our free JavaScript Minifier will shrink a pasted script without any setup, though for the report a build tool gives a safer result.

Tool limit: our minifier does not shorten names and keeps some line breaks, so a small file can still average under 200 characters per line.

A longer walkthrough is in our post on how to minify HTML, CSS and JavaScript.

How to Minify JavaScript in WordPress, Shopify and Cloudflare

Where the fix lives depends on who builds your scripts. Platforms handle some files for you and leave the rest to you.

To minify JavaScript in WordPress, use a plugin. In Autoptimize, tick Optimize JavaScript Code on the JS, CSS and HTML tab. In LiteSpeed Cache, turn on JS Minify under Page Optimization, JS Settings.

Common JavaScript Minification Mistakes

• Skipping the test. Code that reads function.name, builds names as strings, or is joined with other files without semicolons can break after minifying.
• Losing the source. Deleting the original files or source map makes errors hard to debug.
• Pointing at the old file. If the script tag still references the unminified URL, the report never changes.
• Forgetting third party files. They are judged like yours, and one unminified file is enough for a warning.
• Stopping at minification. Scripts that block rendering still need defer, which our render blocking resources guide covers.