HTML Minifier

About the HTML Minifier

HTML pages carry a lot of bytes that only matter to the people who edit them: indentation, line breaks, comments and attributes that browsers already assume. The HTML Minifier removes them and gives you a smaller page that renders the same way.

It collapses runs of whitespace, drops the spaces next to block elements such as <div> and <li>, and keeps a single space between inline elements, so "Save 20% on all" still reads correctly. Comments go, except the conditional comments old Internet Explorer pages rely on. Redundant attributes are shortened: type="text/javascript" disappears and checked="checked" becomes checked.

Inline <style> blocks are minified with csso and inline scripts with Terser, and JSON-LD is compacted. Content inside <pre> and <textarea> is never touched. Everything runs in your browser, so your page never leaves your device.

How to use it

1. Add your HTMLPaste a page or a fragment, drop an .html file onto the box, or use Open file. Sample loads a small page with a style block, a script and a <pre> block.
2. Choose what to removeRemove comments, Collapse whitespace and Remove redundant attributes are all on by default. Turn off any you want to keep.
3. Decide on inline codeMinify inline CSS and Minify inline JavaScript shrink the contents of <style> and <script> blocks. The minifiers load the first time they are needed.
4. Check the status lineIt shows the percentage saved, the size before and after, and the gzipped size. If an inline block could not be read, it says so and leaves that block as it was.
5. Copy or downloadCopy the minified HTML or download it as page.min.html.

Key features

Examples

Minifying the sample page

The Sample button loads a 681-byte page with indentation, a comment, a style block, a script, extra spaces and a <pre> block. With all options on, the status line reads 37% smaller and 681 B → 429 B · 307 B gzipped. The start of the result:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Spring sale</title><style>.banner{color:red;padding:10px}</style></head>...

The comment and type="text/css" are gone, the CSS is minified, and " Spring sale " lost its outer spaces. The paragraph keeps its inline spacing:

<p>Save <strong>20%</strong> on all <em>garden</em> tools.</p><input type="checkbox" checked disabled>

The script becomes const greeting="Welcome back";document.title=greeting+" | "+document.title;, and the text inside <pre> keeps every space and line break.

What each option saves on the sample

Even with every option off, extra spaces and line breaks inside tags are tidied, so <div class="banner" followed by a line break and id="top"> becomes <div class="banner" id="top">.

Inline and block spacing

This HTML:

<p>Hello   <a href="/x">world</a> <b>!</b></p>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>

becomes 77 bytes instead of 87:

<p>Hello <a href="/x">world</a> <b>!</b></p><ul><li>One</li><li>Two</li></ul>

The three spaces after Hello became one, the space before <b> stays because both elements are inline, and the line breaks between the list items are gone.

Structured data

A JSON-LD block with line breaks and indentation is compacted to one line, which search engines read exactly the same:

<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization"}</script>

When an inline block cannot be read

For <script>let x = ;</script> the script is left as it is, and the status line ends with 1 inline block left unchanged (could not be parsed). The rest of the page is still minified. The same happens to a <style> block that uses CSS nesting, because the CSS minifier would otherwise drop the nested rules.

Tips

• Minify the HTML that your site actually sends, such as a saved page or a build output, and keep the readable source for editing.
• Compare the gzipped sizes before and after. Servers usually compress HTML, so the real saving is smaller than the raw percentage suggests, but it is still worth having on large pages.
• If inline elements look glued together after minifying, check for CSS that changes display, such as a <span> styled as a block. The minifier decides spacing by tag name, not by your CSS.
• Leave "Remove comments" off when a comment matters, for example a marker another tool looks for. Conditional comments for old Internet Explorer are kept either way.
• To read a minified page from another site, paste it into the HTML Beautifier to get it indented again.

Common mistakes and limits

• Minifying templatesTemplates with server or framework code, such as PHP, Blade, Jinja or Handlebars tags, can break when whitespace or attributes change. Minify the rendered HTML instead.
• Relying on spaces between blocksWhitespace next to block elements like <div>, <li> or <td> is removed. If a design depends on that space, as with display: inline-block on those tags, add the gap with CSS margins instead.
• Expecting the HTML to be checkedThe minifier does not validate HTML. Missing closing tags or wrong nesting go through as they are.
• Expecting broken inline code to be fixedAn inline script or style with a syntax error is copied unchanged. Look for the "left unchanged" note in the status line and fix the code.
• Minifying the same file twice by handMinified HTML is hard to edit. Keep the original, make changes there and minify again.

Frequently asked questions