HTML Minifier

What the HTML minifier does

This HTML minifier uses html-minifier-terser, a widely used HTML compressor, to remove everything the browser does not need: indentation, line breaks, comments, default attribute values and verbose syntax. Inline CSS is normally minified with clean-css and inline JavaScript with Terser. The result is a smaller document that renders the same, useful for static sites, email templates, embedded widgets and server-rendered pages.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...">
<html>
  <head>
    <!-- page styles -->
    <style type="text/css">
      .hero { margin: 0px; color: #ffffff; }
    </style>
  </head>
  <body>
    <form method="get">
      <input type="text" disabled="disabled" class="" value="">
      <button type="submit" id="go">Go</button>
    </form>
    <script type="text/javascript">
      function hello(name) { console.log('Hello ' + name); }
    </script>
  </body>
</html>

<!doctype html><html><head><style>.hero{margin:0;color:#fff}</style></head><body><form><input disabled> <button type="submit" id="go">Go</button></form><script>function hello(l){console.log("Hello "+l)}</script></body></html>

Here the minifier shortened the doctype to <!doctype html>, removed the comment, dropped type="text/css" and type="text/javascript" (defaults in HTML5), removed method="get" and type="text" (also defaults), collapsed disabled="disabled" to disabled, removed the empty class and value attributes, and minified the inline CSS and JavaScript. A single space between the input and the button survived because it is visible on the page.

Options explained

• Minify inline CSS – compresses <style> elements and style attributes. If a <style> block uses syntax clean-css cannot read (CSS nesting, @scope, @starting-style or a statement such as @layer a, b;), the <style> blocks of that document only lose their whitespace and comments, and style attributes are left as written.
• Minify inline JS – compresses <script> elements and event handler attributes with Terser. Turn it off if a script uses syntax that should not be touched, such as template placeholders.
• Remove attribute quotes (off by default) – drops quotes where HTML allows it: href="/about" becomes href=/about, while values with spaces like class="nav-link active" keep them. It is valid HTML, but some XML-based tools and email clients handle unquoted attributes poorly, so enable it only for pages served as regular HTML.

Whitespace: what is safe to remove

Collapsing whitespace is the biggest saving, but HTML whitespace is not always insignificant. The minifier keeps content inside <pre> and <textarea> unchanged, and between inline elements it reduces runs of spaces to a single space instead of removing them, so Hello <b>big</b> world becomes Hello <b>big</b> world. Layouts that rely on the gap created by whitespace between inline-block elements may still shift slightly; check such pages after minifying.

Common problems

• "Parse Error" – the markup has a broken tag, such as an unclosed <span. Find it with the HTML Validator.
• Template syntax ({{ }}, <?php ?>, {% %}) can be damaged if it appears inside inline scripts. Minify the rendered output instead, or disable inline JS minification.
• Conditional comments for old Internet Explorer (<!--[if IE]>) are kept, because they contain markup; ordinary comments are removed.

When to minify HTML

Minified HTML is also convenient when markup has to live inside a JSON value or a JavaScript string, where every line break would otherwise need escaping. For server-rendered pages, compression with gzip or Brotli already removes most of the cost of whitespace, so HTML minification typically saves a few extra percent. The gains are larger for pages with many comments or big inline scripts, for HTML embedded in JavaScript strings, and for email templates where message size limits matter. For development, keep the readable source and format it with the HTML Formatter. Minification runs in your browser; nothing is uploaded.