This removes comments and collapses extra whitespace between tags, shrinking a page's markup without changing how it renders. Like CSS minification, it's a small optimization that adds up, especially for a page with a lot of markup served to someone on a slow connection.
How to use it
- Paste your HTML into the box.
- Click minify.
- Review the compacted result.
- Copy it into your production files.
- Keep an unminified version of your source for ongoing work.
When it helps
- Shrinking a static page's file size before deploying it.
- Cleaning up markup exported from a page builder that adds a lot of whitespace.
- Preparing HTML for an email template, where size and consistent rendering both matter.
- Reducing the size of a snippet before embedding it in a JavaScript string.
- Compacting a chunk of HTML before pasting it somewhere with a character limit.
Good to know
- Test minified HTML in the browser before deploying, since collapsing whitespace can occasionally affect a whitespace sensitive element like pre.
- Keep readable source HTML in version control and minify only as a build step.
- Combine this with CSS and JavaScript minification for the biggest overall reduction in page weight.
- Run your minified HTML through a validator afterward if you're unsure whether whitespace collapsing affected any content, especially around inline elements.
- If you're minifying an HTML email template specifically, test the result in an actual email client afterward, since email rendering engines are pickier about markup than browsers.
Test before deploying
After minifying, open the page and check the layout, forms and any inline scripts. Whitespace between inline elements can matter, so look for words that now touch each other.
Questions
Can minifying HTML break my layout?
Rarely, but pages relying on visible whitespace inside pre or certain inline block layouts can occasionally be affected, so it's worth checking visually before deploying.
Does this also minify inline CSS and JavaScript inside the HTML?
This tool focuses on HTML structure and whitespace between tags. For inline style or script blocks, minify those separately with the CSS or JS tools.
How much smaller will my file get?
It depends on how much whitespace and how many comments the original had. Heavily formatted markup from a page builder shrinks a lot, tight hand written HTML shrinks only a little.
Does this remove comments used by other tools, like conditional comments?
Yes, standard HTML comments get stripped, so check whether anything relies on parsing specific comments before minifying that file.
Should I minify templates before or after they're filled with dynamic content?
Generally minify a static template as a build step before dynamic content gets inserted, rather than minifying already rendered pages on every request.
Does this tool remove HTML attributes it thinks are unnecessary?
No, it only affects whitespace and comments between and within tags. It doesn't remove, add, or judge the necessity of any attribute.