Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Minify Your JavaScript

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

Difficulty
Easy
Impact
Medium
Time
10 min

Before

function calculateTotal(price, quantity) {
  // multiply price by quantity
  return price * quantity;
}

After

function calculateTotal(t,a){return t*a}
Before and after code for: How to Minify Your JavaScript

Unminified JavaScript ships full variable names, comments and whitespace, so the browser downloads and parses far more than it needs to. Enable minification in your build, and serve the result with Brotli or gzip. On top of that, splitting the bundle so each page loads only its own code usually saves more than minification alone.

Why it matters

Unminified JavaScript ships comments and long variable names the browser doesn't need, and JS is expensive to download and parse. Minification (and tree-shaking) cuts bytes and speeds up execution.

How to fix it

  1. Build for production

    Use your bundler's production build (esbuild, terser, SWC) so JS is minified and dead code removed.

  2. Tree-shake and split

    Import only what you use and code-split per route so each page ships less JS.

The code

Beforejavascript
function calculateTotal(price, quantity) {
  // multiply price by quantity
  return price * quantity;
}
Afterjavascript
function calculateTotal(t,a){return t*a}

On your platform

WordPress

Enable "Minify JavaScript" in your caching plugin; test for breakage since some plugin scripts dislike combining.

Next.js

Production builds minify + tree-shake automatically.

Sources

Check your site with our free tool

JavaScript Minifier

More fixes

Performance

How to Minify Your CSS

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

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