Trim the fat from your HTML
Comments, blank lines, spaces between tags, extra whitespace around = in attributes, none of it changes how the browser renders your page, but it all adds bytes. On a site serving millions of requests, those bytes cost real bandwidth and real money.
Paste your HTML, watch it shrink as you type, and check the before-and-after sizes. Typically 10-30% smaller, sometimes more if your source is heavily commented with generous formatting.
What goes away
<!-- TODO: fix this later -->, gone. The four blank lines between your <header> and <main>, collapsed. class = "foo" becomes class="foo". Multiple spaces between tags reduced to nothing when they don’t affect rendering.
What stays: every tag, attribute, value, and the document structure. The browser treats the output identically to the original.
One thing to watch for
If your layout relies on whitespace between inline-block elements (a classic CSS trick), removing that whitespace can shift things around. Test your minified output. Most modern layouts use flexbox or grid, so this rarely matters anymore, but it’s worth knowing.
Where this fits
Production deploys: minify HTML alongside your CSS and JS for maximum performance wins.
Email templates: Gmail clips emails over 102KB. Every byte matters. Minified HTML keeps you under the limit.
Static sites: if your build pipeline doesn’t already minify HTML output (some static generators don’t by default), this handles individual pages.
Server-rendered HTML: when every response is dynamically generated, smaller HTML means less bandwidth per request.
For the reverse, making minified HTML readable, use the HTML Formatter. The CSS Minifier and JS Minifier handle their respective languages.
FAQ
Does it touch inline CSS or JavaScript?
No, only HTML-level content. Comments, whitespace, and attribute formatting. Inline <style> and <script> content is left alone. Use the dedicated minifiers for those.
How much smaller?
10-30% is typical. More if you’ve got lots of comments and generous formatting. Less if the source was already compact.
Can I undo it?
Paste the minified output into the HTML Formatter to get readable indentation back.
Client-side?
Yes, nothing leaves your browser.