Tinker Tools

HTML Minifier Instantly

Minify HTML by removing whitespace, comments, and optional tags. Reduce file size instantly in your browser.

Minifier

How it works

1. Paste Your HTML

Paste your HTML code into the input area. The tool accepts any valid HTML including full pages, snippets, and templates.

Any HTML

2. Choose Options

Select which optimizations to apply: remove comments, collapse whitespace, strip whitespace between tags, or remove optional closing tags.

Real-time

3. Copy the Result

Copy the minified HTML with one click. Check the statistics to see how much space you saved in bytes and percentage.

One Click

What is HTML Minification?

HTML minification is the process of removing unnecessary characters from HTML source code without changing how the browser renders the page. This includes stripping whitespace between tags, removing comments, collapsing boolean attributes, removing optional closing tags, and eliminating redundant attribute quotes. A typical HTML document carries a surprising amount of dead weight -- indentation for readability, comments left by developers, default attribute values the browser already assumes, and closing tags that the HTML specification marks as optional. Minification strips all of it, leaving you with the smallest possible markup that still produces the same visual and functional result.

The size savings from HTML minification vary depending on how the original document is written. A heavily commented, well-indented HTML file with verbose attribute syntax might shrink by 15-25%. A more compact file might only drop 5-10%. These percentages sound modest compared to CSS or JavaScript minification, but they apply to a resource that blocks page rendering -- the browser cannot start painting until it has parsed the HTML. Every byte saved in the HTML document directly reduces the time to first render. On slow connections -- mobile networks in emerging markets, congested public WiFi -- those milliseconds add up.

Minification and gzip compression are complementary, not redundant. People sometimes argue that since the server gzips HTML before sending it, minification is pointless because gzip already removes repetition. This is wrong. Gzip works by replacing repeated byte sequences with references. Minification eliminates bytes that gzip would have to encode in the first place. A minified-then-gzipped file is always smaller than a gzipped-only file. Tests on real-world pages consistently show a 2-5% size reduction even after gzip when minification is applied first. At scale -- millions of page views per day -- that difference translates into measurable bandwidth savings and faster load times.

Key Features and Benefits

  • Whitespace Removal Between Tags — The minifier collapses all whitespace between HTML tags into the minimum needed to preserve rendering. Runs of spaces, tabs, and newlines between block-level elements are removed entirely. Whitespace between inline elements is collapsed to a single space to maintain text flow. This single optimization typically accounts for the majority of size savings because indentation alone can add kilobytes to a large page with deeply nested DOM structures.
  • Comment Stripping — HTML comments -- the blocks wrapped in <!-- and --> -- serve no purpose in production. They are development artifacts: TODO notes, section markers, attribution notices, disabled code. The minifier removes all of them. A common gotcha is conditional comments used for old Internet Explorer versions (<!--[if IE 9]>). If you still need those -- though IE support is increasingly rare -- the minifier should be configured to preserve them while stripping regular comments.
  • Optional Tag Omission — The HTML specification explicitly states that certain closing tags are optional. You can omit </li>, </p>, </td>, </th>, </tr>, </thead>, </tbody>, and </tfoot> when the parser can infer the end of the element from context. The minifier removes these optional tags safely. This is not a hack or a browser quirk -- it is part of the HTML living standard. Removing optional tags can save several hundred bytes on table-heavy or list-heavy pages.
  • Attribute Quote Removal — HTML attribute values only require quotes when they contain spaces, equals signs, or certain other special characters. An attribute like class=container is valid without quotes. The minifier identifies safe cases and removes unnecessary quotes. Each pair of removed quotes saves two bytes -- trivial in isolation, but on a page with hundreds of elements and thousands of attributes, it accumulates. The minifier never removes quotes where doing so would change the parsing behavior.
  • Boolean Attribute Collapsing — HTML boolean attributes like disabled, checked, readonly, and required do not need a value. Writing disabled="disabled" is equivalent to just writing disabled. The minifier collapses these verbose forms to their shortest valid representation. This is purely a size optimization -- the behavior is identical in every browser. You see the verbose form most often in code generated by server-side frameworks that produce attribute="attribute" pairs by default.
  • Inline CSS and JavaScript Minification — A good HTML minifier does not stop at the markup. It also minifies inline style blocks and script blocks embedded in the page. CSS within style tags gets whitespace and comment removal. JavaScript within script tags gets basic minification. This means you do not need a separate pipeline step for inline resources -- the HTML minifier handles the entire document in a single pass, including its embedded stylesheets and scripts.

