Code Formatter guide

What HTML minification does

HTML written by people and templates contains indentation, line breaks and comments that browsers do not need. Minification removes them to reduce the number of bytes sent over the network. The page's structure and content stay the same.

<!-- product card -->
<div class="card">
    <h2>  Shoes  </h2>
    <p>
        Size 42
    </p>
</div>

<div class="card"><h2> Shoes </h2><p> Size 42 </p></div>

How to minify HTML with Code Formatter

1. Open the Code Formatter and paste your HTML.
2. Read the minified output and the size saving.
3. Copy the result, or download it for your build or template.
4. Open the page with the minified HTML and check that the layout looks the same.

Press Load example to see a small page with a comment, indentation and a pre block, which shows what is removed and what is preserved.

Minification runs in your browser. For production sites, minify as part of the build process so every deployment is minified automatically, and use this tool for one-off snippets, email templates or checking what a minifier would change.

Formatting and minifying XML

The XML mode of Code Formatter parses the input with the browser's XML parser, so malformed documents are reported with the parser's error message instead of being reformatted silently. Format indents elements two or four spaces per level; Minify removes the whitespace between elements and drops comments. CDATA sections and processing instructions such as the XML declaration are kept.

Text inside elements is trimmed when formatting. That is safe for configuration files and feeds like DMARC aggregate reports, but not for XML formats where leading spaces in text carry meaning; keep the original for those. Like the minifiers, the XML mode runs entirely in your browser.

Minification versus compression

Web servers and CDNs compress text responses with gzip or Brotli, which removes repeated patterns very efficiently, including most of the whitespace that minification would remove. The additional saving from minifying already-compressed HTML is usually modest. Minification still helps a little, and it helps more for pages that are not compressed, such as some email HTML.

Check whether compression is active on your site: the response should include Content-Encoding: gzip or br. The HTTP Headers Checker lists all response headers, including that one.

gzip on;
gzip_types text/html text/css application/javascript application/json image/svg+xml;
gzip_min_length 1024;

When whitespace matters

HTML collapses runs of whitespace into a single space when rendering, but it does not always remove it. A space between two inline elements, such as two links or a label and an input, is visible. Removing whitespace between tags can join words or remove small gaps between buttons.

The minifier collapses whitespace between tags aggressively, which is why a visual check matters. If a gap disappears, add the spacing in CSS (for example with gap or margins) instead of relying on whitespace in the markup, which also makes the layout more predictable.

Minification in a build workflow

Keep readable HTML in your source files and templates, and minify only the output that is deployed. Editing minified HTML by hand is error-prone, and diffs of minified files are unreadable in code review. Most static site generators and frameworks have a minification step or plugin that runs during the production build.

1. Write and review templates in readable form.
2. Build the site; the minifier runs on generated HTML files.
3. Run visual or end-to-end tests against the minified output, not only against development builds.
4. Deploy, and confirm compression headers on the live site.
5. Keep source maps or the unminified build artefact for debugging when needed.

Server-rendered applications can minify responses in middleware, but that costs CPU on every request. Caching the rendered, minified output, or minifying templates at build time, avoids repeating the work.

Email HTML is a special case. Many email clients have their own rendering quirks, and some clip messages above a certain size, so minification can prevent a long newsletter from being cut off. Test the minified version in the clients your recipients use before sending.

What the minifier does not change

The XGM minifier is deliberately conservative. It does not remove optional closing tags, attribute quotes or default attribute values, and it does not rewrite inline CSS or JavaScript. Those more aggressive optimisations save a few more bytes but are also the ones most likely to break unusual markup or tools that parse the HTML later.

If you need more aggressive minification, use a dedicated build tool with a test suite for your pages. For quick checks, snippets and templates, conservative minification keeps the risk low while still removing most of the waste.

CSS, JavaScript and build tools

The CSS mode and JavaScript mode handle stylesheets and scripts the same way: they remove comments and whitespace but do not rename variables or restructure code. Build tools used by frameworks usually go further, with dead-code removal and name mangling for JavaScript.

For a site such as https://www.example.com, the order of impact is usually: compress responses, cache static assets with long lifetimes, optimise images, reduce JavaScript, and only then minify HTML. Minification is easy, but it is rarely the biggest performance win.

FAQ

Sources

• WHATWG HTML Living Standard
• MDN: How whitespace is handled by HTML, CSS, and in the DOM
• RFC 9110: HTTP Semantics, content coding
• RFC 7932: Brotli Compressed Data Format