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

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

This post originally used HTML Minifier Next. It was updated when HTML Minifier Next merged with and continued as HTML Minifier.

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

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

1. Install

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

npm i -D html-minifier

2. Configure

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

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

// Near other `eleventyConfig` functions:
eleventyConfig.addTransform('html-minifier', 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?tab=readme-ov-file#options-quick-reference
    });
    return minified;
  }
  return content;
});

And that’s it for a first setup.

The config uses HTML Minifier’s presets, whose config is very similar to the config I use in my Eleventy projects. HTML Minifier 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 HTML Minifier 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 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, dxsrc). You’ll like my work if you value principled, pragmatic problem-solving. Let’s connect.