Skip to content
HTMLFormat

HTML Minification: How It Works and When It's Worth It

HTML minification removes whitespace, comments, and redundant attributes. Learn the tools, techniques, and when the size savings actually matter.

By Editorial Team Updated
  • html
  • minification
  • web performance
  • optimization
  • build tools
HTML Minification: How It Works and When It's Worth It

HTML minification reduces file size by removing whitespace, comments, and optional attributes. Unlike CSS and JavaScript minification — which typically saves 20–80% — HTML minification usually delivers a smaller gain because HTML compresses extremely well with gzip and most pages are small. But for high-traffic sites, the cumulative savings are real.

What HTML minification does

  • Removes whitespace — spaces between tags, indentation, blank lines
  • Removes comments — <!-- ... --> blocks
  • Removes optional quotes — <div class=container> instead of <div class="container">
  • Removes optional closing tags — </li>, </p>, </td> are optional in HTML5
  • Removes default attribute values — <script type="text/javascript"> → <script>
  • Collapses boolean attributes — <input disabled="disabled"> → <input disabled>
  • Inlines CSS/JS — some minifiers collapse small <style> and <script> blocks

Before:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Page title -->
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <div class="container">
      <p>Hello, world!</p>
    </div>
  </body>
</html>

After:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My Page</title></head><body><div class="container"><p>Hello, world!</p></div></body></html>

How much does it save?

Page typeRaw HTMLAfter minifyAfter minify + gzip
Landing page20 KB17 KB (−15%)5 KB
Blog post50 KB42 KB (−16%)12 KB
App shell8 KB6.5 KB (−19%)2 KB
Large CMS page200 KB165 KB (−17%)35 KB

HTML minification saves ~15–20% of raw bytes. After gzip compression (which the server applies automatically), savings drop to 1–5% — because whitespace compresses extremely well. CSS and JS minification have much higher impact per-byte because they operate before gzip, on more repetitive content.

Conclusion: Minify HTML in production, but don’t agonize over it. Prioritize CSS/JS minification and compression first.

Tools

html-minifier-terser

npm install --save-dev html-minifier-terser

# CLI
npx html-minifier-terser --collapse-whitespace --remove-comments \
  --remove-optional-tags --remove-redundant-attributes \
  --minify-css true --minify-js true \
  -o output.html input.html

Configuration options:

const { minify } = require('html-minifier-terser');

const minified = await minify(htmlString, {
  collapseWhitespace: true,
  removeComments: true,
  removeOptionalTags: true,
  removeRedundantAttributes: true,
  useShortDoctype: true,
  minifyCSS: true,
  minifyJS: true,
});

webpack (via HtmlWebpackPlugin)

npm install --save-dev html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        minifyCSS: true,
        minifyJS: true,
      },
    }),
  ],
};

In mode: 'production', HtmlWebpackPlugin automatically enables sensible minification defaults.

Vite

Vite doesn’t minify HTML directly — it minifies inline <style> and <script> via esbuild, but not the HTML markup itself. Use a plugin:

npm install --save-dev vite-plugin-html
// vite.config.js
import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
    }),
  ],
});

Server-side: gzip + minimal HTML

For server-rendered pages (Node.js, Python, Ruby, PHP), enable gzip/Brotli compression on your web server instead of minifying templates:

# nginx.conf
gzip on;
gzip_types text/html;
brotli on;
brotli_types text/html;

This is often more practical than building an HTML minification step into your server framework.

What to be careful about

Whitespace-sensitive content: Removing whitespace between inline elements can change rendering. <strong>Hello</strong> <em>world</em> has a space between the words; removing it collapses them. Use collapseWhitespace: true with conservativeCollapse: true to preserve at least one space.

Optional tags: Removing optional closing tags (</p>, </li>) is valid HTML5 but can break some older browsers and HTML parsers. Test carefully.

JavaScript-generated content: If your HTML includes inline <script> blocks that emit HTML strings, minifying the outer HTML can break regex patterns in the script that expect whitespace.

Server-side template comments: Some frameworks use HTML comments as template markers. Removing all comments may break template inheritance or include syntax.

Format vs. minify

Need to do the reverse — take minified HTML and make it readable? Paste into htmlformat.io to add proper indentation and line breaks.

Related reading