HTML, CSS & JS Minifier

What minification removes, and what it must not

Minifying is about deleting everything a browser does not need: comments, indentation, line breaks and the optional characters between tokens. The hard part is knowing what looks optional but is not. This tool parses each language just enough to stay on the safe side.

CSS

Comments go, whitespace collapses, and spaces around { } ; , > ~ and after colons are removed, along with the last semicolon in each block. Strings are copied untouched, so content: " / " survives. What it deliberately leaves alone: spaces around + and -, because calc(100% - 2rem) stops working without them, and the space before a colon, because a :hover and a:hover are different selectors.

/* before: 128 bytes */
.card {
  padding: 1rem 1.5rem;   /* roomy */
  width: calc(100% - 2rem);
  color: #101438;
}

/* after: 66 bytes */
.card{padding:1rem 1.5rem;width:calc(100% - 2rem);color:#101438}

HTML

HTML whitespace is not always insignificant. Between two inline elements, a single space is the gap between words, so the minifier collapses runs of whitespace to one space instead of deleting them. It only removes whitespace completely next to block-level tags like <div>, <p>, <li> and <head> elements, where it never renders. Comments are dropped except Internet Explorer conditional comments, and the contents of <pre>, <textarea>, <script> and <style> are protected. Tick the inline option to run the CSS and JS minifiers over embedded styles and scripts too.

JavaScript (light mode)

JavaScript is where naive minifiers break things. This one tokenizes the code properly: it knows the difference between a division sign and a regex literal, keeps template literals including nested ${} expressions intact, and adds a space wherever two tokens would otherwise merge (a - -b, return x). Because it cannot know where your code relies on automatic semicolon insertion, it keeps a line break whenever removing one could change meaning. The output is usually 20 to 40% smaller than the source.

What it does not do is rename variables, inline constants or drop unused code. Those are the big wins, and they need a real parser and scope analysis. For anything you ship to production, run a proper build step:

npx terser app.js -c -m -o app.min.js
# or, as part of a bundle
npx esbuild app.js --minify --outfile=app.min.js

Minify, then compress

Minification and compression stack. Your server (Apache with mod_deflate, Nginx, Cloudflare, Hostinger) should already be serving text files with gzip or Brotli, which typically cuts another 70% off. Minify first, because compression cannot remove comments, only squeeze them. Check that compression is on by looking for content-encoding: br or gzip in the response headers in DevTools.

Frequently asked questions