HTML Minifier
Every byte of HTML a visitor downloads is a byte the browser waits on before it can build the page, and most markup carries slack a build step should clear away, from indentation and comments to whitespace between tags. This minifier removes it in one paste. Because real pages embed styles and scripts, it also shrinks the CSS inside <style> and the JavaScript inside <script>, so the whole document comes out smaller, with the original, minified, and gzip sizes shown side by side so the saving is never a guess. Three levels decide how far the markup rewriting goes, and anything the engine cannot compress safely is listed under the output and left as it stands rather than mangled. It all runs locally in your browser.
Overview
A minifier is only worth using if you can trust the output and see the gain. This one is built around both: compression you can ship without checking it by hand, and the numbers that show it was worth doing.
- 01
Three levels of compression
Safe collapses each run of whitespace to a single space and rewrites no tag or attribute, so even an element restyled to display: inline renders identically. Standard removes the whitespace between tags along with the attributes HTML5 already implies. Maximum drops default and empty attributes, shortens the doctype, and sorts attributes and class names so the file compresses better. Attribute quotes stay on even here: taking them off saves half a percent after gzip and produces markup that some formatters refuse to open.
- 02
Embedded CSS and JS minified too
A real page is rarely just markup. The CSS inside every
<style>block and the JavaScript inside every<script>block are minified in the same step, so you do not have to run them through separate tools to squeeze out the bytes. - 03
Nothing is damaged in silence
The CSS engine deletes nested rules, and it reads a declaration with a missing colon as a selector, which swallows the rule after it. Both happen without a word. Every
<style>block is checked first, and any block that would come back damaged is left unminified and listed under the output, rules intact. - 04
Comments removed, conditionals kept
HTML comments are stripped by default, since they never reach the rendered page, while conditional comments are preserved because they carry meaning. Keep all comments with one toggle when you need them for debugging.
- 05
A size breakdown you can trust
Original, minified, and gzip sizes update as you type on both sides of the panel, next to the exact percentage saved. The gzip figure is the one that matches what travels over the wire.
- 06
Copy, download, or upload
Paste from the clipboard, open an .html file of up to 2 MB from disk, then copy the result or save it: page.html comes back as page.min.html. The whole loop takes seconds and never touches a server.
How to use
Go from a readable page to a production-ready, minimal one in a few steps, with the saving in front of you the whole time.
- 01
Paste your HTML into the input panel, or use Upload to load an .html file straight from disk.
- 02
Pick a level. Standard is the everyday choice; drop to Safe when a layout leans on the exact spacing, or go to Maximum when you want every last byte.
- 03
Leave Minify CSS and Minify JS on to shrink the embedded code, keep comments only if you need them, and read anything the tool lists as skipped.
- 04
Check the breakdown beside the output, then copy the minified HTML or download it as a .min.html file and wire it into the page or build step that serves your production markup.
Details
The details that make the output safe to ship and quick to trust.
- Built on html-minifier-terser, which parses the markup and minifies embedded CSS and JS with mature optimizers rather than by blind text substitution.
- The CSS engine is told never to follow an @import. A stylesheet you reference by URL stays a reference, and no request leaves your browser.
- Every
<style>block is checked before the engine sees it, so nested CSS and unreadable declarations are reported and preserved instead of quietly disappearing. - The gzip size is measured with the compression built into your browser, so the figure reflects what a real server would send.
- Nothing is uploaded or logged. The HTML you paste, including unreleased work, stays in your browser and is gone when you close the tab.
Use cases
Where shaving HTML down to its essentials pays off.
-
Shipping a faster page
Smaller markup reaches the browser sooner and unblocks parsing, which helps First Contentful Paint and the Core Web Vitals that search engines weigh.
-
A build step without a bundler
On a static site, a landing page, or an email template where you are not running a bundler, paste the HTML here for the same compression a pipeline would give you.
-
Inlining a critical-path document
When you ship a single self-contained HTML file with its CSS and JS inline, minifying all three together is the difference between a lean payload and a bloated one.
-
Trimming generated markup
Output from a templating engine, a CMS, or an email builder often ships unminified. Run it through here to recover the bytes before it reaches your users.
See also
Need to read it instead of shrink it? The HTML Beautifier expands minified markup back into a readable document, and for stylesheets on their own the CSS Minifier compresses CSS the same way.
What minifying HTML really does
Minifying is not obfuscation, and it is not the same as gzip compression. It removes characters a browser does not need while keeping the rendered result identical. Here is what goes, and why it is safe.
-
Whitespace between tags
The indentation and line breaks that make markup readable are mostly ignored by the browser, so they are collapsed. The exceptions are whitespace inside pre and textarea, and the single spaces between inline elements that can affect layout, which are kept.
-
Comments
HTML comments are written for people and never render, so they are removed in full. Conditional comments are the exception, since they target specific browsers, and they are preserved.
-
The embedded code
Styles and scripts live inside the HTML, so a minifier that only touched the markup would leave most of the weight in place. Minifying the CSS in
<style>and the JS in<script>is what makes a real page genuinely smaller. It is also where a minifier can go wrong, because those are two more languages it has to parse before it can shorten anything. -
It is safe, not lossy
Minification only removes what the browser does not need to render the page the same way. It is not obfuscation: the markup still works identically, it is just no longer formatted for a human to read.
-
Why gzip is the number that counts
Servers send HTML compressed with gzip or brotli, and those already collapse repeated whitespace. Minifying still helps, because it removes what compression cannot and hands the compressor cleaner input, but you should judge the gain by the gzip size rather than the raw bytes.
-
Minify for production, keep the source readable
Minified HTML is painful to edit, so it belongs in your build output, not your repository. Keep the readable template as your source, and minify as the last step before it ships.
Best practices
Habits that keep minified HTML both small and free of surprises.
- Minify as the last step of your build and deploy the result. Never hand-edit minified HTML or commit it as your source of truth.
- Measure the gain by the gzip figure, since that is what the server actually transfers. A large raw saving can shrink to little once compression is applied.
- Read the skipped list before you ship. Anything listed there is byte for byte what you pasted, which is safe, but it also means those bytes were never compressed.
- Stay on Standard unless you have a reason to move. Safe is the one to pick when a layout leans on the space between inline elements; Maximum is worth a check against your stylesheets, because dropping
type="text"breaks an input[type="text"]selector. - Serve the minified file with gzip or brotli enabled and a sensible cache lifetime. Minification and transport compression stack, they do not replace each other.
Limitations
What this tool does, and what it leaves to other steps.
- It minifies a single HTML document along with the CSS and JS embedded in it. It does not fetch linked stylesheets, scripts, or images, and it never follows an @import.
- It will not transpile modern JS, add vendor prefixes to the CSS, or down-level anything for old browsers. Pair it with a build tool for that.
- Attribute names come back lowercased, which is correct for HTML but wrong for a framework template: Angular’s *ngIf becomes *ngif. Handlebars, Jinja, and ERB are not HTML on their own either, so minify the rendered output rather than the template source.
- Markup the parser cannot read at all, such as an unterminated tag or comment, stops the run and is reported. Embedded code it cannot read does not stop anything: it is listed as skipped and passed through untouched, so the document you get back is always valid.
FAQ
Common questions about minifying HTML, what it changes, and when to use it.
Does minifying change how my page renders?
No. Minification only removes characters the browser does not need, such as the whitespace between tags and comments that never render. Whitespace that affects layout, like the text inside pre and the spacing between inline elements, is preserved, so the rendered page looks identical before and after. If a layout depends on spacing in a way that worries you, the Safe level collapses each run of whitespace to a single space and never removes one.
Which level should I use?
Standard for almost everything: it removes the whitespace between tags and the attributes HTML5 already implies, which is what a normal build step does. Safe is the cautious option when spacing matters and you would rather not think about it. Maximum squeezes out the last few percent by dropping default and empty attributes and sorting attributes and class names, so it is worth a quick check that nothing selects on what it removed.
Does it minify the CSS and JavaScript inside my HTML?
Yes. The CSS inside every <style> block and the JavaScript inside every <script> block are minified along with the markup, each with a toggle so you can turn them off. Inline style attributes and event handlers go through the same engines. On a real page the embedded code is often most of the weight, so this is where much of the saving comes from.
What does "skipped, not minified" mean?
It means a piece of embedded code was left unminified, with every rule or statement intact, and it says why. The CSS engine cannot read nested rules and deletes them, and a declaration with a missing colon makes it lose the rule that follows, so any <style> block with either problem is preserved instead of minified. A script the JavaScript engine cannot parse, including anything using top-level await, is passed through the same way. Nothing is lost; those bytes are simply not compressed.
What is the difference between minifying and gzipping?
They work together. Minifying edits the HTML itself, removing content a compressor cannot know is unnecessary. Gzip or brotli then compresses whatever you send, collapsing repetition on the wire. You want both: minify first for the cleanest input, then let the server compress it. Judge the real gain by the gzip figure shown here.
How much smaller will my HTML get?
It depends on how the source was written. Generously formatted markup with large inline styles and scripts can drop substantially, while already-tight pages shave less. Once gzip is in play the percentage shrinks, because compression had already recovered much of the whitespace, which is why the gzip number is the honest one.
Will it download the stylesheets my page imports?
No. The CSS engine is capable of following an @import and pulling the target in, and it is explicitly told not to. An @import stays in the output exactly as you wrote it, and no request is made for it, so pasting an internal page never sends anything to the network.
Can I minify a template file like Handlebars or Jinja?
Not directly. This tool minifies standard HTML, which is what a browser receives. Template syntax such as {{ }} or {% %} is not valid HTML on its own, and attribute names are lowercased on the way out, so a directive like *ngIf comes back as *ngif. Minify the rendered output instead, or use a tool built for your template language.
Should I commit the minified HTML to my repository?
No. Minified HTML is a build artifact, not source. Commit the readable template or document that you and your teammates edit, and generate the minified file as the final step before it is served. Checking in minified output makes reviews hard to read and merges painful.
Is my HTML uploaded anywhere?
No. Everything runs in your browser. The HTML you paste, any file you upload, and the result are processed locally, never transmitted or stored, and disappear the moment you close the tab, so even private or unreleased markup is safe.
Related tools
Keep going with the rest of the data and format toolkit.