DevSwitch.net

Resetting tool...

Back to Tools
{ }

HTML Minifier

Minify HTML code to reduce file size

Code Tools

Tip: Paste your HTML code and click Minify to compress it by removing whitespace and comments, reducing file size for faster loading.

Runs in your browser

Input HTML Code

Minify HTML without changing the page

Minify HTML online: paste a page or a template and press Minify Code. The HTML minifier removes comments and the whitespace a browser ignores, minifies the CSS in <style> blocks and the JavaScript in inline <script> blocks, and shows the size before and after. Copy the result or download it as an .html file.

The rule it follows is that the minified page must look exactly like the original. Whitespace that can show on screen stays, so the result is a little larger than an aggressive minifier would make it, but it never glues two words together.

Before and after

A small page, run through the tool: 269 bytes become 193, 28% smaller.

pricing.html
<!DOCTYPE html>
<html>
  <head>
    <!-- page title -->
    <title>Pricing</title>
  </head>
  <body>
    <div class="card">
      <h2>Starter</h2>
      <p>Only <strong>$5</strong> per month</p>
      <pre>
  plan: starter
  seats: 3</pre>
    </div>
  </body>
</html>
pricing.min.html
<!DOCTYPE html><html><head><title>Pricing</title></head><body><div class=card><h2>Starter</h2><p>Only <strong>$5</strong> per month</p><pre>
  plan: starter
  seats: 3</pre></div></body></html>

The comment and the indentation are gone and the quotes came off class=card. The spaces around <strong> stayed, because they show as spaces in the sentence, and the <pre> block kept its line breaks and indentation.

What it removes and what it keeps

Removed or shortened

  • Comments, except <!--[if IE]> conditional comments
  • Line breaks, indentation and runs of spaces, down to one space
  • Whitespace next to block tags such as <div>, <p> and <li>, where it never shows
  • Quotes around attribute values made only of letters, digits, hyphens and underscores
  • Whitespace and comments in <style> blocks
  • Inline JavaScript, compressed by Terser with shorter variable names

Kept as written

  • One space between inline elements such as <b>, <a> and <span>
  • Everything inside <pre> and <textarea>
  • Scripts loaded with src, and any inline script Terser can't parse
  • Every tag, attribute and closing tag, including optional ones like </li>
  • Attribute values with spaces, quotes or other symbols

Check these before you ship the result

  • Watch for

    Inline JavaScript that reads its own variable names

    What to do

    Terser renames local variables. Code that builds names as strings, or relies on a function's name, should be tested after minifying or moved to an external file.

  • Watch for

    Templates with Jinja, Blade or Handlebars tags

    What to do

    Template tags are plain text to the minifier, and whitespace inside them is collapsed too. Minify the rendered HTML a server sends, not the template file.

  • Watch for

    A layout that uses inline-block spacing

    What to do

    The one space between inline elements is kept, so gaps between inline-block items stay as they were. Gaps that came from several spaces or a line break shrink to that one space, which is also how browsers render them.

Need to read minified HTML?

The HTML Beautifier does the opposite and puts indentation and line breaks back.

HTML minifier questions

It depends on how much indentation and how many comments the file has: the example above lost 28%. The result shows the exact numbers for your file. Most servers also send HTML with gzip or brotli compression, which shrinks both versions further and narrows the gap; whether that matters for search is covered in does minifying HTML improve SEO.

Yes, the code in <style> and inline <script> blocks. Separate .css and .js files are not touched; use the CSS minifier and the JavaScript minifier for those.

No. Closing tags like </p> and </li>, boolean attributes and default type attributes stay, so the structure you wrote is the structure you get back.

Yes. A snippet, an email template or a component works the same way; nothing requires <html> or <body>.

No. Minifying, including Terser for inline scripts, runs in your browser.