Minify HTML

The whitespace that matters, and the whitespace that does not

In HTML, a space between two inline elements is a real space, and this is what separates a careful minifier from one that breaks pages. Collapse the newline between two links and the words run together on screen; collapse the indentation inside a pre block or a textarea and the content itself changes, because whitespace there is content. So whitespace is only removed where it provably does not render, and left exactly alone where it does. A minifier that strips every space uniformly will produce a smaller file and a visibly wrong page.

Comments go, since they are for whoever maintains the source rather than for the reader — with the exception of conditional comments, which are instructions rather than notes. Redundant attributes are dropped: a type="text/javascript" on a script element has been the default for a decade, and method="get" on a form says what a form does anyway.

Removing attribute quotes is valid HTML and is off by default, deliberately. The specification permits an unquoted attribute value provided it contains no spaces or awkward characters, and browsers handle it perfectly. Template engines frequently do not: a Blade, Twig, Handlebars or JSX expression inside an unquoted attribute stops parsing correctly, and the failure appears at build time in a file nobody wants to read. The saving is small and the risk is not, so it is opt-in.

The honest measure of what this gains is after compression, not before. Servers send HTML gzipped or brotli-compressed, and those algorithms are extremely good at repeated whitespace — so a document that minifies from 100 KB to 70 KB may only go from 12 KB to 11 KB on the wire. Minifying HTML is worth doing and it is the smallest of the three; the stylesheet and the script are where the real weight is.

When you want something else

For a site rather than a file, this belongs in the build rather than in a browser tab. Every current framework and static site generator minifies HTML on build, and doing it by hand means it stops happening the moment somebody forgets. The libraries behind them are configurable down to individual transforms, which is worth reaching for when one particular rule is causing trouble.

Before optimising the markup, check what the page actually weighs. In almost every real site the HTML is a rounding error next to the images, the fonts and the JavaScript — Lighthouse or the browser's own network panel will tell you in seconds, and the answer is usually that an unoptimised hero image costs more than every byte of markup on the page.