How to minify HTML

What minifying removes

Minification deletes characters a browser does not need. For HTML that means whitespace, line breaks and comments — everything that exists so a person can read the file.

• Indentation and newlines between tags. The biggest win, and completely safe.
• Runs of spaces inside text, collapsed to one. Browsers already render them as one.
• Comments, unless you keep them deliberately.
• Whitespace around block boundaries, where no rendered space is implied.

More aggressive minifiers go further: stripping optional closing tags, removing quotes from attribute values that do not need them, dropping type="text/javascript". Each of those saves a handful of bytes and adds a small risk. The minifier on this site stops before them.

Do it in the build, not by hand

Minified HTML is a build artefact. It should be produced automatically from a readable source file and never edited directly. The moment you start hand-maintaining a minified file, you have lost more time than minification will ever save you.

With a bundler or site generator

const htmlmin = require("html-minifier-terser");

module.exports = function (config) {
  config.addTransform("htmlmin", function (content, path) {
    if (!path || !path.endsWith(".html")) return content;
    return htmlmin.minify(content, {
      collapseWhitespace: true,
      removeComments: true,
      minifyCSS: true,
      minifyJS: true
    });
  });
};

Astro, Next.js and Nuxt minify their HTML output by default in production builds. Vite does it through its plugin ecosystem. If you are using a modern framework, check before adding anything — you may already have it.

From the command line

npx html-minifier-terser --collapse-whitespace --remove-comments \
  --minify-css --minify-js -o dist/index.html src/index.html

Enable compression first

If you only do one thing for page weight, make it this. Gzip or brotli on your server will shrink HTML by roughly 80 percent. Minification, applied afterwards, adds a few more percent. The ordering of effort should match the ordering of effect.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

gzip on;
gzip_types text/html text/css application/javascript;
gzip_min_length 256;

Most managed hosts and every CDN do this for you already. Check with your browser's network panel: look for content-encoding: gzip or br on the response.

The inline-whitespace trap

Test by minifying, opening the result in a browser and comparing side by side with the original. It takes a minute and catches the only failure mode that actually matters.

When not to minify

Files you are still editing. Obviously, but worth saying — keep the source readable and minify on the way out.

Files in version control. A minified file has no useful diff. Commit the source; build the artefact.

HTML email, without testing. Email clients are stricter and stranger than browsers, and nested-table layouts are exactly the kind that depend on inline whitespace. Gmail clips messages over about 102 KB, so minifying genuinely helps — but send yourself a test before you send it to a list.

Anything with conditional comments. If you still support Outlook's Word rendering engine through <!--[if mso]> blocks, stripping comments deletes them. Keep comments on.

Questions about this

Keep reading