HTML Minifier

Why minify HTML in 2024+

HTML files contain whitespace, comments, and indentation that browsers ignore but that bloat file size and slow page loads. A typical authored HTML page is 20-40% larger than its minified equivalent. Multiplied across millions of page views, that's significant bandwidth savings, faster Time to First Byte (TTFB), and improved Core Web Vitals scores — all directly tied to SEO ranking. Modern build tools (Vite, Webpack, Astro, Next.js) minify HTML automatically; this tool fills the gap for hand-edited templates, email HTML, server-rendered pages, and one-off cleanup.

The economics are real. A site serving 1 million page views per month at 100 KB per page = 100 GB total bandwidth. Minifying to 70 KB = 70 GB — a 30% reduction. At typical CDN pricing ($0.05-0.10 per GB), that's $1.50-3.00 per month per million views. Cumulative savings across high-traffic sites are substantial.

What this minifier does — step by step

The tool runs a multi-step minification pipeline:

1. Preserve special blocks. <pre>, <textarea>, <script>, and <style> contents are stashed in placeholders before processing — their internal whitespace matters.
2. Strip HTML comments. <!-- comments --> are removed, but IE conditional comments like <!--[if IE]> are preserved for legacy support.
3. Collapse whitespace between tags. The pattern >\s+< becomes ><.
4. Collapse multi-space sequences. Multiple spaces in text content collapse to single spaces.
5. Trim leading/trailing whitespace.
6. Restore preserved blocks. Inject the original <pre>/<textarea>/etc. content back unchanged.

The tool reports size before/after and percent saved. For typical HTML, expect 20-40% reduction.

What gets preserved (and why)

<pre> — preformatted text. Whitespace inside is structural; collapsing it would change rendered output (code samples, ASCII art, formatted text).

<textarea> — initial textarea content. Users see this as the textarea's default value; collapsing whitespace would remove formatting they expect.

<script> — JavaScript content. JS doesn't generally need its whitespace, but our regex-based minifier doesn't safely handle JS minification (string literals, regex literals, template strings need careful handling). Use the javascript-minify tool separately for inline JS.

<style> — CSS content. Similarly, CSS minification has its own rules; use the css-minify tool separately.

What it doesn't do (use a real minifier for these)

This is a regex-based minifier — fast and safe for the common cases, but not as aggressive as full HTML parsers. Specifically, it doesn't:

• Remove optional closing tags. HTML5 allows omitting many closing tags (</p>, </li>) in many contexts. Real minifiers (html-minifier-terser) compute when this is safe.
• Remove redundant attribute quotes. <input type="text"> and <input type=text> are equivalent in HTML5; quotes can sometimes be omitted for short single-word attributes. Tricky to do safely.
• Shorten attribute values. type="text/javascript" is the default for <script>; can be omitted entirely. defer="defer" is the same as defer.
• Optimize boolean attributes. <input disabled="disabled"> can be just <input disabled>.
• Remove redundant type attributes. Most modern browsers default these correctly.
• Inline-minify CSS and JS. Use the css-minify and javascript-minify tools separately for those.

For maximum compression on production code, post-process this tool's output with html-minifier-terser (Node.js library). For most use cases, our regex minifier captures 80%+ of the savings with zero risk of breaking your HTML.

How to use the minifier

Paste your HTML into the input area. Click "Minify now" or toggle "Auto-minify on input" for live updates as you type. The output appears in the right panel. Below it, the savings badge shows percentage reduction. Buttons let you copy the minified output to clipboard or download as a file.

Common workflows

Email template optimization

Email templates are notorious for whitespace. Outlook, Gmail, and other clients preserve verbatim HTML they receive — extra whitespace adds bytes that count against per-message size limits. Minify before sending; deliverability and load times improve.

Inline critical CSS / HTML

For above-the-fold content, you can inline the critical HTML and CSS directly in <head>. The inlined content needs to be minified for size. Use this tool to compress before embedding.

Pre-deployment manual cleanup

Hand-edited static HTML pages benefit from minification before publishing. Run them through this tool, copy the result, deploy.

WordPress / CMS-generated HTML

Some CMSes don't minify automatically. Their output has lots of comments and whitespace. For sites where every byte matters, minify the saved HTML pages.

Performance budget testing

Before deploying a new template, minify it to see the bytes-saved figure. If the reduction is 30%+, the template has significant whitespace; if only 5-10%, the original was already tight.

Documentation snippets

HTML samples in technical documentation often include extra whitespace for readability. For "production-ready" snippets, minify them before publishing.

Performance impact: real numbers

A typical authored HTML page (1500 bytes of code, 4500 bytes of structure) might compress to 1200 bytes after our minification. Small absolute savings on a small page, but the multiplier matters: across hundreds of pages × thousands of visits, total savings reach gigabytes.

Modern HTTP responses also compress further via gzip or brotli (both serve compressed bytes on the wire). Minified HTML compresses 5-10% smaller than unminified HTML even after gzip — because gzip works better when it has less redundancy to find.

Privacy

Minification runs entirely in your browser via regex operations. Your HTML never reaches our server — we don't see, log, or share what you minify. Safe for proprietary template code, unreleased pages, internal documentation, or any HTML you don't want exposed to a third-party service. The PHP class behind this tool aborts 404 on any POST request as a defensive measure.

FAQ

Will my HTML still work after minification? Yes — minification only removes content browsers ignore (whitespace, comments). Your page's behavior, layout, and semantics are unchanged.

What if I have inline JavaScript or CSS? The tool preserves them unchanged. For minifying their contents, use the javascript-minify and css-minify tools separately.

Why is my minified output slightly different than I expected? Edge cases around comment-like patterns inside strings, conditional comments, and SVG content. If you see issues, send the input.

Can I minify the HTML of an entire website? Run each page through the tool. For automated bulk minification, integrate a real build tool (Webpack, Vite, etc.) into your deploy pipeline.