How to Minify HTML

  1. 1

    Prepare Your HTML Source

    Start with the HTML file you want to minify. This should be your final production-ready markup -- all content is in place, all links are correct, and all inline styles and scripts are finalized. Minification is a build step, not an editing step. You should always keep the original, unminified source in version control and generate the minified output as part of your deployment pipeline. Never edit minified HTML directly -- it is unreadable and error-prone.

  2. 2

    Choose Your Minification Settings

    Most HTML minifiers offer configurable options. Decide which optimizations to enable: whitespace collapsing (almost always safe), comment removal (safe unless you rely on conditional comments), optional tag removal (safe per the spec but some teams prefer explicit closing tags), attribute quote removal (safe in most cases but can confuse syntax highlighters), and inline CSS/JS minification (safe if your inline code does not rely on whitespace). Start with the defaults and adjust if you notice rendering differences.

  3. 3

    Run the Minification

    Paste your HTML into the tool or run the minifier from your build script. Popular command-line tools include html-minifier-terser, which is the actively maintained fork of the original html-minifier package. For build tool integration, webpack uses html-webpack-plugin with minification options, Vite minifies HTML automatically in production builds, and Gulp has gulp-htmlmin. The minification process is fast -- even a 500 KB HTML document processes in under a second because the operations are simple string transformations without deep parsing.

  4. 4

    Verify the Output

    Open the minified HTML in a browser and compare it visually against the original. Pay attention to text spacing -- if inline elements like span or a tags lose the whitespace between them, text will run together. Check form elements to make sure boolean attributes still work. Verify that JavaScript relying on innerHTML or DOM structure has not been broken by removed optional tags. Run your automated test suite if you have one. Visual regression testing tools like Percy or Chromatic catch subtle layout shifts that manual inspection might miss.

  5. 5

    Integrate Into Your Build Pipeline

    Once you have confirmed the minifier settings work for your project, add minification to your CI/CD pipeline so it runs automatically on every build. This ensures every deployment gets minified HTML without manual intervention. Set up a size budget in your pipeline -- alert if the minified HTML exceeds a threshold, which might indicate bloat from new features. Track the minified size over time to catch gradual growth before it becomes a performance problem.

Expert Tips for HTML Minification

Pre-rendered single-page applications produce some of the largest HTML documents because the server sends the full initial DOM as a string. An SSR React or Next.js page can easily generate 200-500 KB of raw HTML, much of it containing serialized state in a script tag and deeply nested div structures with long class names from CSS-in-JS libraries. Minifying this output is one of the highest-impact optimizations you can apply because the HTML is the critical resource that must arrive before the browser can show anything. Pair minification with streaming server rendering for the best result -- the browser starts parsing minified chunks as they arrive rather than waiting for the entire document.

Be careful with whitespace removal in pre-formatted content. The pre and code elements, as well as textarea, rely on whitespace being preserved exactly as written. A minifier that aggressively collapses whitespace inside these elements will break code formatting, poetry, ASCII art, and form default values. The html-minifier-terser tool handles this by default -- it detects pre, code, textarea, and other whitespace-sensitive elements and leaves their content untouched. If you are using a different tool, test these elements specifically. Also watch out for CSS white-space: pre and white-space: pre-wrap on arbitrary elements that the minifier does not know about.

The optional tag omission feature is technically safe, but it can cause confusion during debugging. If you inspect the DOM in browser DevTools after the browser has parsed minified HTML with omitted closing tags, the tree structure looks exactly the same as it would with the tags present -- the browser infers them. However, if you view the page source and try to read the markup, the missing tags can make it harder to understand the nesting structure. This is a reasonable tradeoff for production code, but some teams disable this feature to keep the deployed HTML closer to the source they wrote. The size savings from omitting optional tags are usually small -- 1-3% -- so disabling it is fine if readability during production debugging is a priority.

Measure the real-world impact of minification with synthetic and field performance metrics. Use Lighthouse or WebPageTest to measure the before-and-after size of the HTML document and the difference in First Contentful Paint and Largest Contentful Paint. Then check your Real User Monitoring data to see if the change shows up in p75 or p90 load times. On a fast connection, minification might shave 10 milliseconds -- barely noticeable. On a 3G connection with 400ms RTT, saving 10 KB of HTML can save 200-300 milliseconds because the HTML fits in fewer TCP round trips. The performance impact is inversely proportional to connection speed, which means minification disproportionately helps the users who need it most.

Related Tools

CSS Minifier

Minify inline CSS within your HTML

JS Minifier

Minify inline JavaScript alongside HTML

HTML Encoder

Encode entities before or after minification

HTML minification is one part of a broader frontend optimization strategy. The HTML document references CSS and JavaScript resources that benefit from their own minification pipelines. After minifying your HTML, you will typically minify the external stylesheets and scripts it loads, encode any special characters that need entity representation, and configure your server to gzip or Brotli-compress the final output. Each step removes a different category of waste, and together they produce the leanest possible payload for your users.

Frequently Asked Questions

Recommended Tools

JSON Formatter

Validate, beautify, and minify your JSON data with tree view and syntax highlighting.

URL Encoder

Quickly encode or decode URL components, parameters, and special characters safely.

Base64 Converter

Convert plain text or binary data to Base64 and back. Support for Data URIs included.