Astro: How to Set Up More Powerful HTML Minification (in 31 Seconds)

Published on Mar 17, 2026, filed under development, html, performance, optimization. (Share this post, e.g., on Mastodon.)

You’re running an Astro site—and want to speed it up and minify your HTML (and inline CSS, JS, and SVG)?

HTML Minifier Next (HMN) gets you more effective results than the setup Astro ships with (at least when testing against Astro 6.0.4).

It takes just two steps to set up HMN, which you can customize further afterwards:

1. Install

Install HMN in your project (as a dev dependency):

npm i -D html-minifier-next

2. Configure

Add the following to your Astro configuration (astro.config.js or similar):

// Close to other imports:
import { readFileSync, writeFileSync, readdirSync } from 'fs';
import { join } from 'path';
import { fileURLToPath } from 'url';
import { minify } from 'html-minifier-next';

// Before `defineConfig`:
function htmlMinifier() {
  return {
    name: 'html-minifier-next',
    hooks: {
      'astro:build:done': async ({ dir }) => {
        const distDir = fileURLToPath(dir);
        const files = readdirSync(distDir, { recursive: true, encoding: 'utf-8' })
          .filter(f => f.endsWith('.html'))
          .map(f => join(distDir, f));
        for (const file of files) {
          const minified = await minify(readFileSync(file, 'utf-8'), {
            preset: 'comprehensive'
            // Options: https://github.com/j9t/html-minifier-next?tab=readme-ov-file#options-quick-reference
          });
          writeFileSync(file, minified);
        }
      }
    }
  };
}

// In `defineConfig` block:
integrations: [htmlMinifier()],

And that’s it.

The configuration uses HMN’s “comprehensive” preset for a pretty competitive result, but you can switch to the “conservative” preset or fully customize minification.

Then, does this take 31 seconds? Contrary to me timing this with Eleventy, I don’t know—this time, I’m just making up the number 😉

Jonas Geiler provides a wrapper with astro-html-minifier-next. I didn’t try it—I wanted to develop a better feeling for Astro and for setting up HMN in an Astro project—, but maybe you like that solution, too!

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma). Stay in touch.