HTML Minifier and Beautifier

HTML whitespace is not decoration. Any run of spaces and newlines between two pieces of text collapses to a single space when the page renders — and that single space is a real, visible word gap.

This is why aggressive HTML minifiers break pages. Take Roasted <strong>last week</strong> with a newline before the <strong>. Delete that whitespace and the page reads Roastedlast week. It happens on exactly the markup people indent most carefully, and it is invisible in the source afterwards.

The default here collapses each run of whitespace to a single space — safe everywhere, and it still removes the bulk of the bytes — and never deletes it entirely. The aggressive option does delete it, but only where both sides are block-level elements. Where either side is inline, the space is a word gap and it stays.

The contents of pre, textarea, script and style are passed through byte for byte. In the first two, whitespace is displayed as written. In the last two, it is code — and a minifier that reformats JavaScript with automatic semicolon insertion in play is a minifier that introduces bugs.

Conditional comments — <!--[if IE]> — are kept even when comments are removed, because the markup inside them is not a comment at all.

Load the sample and minify it with the aggressive option off. Look at the paragraph: the space before <strong> survives, so it still reads "Roasted last week in Amman". Now turn the aggressive option on. The whitespace between <li> elements disappears — correct, they are block-level — but the paragraph is still intact, because strong and em are on the inline list.

And check the pre block. Its indentation is exactly as it was in both modes. That is the test a lot of online minifiers fail, and it is the one that turns a code sample on a documentation page into a single unreadable line.

Beautifying is what most people arrive needing. You have server output, a saved page, or an email template that is one enormous line, and you need to find something in it. Indenting by nesting depth makes the structure visible — and void elements such as <img> and <br> are correctly not treated as opening a level, which is what makes naive indenters drift steadily to the right.

How much is it worth? Less than you would hope. HTML gzips extremely well, because it is full of repeated tag names, so minified and unminified markup often differ by very little over the wire. The real wins on a page are compression, image sizes and fewer render-blocking requests. This is a tidying tool, not a performance strategy.

For the stylesheet, use the CSS minifier; to escape markup so it displays as text rather than rendering, the entity encoder.