HTML Minifier

About HTML Minifier

What Does the Minifier Remove?

Every transformation the minifier applies is safe and reversible (you can always re-format later with a prettifier). Here is what changes and what stays the same:

Transformation	Before	After	Safe?
HTML comments	<!-- navigation -->	(removed)	Yes - comments are for developers, not browsers
Excess whitespace	Multiple spaces, tabs, newlines between tags	Single space or nothing	Yes - browsers collapse whitespace in normal flow anyway
Boolean attributes	disabled="disabled"	disabled	Yes - both forms are valid HTML5 per the WHATWG spec
Whitespace between tags	</div> <div>	</div><div>	Yes for block-level elements (no visible difference)

The minifier does not touch attribute values, text content inside inline elements, or any structure of the DOM. The output is byte-for-byte equivalent in how the browser renders it.

What Is Preserved?

Content inside certain elements is whitespace-sensitive, so the minifier leaves it untouched:

Element	Why It Is Preserved
<pre>	Preformatted text depends on exact whitespace for layout
<script>	JavaScript syntax depends on precise formatting - use a dedicated JS minifier separately
<style>	CSS rules should be minified separately with a CSS minifier
<textarea>	Content is user-visible and whitespace is significant

String content inside attributes, text nodes with significant whitespace, and inline elements where spacing affects rendering (like consecutive <span> elements separated by a space) are handled carefully to avoid visual changes.

How Much File Size Can You Save?

The percentage saved depends on how the original HTML was written. Well-commented, deeply indented source code shrinks the most. Already-compact markup shrinks less, but there is almost always something to trim.

Source Type	Typical Reduction	Why
Hand-written HTML with comments	20-30%	Developer comments and consistent indentation add significant bytes
Template engine output (Jinja, EJS, Handlebars)	15-25%	Template engines often inject extra whitespace between blocks
CMS-generated HTML (WordPress, Drupal)	10-20%	Plugin comments, theme boilerplate, and extra line breaks
Already-optimised markup	5-10%	Minimal whitespace to remove, but boolean attributes often still have verbose form

Worked example: Take a 22 KB HTML document (the median page size according to HTTP Archive 2025 data). Hand-written with comments and 4-space indentation, minification at 25% savings removes about 5.5 KB. Served to 100,000 visitors per month, that saves roughly 550 MB of transfer. It is a small number per request, but it compounds over time and improves time-to-first-byte for every visitor.

HTML Minification in the Build Pipeline

This browser-based tool is useful for quick one-off minification - paste, minify, copy. For production sites, you will want minification integrated into your build process so it runs automatically on every deploy.

Approach	Tool / Package	Notes
Quick one-off	This tool	Paste, minify, copy the result
Node.js build step	html-minifier-terser	The most popular HTML minifier for Node, with over 12 million weekly npm downloads as of early 2026
Bundler plugin	Vite (vite-plugin-minify), webpack (html-webpack-plugin), esbuild	Runs automatically during the build
Server-side middleware	Express middleware, Nginx sub_filter, Apache mod_deflate	Minifies responses on the fly (adds CPU per request)
Static site generators	Astro, Next.js, Hugo, Eleventy	Most SSGs minify HTML output by default or via a flag

Note: Cloudflare deprecated its Auto Minify feature in August 2024. Their internal testing found that dynamically minifying HTML at the edge added latency that outweighed the file size savings for most sites. The recommendation now is to minify at build time instead.

Boolean Attributes in HTML5

The WHATWG HTML Living Standard defines certain attributes as boolean. Their presence on an element means "true" and their absence means "false". Writing the value is valid but redundant, and the minifier simplifies them to the short form:

Attribute	Verbose form (valid)	Short form (valid, preferred)	Common on
disabled	disabled="disabled"	disabled	buttons, inputs, selects, fieldsets
checked	checked="checked"	checked	checkboxes, radio buttons
required	required="required"	required	inputs, selects, textareas
readonly	readonly="readonly"	readonly	inputs, textareas
autofocus	autofocus="autofocus"	autofocus	any focusable element (one per page)
hidden	hidden="hidden"	hidden	any element
async	async="async"	async	script tags
defer	defer="defer"	defer	script tags
multiple	multiple="multiple"	multiple	select, file inputs
novalidate	novalidate="novalidate"	novalidate	form elements

The full HTML spec defines over 25 boolean attributes in total. The minifier handles all common ones. Note that "true" and "false" are not valid values for boolean attributes per the spec - the attribute should either be present (with an empty value or its own name) or absent entirely.

