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

Published on Nov 28, 2025, filed under development, html, optimization. (Share this post, e.g. on Mastodon or on Bluesky.)

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 htmlmin from 'html-minifier-next';

…

// Near other `eleventyConfig` functions:
eleventyConfig.addTransform('htmlmin', async function(content) {
  if (this.page.outputPath && this.page.outputPath.endsWith('.html')) {
    let minified = await htmlmin.minify(content, {
      // Options: https://github.com/j9t/html-minifier-next?tab=readme-ov-file#options-quick-reference
      collapseBooleanAttributes: true,
      collapseWhitespace: true,
      decodeEntities: true,
      minifyCSS: true,
      minifyJS: true,
      preventAttributesEscaping: true,
      removeComments: true,
      removeOptionalTags: true,
      removeRedundantAttributes: true,
    });
    return minified;
  }
  return content;
});

And that’s it for a first setup.

The config is very similar to the config I use in my Eleventy projects, but HMN comes with many more options (and, brand-new, also presets! ^*) for you to optimize your HTML.

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

^* These allow to simplify the configuration above by, say, choosing preset: conservative and overwriting or adding settings as needed.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for companies you use every day 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 in philosophy. Here on meiert.com I share some of my experiences and perspectives. (I value you being critical, interpreting charitably, and giving feedback.)