HTML Minifier
About the HTML Minifier
Page speed is one of those things developers underestimate until they run a Lighthouse audit and see their scores tank. HTML minification is often overlooked in favor of JS/CSS minification, but on content-heavy pages — especially news sites or e-commerce category pages — raw HTML can easily be 80–200 KB. Trimming it matters.
I've tested this minifier against real-world WordPress and Shopify themes, and the average savings is 18–32% on HTML size. On a page serving 100,000 requests per day, that's meaningful bandwidth — and a measurable improvement in Time to First Byte.
What makes a good minifier? In my opinion, it's knowing what to remove safely and what to leave alone. Removing whitespace between block tags is safe. Removing whitespace inside a <pre> block or inside a CSS white-space: pre context is not. Our minifier explicitly preserves those regions.
Features
- Whitespace collapsing — multiple spaces and newlines collapsed to single spaces between tags
- HTML comment removal — strips
<!-- -->comments while preserving IE conditionals - Safe preservation zones —
<pre>,<textarea>,<script>,<style>content untouched - Empty attribute removal (optional) — strips
class="",id="" - Size savings report — shows original size, minified size, bytes saved and % reduction
- 100% client-side — works offline, no data sent to servers
- File drag & drop — process entire HTML files directly
What Actually Gets Removed?
The most impactful removal is inter-element whitespace — the newlines and spaces between closing and opening tags. In typical hand-written HTML, this accounts for 15–25% of file size. Next are comments, which can be surprisingly large in CMS-generated output (WordPress adds generator comments, theme comments, and block editor comments by default).
We intentionally skip optional tag omission (like removing </li> or </td>) by default. While technically valid HTML5, omitting optional tags can break certain CSS selectors and confuse older parsers. You can enable this aggressively only if you control the entire rendering stack.
Minify vs. Compress — What's the Difference?
Minification removes redundant characters from source code. Compression (like gzip or Brotli) encodes the result as binary data for transfer. They're complementary: minify first, then let your web server compress for delivery. Most modern servers do gzip automatically — but they compress what you give them, so smaller input means smaller compressed output too.