Minification vs Compression - How They Stack

Minification and compression are different techniques that complement each other. Minification reduces the source text itself. Compression (gzip or Brotli) encodes the byte stream for smaller transfer over the network. Using both together gives the best result.

Aspect	Minification	Gzip Compression	Brotli Compression
What it does	Removes unnecessary characters from the source	Compresses the byte stream using DEFLATE algorithm	Compresses using a dictionary-based algorithm optimised for web content
When it runs	Build time (once)	Per request (server compresses, browser decompresses)	Pre-compressed at build time or per request
Typical reduction	10-30%	60-70%	65-80% (15-25% smaller than gzip on text files)
CPU cost	None at runtime	Low per request	Higher per request (pre-compression preferred)
Browser support	N/A (source change)	Universal	All modern browsers (97%+ global support)

Worked example: Start with a 22 KB HTML document. Minification at 25% reduces it to 16.5 KB. Brotli compression at 75% then reduces that 16.5 KB to about 4.1 KB for transfer. Without minification, Brotli on the original 22 KB gives roughly 5.5 KB. The minified-then-compressed version saves about 1.4 KB extra per page load. That gap comes from removing the noise (comments, whitespace patterns) that even Brotli cannot fully eliminate.

Why Minification Still Matters in 2025 and Beyond

With HTTP compression handling the heavy lifting, some developers question whether HTML minification is still worth the effort. There are a few reasons it remains relevant:

Parse time, not just transfer size. Browsers must parse every byte of HTML to build the DOM. Fewer bytes means marginally faster parsing, which contributes to metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Google's Core Web Vitals guidelines recommend keeping LCP under 2.5 seconds, and every optimisation counts toward that target.

Edge caching and CDN efficiency. Smaller source documents mean smaller cache entries. For sites with thousands of pages cached at CDN edge nodes globally, the storage savings add up.

Mobile networks. The HTTP Archive's 2025 data shows the median mobile page weighs 2.56 MB. While HTML is a small fraction of that, mobile connections with high latency benefit from any reduction in document size, since HTML is the first resource the browser needs before it can start fetching CSS, JS, and images.

Build pipeline hygiene. Minification as a build step catches accidental debug comments, TODO notes, and developer annotations that should not ship to production. It serves as a safety net against leaking internal notes into the public source.

Common Mistakes When Minifying HTML

Minification is generally safe, but there are a few edge cases to watch for:

Mistake	What Goes Wrong	How to Avoid It
Removing conditional comments	IE conditional comments (<!--[if IE]>) get stripped, breaking IE-specific fallbacks	Not an issue for modern sites - IE support was dropped by Microsoft in June 2022
Collapsing whitespace in inline elements	Removing the space between two <span> or <a> tags can cause words to run together	This tool preserves spaces where inline elements depend on them
Minifying embedded SVG	SVG attribute values and path data can be whitespace-sensitive	Keep SVG in separate files or minify with an SVG-specific tool
Double-minifying	Running minification twice rarely saves extra bytes but adds build complexity	Run once during the build, not at both build time and CDN level
Forgetting pre/code blocks	Collapsing whitespace inside <pre> or <code> destroys formatting	This tool automatically preserves pre, script, style, and textarea content

Beyond HTML - Minifying the Full Stack

HTML is just one part of the frontend stack. For maximum performance, minify CSS and JavaScript as well. Each type of minification uses different techniques suited to the language:

Language	What Minification Does	Typical Savings	Tool
HTML	Removes comments, whitespace, simplifies attributes	10-30%	This tool or html-minifier-terser
CSS	Removes comments, whitespace, shortens colour codes, merges rules	15-40%	CSS Minifier
JavaScript	Removes comments, shortens variable names, dead code elimination	30-70%	JavaScript Minifier

JavaScript sees the largest savings because variable renaming (mangling) can dramatically shorten identifier names across the entire file. HTML and CSS cannot rename identifiers since classes, IDs, and tag names must remain intact.

For the reverse operation - making minified HTML readable again - use the HTML Prettifier. To encode special characters for safe embedding, try the HTML Entity Encoder/Decoder.

All processing happens entirely in your browser. Your HTML is never sent to any server, and nothing is stored after you close the page.

Sources

• WHATWG HTML Living Standard - Boolean attributes
• HTTP Archive - Page Weight report (median HTML size)
• web.dev - Largest Contentful Paint and Core Web Vitals
• npm - html-minifier-terser package
• IETF RFC 7932 - Brotli Compressed Data Format
• Can I Use - Brotli compression browser support