DT Dev Tools

HTML Minifier

Minify HTML in your browser with html-minifier-terser: collapse whitespace, strip comments, minify inline CSS and JavaScript and compare file sizes.

πŸ”’ Runs entirely in your browser β€” nothing is uploaded

Drop an .html file here or click to browse β€” or paste markup below

Before: –After: –Saved: –
Advertisement

How HTML minification works

HTML minification removes everything a browser does not need to render a page: indentation and line breaks between tags, comments, redundant attribute values and default attributes. This tool uses html-minifier-terser, which parses your markup into tags and text, applies the selected optimizations and writes it back out. Collapse whitespace merges runs of spaces and removes whitespace between block-level elements while keeping the single spaces that separate inline text. Content inside <pre> and <textarea> is left untouched because whitespace matters there. Remove comments drops developer notes, and the inline minifiers shrink embedded <style> and <script> blocks with clean-css and Terser.

The size badges show the UTF-8 byte size of the input and output and the percentage saved. Hand-written templates with generous indentation often shrink by 15–30%, more when they contain large inline scripts or styles. Servers usually compress HTML again with gzip or Brotli, so the transfer saving is smaller than the raw number, but a smaller document still parses faster and keeps critical inline code compact.

Choosing the right options

Remove redundant attributes is a bundle of safe cleanups: it shortens boolean attributes such as disabled="disabled" to disabled, removes defaults like type="text" on inputs and type="text/javascript" on scripts, drops empty attributes and replaces long legacy doctypes with <!doctype html>. Remove optional tags omits closing tags such as </li>, </p> and </body> that the HTML specification allows browsers to infer. Remove attribute quotes drops quotes around values that do not need them. Both produce valid HTML, but they can surprise other tools that read your markup, so they are off by default.

Private by design

The minifier is loaded on demand and runs locally, so your templates, email markup and landing pages are never uploaded. That makes it handy for one-off jobs such as shrinking an HTML email, an embed snippet or a static page before pasting it into a CMS. If the parser reports an error, check for unclosed tags or stray angle brackets in the input. For production sites, keep minification in your build pipeline so the result is repeatable.

How to use

  1. Add your markupPaste HTML into the input or drop an .html file onto the drop zone.
  2. Choose optionsToggle whitespace collapsing, comment removal, inline CSS and JS minification and the more aggressive cleanups.
  3. MinifyClick Minify HTML to see the output with the size before, after and the percentage saved.
  4. Copy or downloadCopy the minified HTML or download it as a .min.html file.

Frequently asked questions

Which minifier does this use?
html-minifier-terser, a widely used HTML minifier that relies on Terser for inline JavaScript and clean-css for inline CSS. It runs entirely in your browser.
Can minification break my page?
The default options are safe for normal pages. Collapsing whitespace can remove a space between inline elements in rare layouts, and Remove optional tags or Remove attribute quotes produce valid but unusual HTML β€” test the result before deploying it.
Does it minify &lt;style&gt; and &lt;script&gt; blocks?
Yes. With Minify inline CSS and Minify inline JS enabled, the contents of <style> and <script> elements and style or event-handler attributes are minified too. External files referenced by URL are not fetched.
Are conditional comments kept?
Remove comments strips ordinary HTML comments, but Internet Explorer conditional comments are preserved. Turn the option off to keep every comment.
Advertisement