Eleventy: How to Set Up Effective HTML Minification (in 24 Seconds)

Published on Nov 28, 2025 (updated Jan 18, 2026), filed under development, html, optimization. (Share this post, e.g., on Mastodon.)

You’re running an Eleventy site and want to minify your HTML (and any inline CSS and JS)?

Here’s what you’d need to do, to minify your output using HTML Minifier Next (HMN) (which does well compared with other minifiers):

1. Install

Install HTML Minifier Next in your project (as a dev dependency):

npm i -D html-minifier-next

2. Configure

Add the following to your Eleventy configuration (.eleventy.js or eleventy.config.js):

// Close to other imports:
import { minify } from 'html-minifier-next';

// Near other `eleventyConfig` functions:
eleventyConfig.addTransform('html-minifier-next', async function(content) {
  if (this.page.outputPath && this.page.outputPath.endsWith('.html')) {
    let minified = await minify(content, {
      preset: 'comprehensive',
      // Options: https://github.com/j9t/html-minifier-next?tab=readme-ov-file#options-quick-reference
    });
    return minified;
  }
  return content;
});

And that’s it for a first setup.

The config uses HMN’s brand-new presets, whose config is very similar to the config I use in my Eleventy projects. HMN comes with many more options, however, for you to tailor and optimize your HTML output.

If you use Eleventy’s bundle plugin with bundleHtmlContentFromSelector: "style", it will extract inline CSS before the minifier runs, leaving empty <style> elements. Either disable that option or use external style sheets instead of inline styles.

As for those 24 seconds—yes, that’s exactly how long it took me to add HMN to the Grease starter, one of three Eleventy projects I tested with. (This isn’t a contest, just a playful way to indicate setting up HTML minification may be done swiftly.)

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 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).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Please share feedback: Interpret charitably, keep it friendly, but do be critical.)