HTML Minifier
Minify HTML online to cut page weight. Collapse whitespace, remove comments, optional tags and empty attributes, and minify inline CSS and JS. Shows bytes saved.
How to use HTML Minifier
- 1Paste HTML or open an .html file with Minify selected.
- 2Leave the safe defaults on, or open More options to remove optional tags, attribute quotes and empty attributes.
- 3Copy or download the minified HTML and check the bytes saved; switch Mode to Format or Validate if you need them.
What makes it better
- Collapses whitespace and removes comments by default
- Minifies CSS in style tags and JavaScript in script tags
- Optional: remove optional end tags, attribute quotes and empty attributes
- Shows bytes before and after and the percentage saved
- Format and Validate modes on the same page
About HTML Minifier
The HTML Minifier runs html-minifier-terser in your browser to remove whitespace, comments and other bytes a browser does not need. Toggles cover optional end tags, attribute quotes, empty attributes and the CSS and JavaScript embedded in the page, and the result shows bytes before and after with the percentage saved. The same page can also format or validate HTML through the Mode switch.
Common uses
- Reduce the size of a static landing page or email template before you upload it.
- Shrink an HTML snippet that must fit into a field with a character limit.
- Compare how much of a page's weight is markup, style and script by switching the inline toggles.
- Produce a compact build output for a hand-written site that has no bundler.
Example
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pricing</title>
<style>
.top {
margin: 0 auto;
padding: 16px;
}
</style>
</head>
<body>
<!-- Site header -->
<header class="top">
<h1>Simple pricing</h1>
<p>
Pay only for what you use.
<strong>No contracts.</strong>
</p>
</header>
<script>
function greet(name) {
console.log("Hello, " + name);
}
greet("visitor");
</script>
</body>
</html>
Result
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Pricing</title><style>.top{margin:0 auto;padding:16px}</style></head><body><header class="top"><h1>Simple pricing</h1><p>Pay only for what you use. <strong>No contracts.</strong></p></header><script>function greet(e){console.log("Hello, "+e)}greet("visitor")</script></body></html>Good to know
- Removing optional tags and attribute quotes is valid HTML but can confuse older tools and some templating engines, so those toggles are off by default.
- Whitespace between inline elements can matter for layout; if the minified page looks different, turn Collapse whitespace off and compare.
- Inline JavaScript is compressed and names are shortened inside functions, so keep your original file as the source.
HTML Minifier FAQ
How much smaller does minifying HTML make a page?
Typically a few percent to a third, depending on how much whitespace, comments and inline code the file has. The tool shows the exact byte counts and percentage saved for your markup, and gzip or Brotli on your server saves more on top.
Which options are safe to switch on?
Collapsing whitespace, removing comments and minifying inline CSS and JS are the usual safe set and are on by default. Removing optional tags, attribute quotes and empty attributes is legal but changes more of the markup, so test the page after enabling them.
Will minifying HTML break my scripts or styles?
Inline CSS is handled by clean-css and inline JavaScript by terser, both of which keep behaviour the same. Conditional comments and server-side template tags can be lost, so do not minify files that still contain PHP, Jinja or similar syntax.
Can I get the formatted version back from minified HTML?
Yes. Switch Mode to Format on the same page and the markup is re-indented with Prettier. Comments that were removed cannot be restored, and the attribute quotes or tags you removed stay removed.
Does the HTML Minifier upload my page anywhere?
No upload happens. Everything runs in the browser tab, and the markup is only processed as text, never executed or rendered.