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

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

You’re running an Astro site and want to squeeze more out of 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 engineering manager for companies you use every day (like Google) and companies you’ve never heard of, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also with respect to politics and philosophy. Here on meiert.com I talk about some of my experiences and perspectives. (Please share feedback: Interpret charitably, but do be critical.)