HTML Minifier

Lighthouse flags your HTML at 180KB. Most of it is indentation whitespace, dev comments, and redundant type="text/javascript" attributes left by your template engine. Your build pipeline handles CSS and JS minification, but the HTML goes through untouched. You need to strip comments, collapse whitespace, and remove default attributes — without breaking inline scripts or conditional comments.

Why This Tool (Not html-minifier-terser in Your Build)

html-minifier-terser is the gold standard for build pipelines, but setting it up means adding a dependency, configuring 20+ options, and testing that it doesn’t break your HTML. This tool gives you instant minification in your browser — paste HTML, toggle the options you want (remove comments, collapse whitespace, fold booleans, strip defaults), and copy the result. Perfect for one-off minification or testing what options your build should use. No data is sent anywhere.

What Is an HTML Minifier?

An HTML minifier reduces the file size of HTML documents by removing characters that are not needed for the browser to parse and render the page correctly:

• Comments: <!-- ... --> blocks that document the code but are invisible to end users
• Redundant whitespace: Spaces, tabs, and newline characters between tags that exist only for human readability
• Verbose boolean attributes: disabled="disabled" can be written as just disabled in HTML5
• Default type attributes: type="text/javascript" on <script> tags is implied by the HTML spec and can be omitted

The minified HTML renders identically to the original in every modern browser, but occupies less bandwidth on every page load.

How Much Can HTML Minification Save?

Savings depend on how the HTML was authored and what options are enabled:

Combined with gzip or Brotli compression — applied automatically by web servers — even small percentage savings in the raw HTML translate to meaningful transfer reductions.

Minification Options

Remove Comments

Strips <!-- ... --> HTML comments from the document. Comments are useful during development and for documenting markup decisions, but they add bytes to every page response without affecting the rendered output.

Preserved comments: IE conditional comments (<!--[if IE]>...<![endif]-->) are always preserved because they are parsed by Internet Explorer as conditional markup, not ignored like regular comments. Comments starting with <!--! are also preserved.

Collapse Whitespace

Collapses sequences of whitespace characters — spaces, tabs, carriage returns, and newlines — into a single space character inside text nodes. This removes the visual indentation that makes HTML readable but is invisible in the browser.

<!-- Before -->
<div>
    <p>
        Hello,   world!
    </p>
</div>

<!-- After -->
<div> <p> Hello, world! </p> </div>

Important: Content inside <pre>, <textarea>, <script>, and <style> elements is never modified because whitespace is significant in those contexts.

Collapse Boolean Attributes

In HTML5, boolean attributes (attributes whose mere presence represents a true value) do not need an explicit value:

All three forms — attr, attr="", and attr="attr" — are equivalent in HTML5. This option collapses the verbose forms to the shortest one.

The full list of recognized boolean attributes includes: allowfullscreen, async, autofocus, autoplay, checked, controls, default, defer, disabled, formnovalidate, hidden, ismap, loop, multiple, muted, nomodule, novalidate, open, readonly, required, reversed, selected.

Remove Default Type Attributes

The HTML5 specification defines default MIME types for certain elements. When the type attribute on those elements already equals the default, it can be safely removed:

This option only removes the attribute when the value matches the implied default exactly. Non-standard MIME types (like type="module" or type="text/template") are always preserved.

How Whitespace Collapsing Works

HTML text nodes contain the literal characters between tags. Browsers collapse consecutive whitespace in text content to a single space when rendering, but the original whitespace is still transmitted over the network.

The minifier collapses any sequence of whitespace characters (U+0009 TAB, U+000A LF, U+000D CR, U+0020 SPACE) in text nodes to a single U+0020 SPACE. This matches what the browser would do, so the visual output is identical.

Elements where whitespace is preserved:

• <pre>: Preformatted text — whitespace is visually significant
• <textarea>: Form field — value must be preserved exactly
• <script>: JavaScript code — the minifier does not parse JS
• <style>: CSS code — the minifier does not parse CSS

How to Use the HTML Minifier

1. Paste your HTML into the left input panel
2. The minifier processes the input automatically and shows the minified output on the right
3. The stats bar shows the original size, minified size, and bytes saved
4. Toggle options to include or exclude specific transformations
5. Click Copy to copy the minified HTML to your clipboard

All processing runs entirely in your browser — your HTML is never sent to any server.

HTML Minification and Web Performance

HTML is typically the first resource the browser fetches. Smaller HTML means:

Faster Time to First Byte (TTFB): Less data to transfer before the browser can start parsing the document.

Faster parsing: The HTML parser processes fewer characters, reducing CPU time on the client.

Faster Largest Contentful Paint (LCP): The browser can discover render-critical resources (CSS, fonts, images) sooner.

In HTTP/2 and HTTP/3 environments, header compression reduces protocol overhead, making content size even more important relative to total transfer cost.

Minification vs. Compression vs. Template Rendering

These techniques are complementary:

Minification and compression are not redundant. Compression works better when the input has less repetition — minified HTML has slightly less redundancy, so compression ratios are marginally lower. However, minification still reduces absolute compressed file size and eliminates bytes entirely for uncompressed scenarios.

Common Questions

Is my HTML sent to a server? No. All minification runs entirely in your browser using JavaScript. Your markup is never transmitted to any server.

Can I undo the minification? Comments are removed permanently. Whitespace can be restored with an HTML formatter or beautifier. Always keep the original source before minifying.

Will minification break my JavaScript or CSS? Content inside <script> and <style> elements is never modified. Only the HTML markup surrounding them is minified.

Does it handle malformed HTML? The minifier uses a lenient tokenizer that tolerates many common HTML authoring mistakes, such as unclosed tags and missing quotes on attribute values. Output quality depends on the input quality.

What about <script type="module">? Module scripts with type="module" are not affected by default type removal because text/module is not the default type for <script>. Only type="text/javascript" (or its equivalent variants) is removed.

Why does the minifier preserve whitespace around inline elements? Text between inline elements (like <a>, <span>, <strong>) can contain a single space that affects word spacing in rendered text. The whitespace collapsing option folds multiple spaces into one but does not remove all whitespace, ensuring that words separated by whitespace in the source remain separated in the output.