HTML / CSS / JS Minifier

Why minifying HTML, CSS, and JavaScript speeds up a page

Every byte your server sends has to travel the network and be parsed by the browser. Source code is written for humans — it is full of indentation, line breaks, blank lines, and explanatory comments that the browser does not need to do its job. Minification strips out everything that exists purely for readability, leaving functionally identical code that is smaller and downloads faster. On a high-traffic page, shaving even 20–30% off a stylesheet or script measurably improves load time, and smaller files compress better when the server applies gzip or Brotli on top.

This tool has three tabs — HTML, CSS, and JS — because each language has different rules about which characters are safe to remove. It shows the original size, the minified size, and the percentage reduction so you can see exactly what you saved.

What each mode removes

For HTML, the tool keeps conditional comments such as <!--[if IE]> intact because those are instructions to certain browsers, not human notes. For CSS, collapsing the space in color : red ; down to color:red is always safe. The JS minifier is a conservative whitespace-and-comment pass: it does not rename variables or restructure code, so it never changes behaviour.

A worked example

Paste this CSS into the CSS tab:

/* heading */
h1 {
  color: navy;
  margin: 0;
}

The minifier deletes the comment, collapses the indentation and newlines, removes the spaces around the braces and colons, and drops the final semicolon, producing h1{color:navy;margin:0}. The original is around 55 bytes; the output is about 25 — a reduction of more than half, reported live in the stats row.

Important limits to understand

This minifier works by pattern-matching whitespace and comments, which is fast and safe for well-formed, conventional code. It is not a full parser, so there are edge cases to respect:

• JavaScript without semicolons. Because the JS pass collapses newlines into spaces, code that relies on automatic semicolon insertion across line breaks could change meaning. Use explicit semicolons, or run code through a parser-based minifier (like Terser) for production bundles.
• Strings and regexes. A comment-like sequence inside a string (for example a URL containing //) is an edge case for any regex-based minifier. Review the output of code that embeds such patterns.
• HTML whitespace that matters. Inside <pre>, <textarea>, or where you rely on a single space between inline elements, aggressive whitespace collapsing can shift layout. Check pages that depend on significant whitespace.

Best practices

• Keep a readable source. Always minify a copy. Edit the formatted original and re-minify; never hand-edit minified output.
• Minify, then compress. Minification and gzip/Brotli stack. Minified code compresses to an even smaller transfer size.
• Measure with the stats. If a file barely shrinks, it was probably already minified — running it again wastes effort.
• Test after minifying. Load the page or run the script once with the minified version before shipping it.

Use cases and privacy

Developers minify before deploying static assets, embedding inline styles in an email template, or pasting a snippet where size is constrained. It is handy for quick one-off files where setting up a full build pipeline is overkill. All three minifiers run entirely in your browser — your code is never uploaded to a server — so even proprietary markup or scripts stay on your own machine while you measure the savings.