HTML Minifier

Remove comments and whitespace from HTML for a smaller page. Content inside <pre>, <textarea> and <script> is left untouched.

Input · drop a file

<!-- Ticket card -->
<article class="ticket">
    <header>
        <h2 class="ticket-no">No. 412</h2>
    </header>
    <p class="status">
        Ready for collection
    </p>
    <pre>  keep   this   spacing  </pre>
</article>

Output

How a minifier shrinks code, pass by pass

Minifiers don’t zip your file — they rewrite it into the smallest code that behaves identically. Step through what a JavaScript minifier like Terser does to one small function. CSS and HTML minifiers follow the same idea with their own rules.

/* Total price of a ticket */
function ticketTotal(garments) {
  let total = 0;
  for (const garment of garments) {
    total = total + garment.price;
  }
  return total;
}

Readable source with a comment, indentation and descriptive names.

172 bytes · 0% smaller than the original

What is removed

HTML comments (conditional comments are kept).
Runs of whitespace, collapsed to one space; whitespace between tags removed.
Quotes around attribute values that don’t need them.
Whitespace and comments inside <style> blocks.

Removing whitespace between tags can close a visible gap between inline elements such as buttons or links. Check the rendered page. For inline scripts, run them through the JavaScript minifier separately.

Questions

How much smaller will my HTML be?

Hand-written, indented HTML usually shrinks by 10–25%. After gzip the difference is smaller, because whitespace compresses well.

Is it safe for production?

The rules are conservative. Always test the minified page, especially if your CSS relies on whitespace between inline elements.