How to use the HTML Minifier
- Paste HTML or open an
.htmlfile. - Choose what to remove: whitespace, comments, default
typeattributes and redundant boolean values. - Keep inline CSS and JavaScript minification on to shrink
<style>and<script>blocks too. - Copy or download the minified HTML and compare the sizes above.
What does HTML minification remove?
Hand-written and generated HTML contains indentation, line breaks and comments that browsers ignore. Removing them reduces the bytes the browser has to download before it can start rendering. Typical savings are 10–25 % of the raw HTML, more for templates with deep indentation or long comments.
| Before | After |
|---|---|
<!-- nav --> | (removed) |
<button disabled="disabled"> | <button disabled> |
<script type="text/javascript"> | <script> |
class=" card featured " | class="card featured" |
Indentation between <li> items | (removed) |
Safe whitespace handling
Whitespace in HTML is not always meaningless: the space in <strong>Free</strong> plan separates two words. This minifier keeps a single space between inline elements and text, removes whitespace only around block-level elements such as div, p, li and section, and never touches the content of <pre> and <textarea>, where spacing is part of the content.
What is kept
- Conditional comments (
<!--[if IE]>) and comments starting with<!--!. - Attribute quotes — removing them saves little and can break attribute values with spaces.
- Scripts with non-JavaScript types such as templates; JSON-LD is minified as JSON.
Minify HTML in production
For a build pipeline, use your framework’s built-in minifier or html-minifier-terser. For one-off pages, email templates, CMS embeds and Webflow custom code, this tool is quicker. After minifying, make sure your server compresses the HTML too — check it with the website compression test. To make minified HTML readable again, use the HTML formatter.
Tools that pair well with the HTML Minifier
- JavaScript Minifier — Paste JavaScript and get production-ready minified code from Terser — the same engine used by Vite, webpack and Rollup — with real before/after and gzipped sizes.
- SVG Optimizer — Clean up SVGs exported from Figma, Illustrator, Inkscape or Sketch with SVGO — and check the before/after preview to make sure the icon still looks right.
- Gzip Compress & Decompress — Compress text or any file with gzip, zlib or raw deflate — or paste Base64 / open a .gz file to decompress it.
- Brotli Compress & Decompress — Compress text or files with Brotli at any quality from 0 to 11, decompress .br data, and compare the result against gzip — all locally in your browser.
Frequently asked questions
Does minifying HTML improve SEO?
Can minification break my layout?
Does it minify CSS and JavaScript inside the HTML?
<style> blocks and style attributes are minified, and <script> blocks are minified with Terser. If a script has a syntax error, it is left unchanged.