HTML Minifier

What is HTML minification?

HTML minification removes characters the browser doesn't need — extra whitespace, comments, and the padding inside inline CSS and JavaScript — so the file downloads faster. This tool uses html-minifier-terser, a parser-based minifier, with settings that don't change how the page renders. All processing happens in your browser.

Why minify HTML

Minifying HTML removes everything a browser does not need to render the page — whitespace between tags, line breaks, comments, and redundant attributes — to make the file smaller. A smaller HTML document downloads faster and, on a busy site, the saved bytes add up across every request, improving load time and Core Web Vitals.

Done carefully, the page renders the same. This tool collapses runs of whitespace to a single space instead of deleting them, because a space between two inline elements such as links or bold text is visible, and it leaves <pre>, <textarea>, and the contents of scripts and styles it doesn't minify exactly as written.

What this minifier changes, and what it never touches

It collapses whitespace to single spaces, removes comments (keeping conditional comments and <!--! --> comments), drops quotes around attribute values where HTML allows it, and minifies <style> blocks, style attributes, <script> blocks, and event handlers with clean-css and Terser. It also tidies a few attribute values in ways browsers read identically: spaces around URLs and numbers, class lists, srcset lists, media queries, and the viewport and Content-Security-Policy meta tags.

It never changes text, text-bearing attributes such as title, alt, and form values, the URLs themselves, or the doctype, and it doesn't remove optional closing tags. If an inline script or style has a syntax error, it is left exactly as written and the tool shows the error. One limit: the minifier can't see your stylesheet, so whitespace inside an element that your CSS sets to white-space: pre, pre-wrap, or pre-line is still collapsed. Keep that content in a <pre> element instead.

A build step, not a source format

You should still write and maintain readable, indented HTML. Minify as the last step before serving, keeping the formatted version as your source of truth. That way your code stays easy to work with while your users get the smallest possible download.

Minification and gzip together

Minifying and server compression such as gzip or Brotli work together, not instead of each other. Minifying removes redundant characters, then compression shrinks what remains, and the combination is smaller than either alone — which is why production sites do both.

How to minify HTML

1. 1Paste your HTML. Paste a document or fragment, or load the sample. The minified result appears as you type.
2. 2Choose what to minify. Remove comments and Minify inline CSS & JS are on by default. Turn either off to keep comments or leave inline code as written.
3. 3Check the result. The stats show the exact size before and after. A warning appears if an inline script or style has an error and was left unchanged.
4. 4Copy the result. Use Copy output for the minified HTML, and keep your formatted copy for editing.

Examples

<div>
  <!-- nav -->
  <p>Hello</p>
</div>

<div> <p>Hello</p> </div>

<p><b>Hello</b>
  <i>world</i></p>

<p><b>Hello</b> <i>world</i></p>

<style>
  body { color : red ; }
</style>

<style>body{color:red}</style>

What this minifier changes

Every change leaves the rendered page the same.

Frequently asked questions