What is HTML minification?
HTML minification is the removal of characters that a browser does not need, so that the file is smaller and downloads sooner. The page is the same, but the source is harder for a person to read. You keep the readable version in your project and serve the minified one.
What can be removed safely
| What | Example | Safe? |
|---|---|---|
| Comments | <!-- menu --> | Yes, but keep conditional comments |
| Indentation and line breaks between block elements | </div> <div> | Yes |
| Repeated spaces in text | a b | Yes, they display as one space |
| Default attribute values | type="text/javascript" | Yes |
| Value of a boolean attribute | disabled="disabled" | Yes |
| Quotes around simple values | class=menu | Yes in HTML, not in XHTML |
| Slash on void tags | <br /> | Yes in HTML, not in XHTML |
| Optional closing tags | </li>, </p> | Valid, but a risk with little gain |
What must stay
- The space between inline elements. In <b>one</b> <i>two</i> the single space separates the words. Remove it and they run together.
- Everything inside pre and textarea, where spaces and line breaks are part of the content.
- Content styled with white-space: pre or pre-wrap, which a minifier cannot see unless it reads your CSS.
- Conditional comments for old browsers, which look like comments but are instructions.
- Scripts that are not JavaScript, such as templates, which have their own rules.
The whitespace trap
Whitespace between elements counts when those elements are displayed inline. If you use CSS such as display: inline-block on list items, a space between two items becomes a visible gap, and removing it closes the gap. A minifier that removes whitespace between block elements assumes that blocks are blocks. If your layout depends on the gaps, choose the conservative setting that only collapses runs of whitespace to one space.
Inline CSS and JavaScript
Pages often have style and script blocks, and those can be minified too: comments and spaces removed from CSS, and white space and comments removed from scripts. JavaScript needs extra care, because a line break can end a statement. A safe minifier keeps the line break where it matters. JSON data scripts, such as structured data, can be compacted by parsing and writing them again.
How much does it save?
The saving depends on the page. Templates with deep indentation and many comments can lose a fifth or more of their size, while compact HTML loses only a few percent. Measure with the gzip size, because servers compress HTML in transit and repeated spaces compress very well. Minifying still helps after gzip, but by less, so the gain is usually a few percent of the transferred size. Minification matters most for large pages and when many pages are served.
Minifying in your project
# html-minifier-terser
npx html-minifier-terser --collapse-whitespace --remove-comments \
--minify-css true --minify-js true input.html -o output.htmlStatic site generators and bundlers usually have a plugin that does this when you build. Do the minification at build time, and keep the unminified source in your repository. For a quick job on one page, use the HTML minifier on this site.
Compress as well
Turn on gzip or Brotli on your server. On Apache this is done with mod_deflate, which a few lines in the .htaccess file can enable for HTML, CSS and JavaScript. Compression gives a far larger saving than minification alone, and the two work together.
Check the result
- Open the minified page and compare it with the original, especially menus, lists and buttons that sit on one line.
- Test forms, because boolean attributes and empty values changed.
- Look for text that has run together at a former line break.
- Keep the readable source. To read minified code again, use the HTML beautifier or the HTML formatter.
Shrink your HTML now. Remove comments and extra whitespace right in your browser.