My Tool Studio
Developer Tools·3 min read

How to Minify HTML Without Breaking the Page

Source HTML is full of indentation, line breaks and comments that help you and do nothing for the browser. The HTML Minifier removes comments and collapses whitespace, and it can shrink the CSS and JavaScript inside the page in the same pass. It then shows how many bytes you saved and an estimate of the gzipped size. It runs in your browser, so your markup is not uploaded.

1.24 KB{"a": 1,"b": 2}MINIFIED · 430 B{"a":1,"b":2,"c":3,"d":4}−64%

What the minifier removes

Comments and wasted whitespace.

The tool strips HTML comments, collapses runs of whitespace and removes spaces next to block elements such as div, p and li, where browsers ignore them. The line under the panes shows the original and minified size, the percent saved and a gzip estimate.

How much you save depends on the source. Pages with deep indentation, long comments and large inline scripts or styles shrink the most. Markup that is already compact changes much less.

A few optional steps go further. You can shorten boolean attributes such as disabled="disabled", remove redundant type attributes on script and style tags, drop empty class and style attributes, and remove quotes around simple attribute values. They are off by default, so tick only the ones your templates and scripts can live with.

The spaces it keeps

Careful where it matters.

A single space between words and inline tags like strong or a is kept, so text never runs together. Content inside pre, code and textarea is left exactly as written. Comments that start with [if, used by old Internet Explorer and many HTML email templates for Outlook, stay too.

It also leaves riskier tricks alone. Optional closing tags and default attribute values stay, and class and ID names are not renamed. Attribute quotes only go when you tick that option, and only around values with no spaces or special characters.

How to minify HTML

Three steps.

Keep your original file, because minified markup is hard to edit.

  • Paste a page, template or snippet into the Input pane, click Upload .html, or press Try sample.
  • Tick the options you want and click Minify, or turn on Live mode. Check the size line under the panes.
  • Click Copy, or Download to save a .min.html file for your build, email platform or CMS.

Minifying and page speed

A finishing step, not a fix.

Smaller HTML downloads sooner, which can help Largest Contentful Paint on slow connections. The gain is usually small next to images, fonts and scripts. If your server already uses gzip or Brotli, the transfer saving is smaller than the raw byte saving, which is why the gzip estimate is shown. Minifying also removes comments you may not want to publish.

Inline CSS, JavaScript and JSON-LD

One pass for the whole page.

With Minify inline CSS ticked, style blocks and style attributes go through the CSS minifier. With Minify inline JavaScript and JSON-LD ticked, script blocks go through Terser and JSON-LD is written on one line without changing its data. Both are on by default.

Scripts with another type, such as a template, are left alone. If a script cannot be parsed, a notice says so and that block stays as written, so a syntax error never breaks the rest of the page. For standalone files, the CSS Minifier and the JavaScript Minifier offer more options.

Minify, beautify or strip

Three different jobs.

Minifying keeps your markup and removes the padding. To make minified HTML readable again, click Beautify instead on this page or use the HTML Beautifier, which has more layout options. Removed comments cannot be recovered, so keep your source. If you want the text without any tags at all, Strip HTML Tags does that instead.

Try it now

Open HTML Minifier

The tool is one click away. No sign up, no upload, no payment.

Open HTML Minifier