About the HTML Minifier
Paste a page or a fragment into the HTML minifier and it strips comments, indentation and line breaks without changing how anything looks. Text in <pre> and <textarea> stays exactly as written, the code inside <script> and <style> isn't minified unless you ask, and wherever a space would show between two words, one space is kept.
Turn on Minify Inline CSS and JS to shrink the code inside <style> and <script> too, or switch to Format to indent a minified page with Prettier, which also catches tags that don't match. Everything runs in your browser.
- Paste a full page, an email template or a CMS snippet into Input HTML. Load Example fills in a page with a comment, a
<pre>block, a<style>block and a script. - With Minify selected, choose what to remove. Remove Comments, Remove Empty Attrs and Collapse Whitespace start switched on. Minify Inline CSS and JS starts off.
- Minified HTML shows the result. Original Size, Minified Size and Savings refresh about half a second after your last change, so you can toggle an option and compare.
- Switch to Format to get indented markup in Formatted HTML. If Prettier finds a tag closed in the wrong place, HTML Error shows the position, for example
Line 3, column 1: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. - Use Copy to take the result, or Download to get it as
minified.htmlorformatted.html.
Input<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Price list</title>
<!-- main styles -->
<link rel="stylesheet" href="/app.css">
</head>
<body>
<ul class="prices">
<li>Coffee: <b>3.50</b> EUR</li>
<li>Tea: <b>2.80</b> EUR</li>
</ul>
<p class="" id="note">
Prices include <em>VAT</em>.
</p>
</body>
</html>Output<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Price list</title><link rel="stylesheet" href="/app.css"></head><body><ul class="prices"><li>Coffee: <b>3.50</b> EUR</li> <li>Tea: <b>2.80</b> EUR</li></ul> <p id="note">Prices include <em>VAT</em>.</p></body></html>
388 B → 282 B, 27.3% savedThe comment and the empty class="" are gone, and the runs of spaces inside the paragraph became single spaces. The space left between </li> and <li> is explained in the Guide tab.
Input<p>
<strong>Total:</strong>
<span class="price">49.90</span>
<abbr title="Swiss franc">CHF</abbr>
</p>Output<p><strong>Total:</strong> <span class="price">49.90</span> <abbr title="Swiss franc">CHF</abbr></p>
108 B → 100 B, 7.4% savedA find-and-replace that deletes all whitespace between > and < would make the page read Total:49.90CHF.
Input<div>
<pre>
line 1
line 2
</pre>
<textarea name="msg"> keep
this </textarea>
</div>Output<div><pre>
line 1
line 2
</pre> <textarea name="msg"> keep
this </textarea></div>Input<style>
.card {
padding: 16px; /* space */
width: calc(100% - 2rem);
}
</style>
<script>
// greet the user
function greet(name) {
const message = "Hello, " + name;
console.log(message);
}
greet("toolo");
</script>
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "WebSite", "name": "toolo" }
</script>Output<style>.card{padding:16px;width:calc(100% - 2rem)}</style> <script>function greet(o){const e="Hello, "+o;console.log(e)}greet("toolo");</script> <script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "WebSite", "name": "toolo" }
</script>
365 B → 266 B, 27.1% saved (357 B with the option off)The JSON-LD block isn't JavaScript, so it's left exactly as it was.
How whitespace is handled
Browsers show any run of spaces, tabs and line breaks between inline content as one space: <b>bold</b> <i>italic</i> has a gap, <b>bold</b><i>italic</i> doesn't. So Collapse Whitespace shrinks each run to one space instead of deleting it.
It removes the space entirely only where it can't show: just inside the tags of block elements such as <div>, <p>, <li> and <td>, between tags in <head>, and around <html>, <head> and <body>. Between two block elements, as in </li> <li>, one space stays. Most layouts ignore it, but items styled display: inline-block show it, and removing it would shift them a few pixels.
The content of <pre>, <textarea>, <script>, <style>, <xmp>, <iframe>, <noembed> and <noframes> is copied character for character. The one exception: with Collapse Whitespace on, the whitespace at the very start and end of a CSS or JavaScript block is trimmed.
Comments, attributes and inline code
What each option touches, and what it leaves as it is:
- Remove Comments deletes
<!-- -->comments but keeps conditional comments such as<!--[if lt IE 9]>...<![endif]-->, which old versions of Internet Explorer read as markup. - Remove Empty Attrs removes
class,idandstylewhen their value is empty or only spaces. Other empty attributes stay, because they can mean something:alt=""marks an image as decorative, andvalue=""sets an empty field. - The tags themselves get tidied too:
<button type="submit" disabled>loses its extra spaces, and with Collapse Whitespace on,</a >becomes</a>. Attribute values are never changed, sotitle=" Two spaces "keeps every space. - Minify Inline CSS and JS runs
<style>blocks through the same rules as the CSS Minifier and inline scripts through Terser, as in the JavaScript Minifier.type="module"scripts are minified as modules. Scripts with asrc, JSON-LD,text/templateand other types that aren't JavaScript are skipped, and a script that Terser can't parse is kept as it was.
What it leaves alone
Build-step minifiers squeeze out more by rewriting markup. This page doesn't, so the output stays easy to compare with your source:
- Optional end tags such as
</li>,</p>and</td>stay, and so do the quotes around attribute values. checked="checked"isn't shortened tochecked, andtype="text/javascript"isn't dropped.style="..."attributes andonclick="..."handlers aren't minified, only<style>and<script>elements.- Nothing is validated in Minify mode. Run Format when you want Prettier to check that every tag is closed in the right place.
When minifying HTML is worth it
HTML compresses well, so the gain after gzip is smaller than for JavaScript. The Load Example page is 1,296 bytes (657 gzipped). The default options take it to 989 bytes (589 gzipped), and adding inline CSS and JS to 882 (554 gzipped).
It matters more for HTML email: Gmail clips messages larger than 102 KB and hides the rest behind a link, and long newsletters built from nested tables can pass that limit. It also helps on servers that don't compress responses and on large server-rendered pages.
Minify HTML in a build step
For a site you deploy often, minify during the build so every page gets the same treatment. Static site generators usually have a switch for it.
npx html-minifier-terser --collapse-whitespace --remove-comments --minify-css true --minify-js true -o index.min.html index.htmlhugo --minifynpx prettier . --writeIs it safe to minify HTML?
With the default options, yes. Whitespace is removed only where it can't show, and the content of <pre>, <textarea>, <script> and <style> is kept. If your CSS sets white-space: pre or pre-wrap on other elements, turn off Collapse Whitespace, because their spacing is content too.
Why is there still a space between some tags?
Because it might be visible. Between inline elements, or between list items styled as inline-block, a space shows as a gap, so the minifier keeps one to make sure the page looks exactly as before.
Does minifying HTML help SEO?
Only through speed. Google reads minified and formatted HTML the same way, so the gain is the smaller download, which counts toward page experience. Compressing responses with gzip or Brotli and shrinking images usually save far more bytes.
Can I unminify HTML?
Yes. Paste it and click Format, and Prettier indents it with two spaces per level. Comments removed during minifying are gone, so keep your source file.
Does it work with template tags like {{ }} or {% %}?
Template tags in text are treated as text and kept, with the whitespace around them collapsed to one space: a Jinja {% for %} loop comes out as <ul>{% for user in users %} <li>{{ user.name }}</li> {% endfor %}</ul>. Attributes like Vue's @click and :class are kept as written.
Should I minify HTML emails?
It's worth it for long ones. Gmail clips any message over 102 KB, which can hide the footer and unsubscribe link. Minify the final HTML right before you send it, and keep the readable version for editing.