Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Travis NPM version Downloads Issues

A Gatsby plugin for minify HTML files.

With this plugin, you can minify each HTML files (.html) at public directory.

NOTE: This plugin only generates output when run in production mode! To test your minify HTML, run: gatsby build && gatsby serve.

Table of Contents


Install with yarn:

yarn add gatsby-plugin-minify-html

Or install with npm:

npm install --save gatsby-plugin-minify-html


After installing gatsby-plugin-minify-html you can add it to the plugins array in your gatsby-config.js file:

module.exports = {
  plugins: ['gatsby-plugin-minify-html']

Note: if you are using gatsby-plugin-brotli, gatsby-plugin-zopfli, or other plugins look like used the Gatsby Node APIs onPostBuild make sure that it’s listed after this plugin:

// good
module.exports = {
  plugins: [

// bad
module.exports = {
  plugins: [
    'gatsby-plugin-brotli', // should be placed after 'gatsby-plugin-minify-html'


This plugin uses html-minifier-terser, to use html-minifier-terser options put the options at config: { }.

You can see the options of html-minifier-terser are enabled default by this plugin in the minify-html-plugin.js:

Name Type Default Description
collapseWhitespace Boolean true Collapse white space that contributes to text nodes in a document tree
minifyCSS Boolean true Minify CSS in style elements and style attributes
minifyJS Boolean true Minify JavaScript in script elements and event attributes
removeComments Boolean true Strip HTML comments
removeScriptTypeAttributes Boolean true Remove type="text/javascript" from script tags. Other type attribute values are left intact
removeStyleLinkTypeAttributes Boolean true Remove type="text/css" from style and link tags. Other type attribute values are left intact

See all options html-minifier-terser at Options Quick Reference.



module.exports = {
  plugins: [
      resolve: 'gatsby-plugin-minify-html',
      options: {
        debug: true, // debug optional, default false
        config: {
          // Enabled default by this plugin
          collapseWhitespace: false,
          minifyCSS: false,
          minifyJS: false,
          removeComments: false,
          removeScriptTypeAttributes: false,
          removeStyleLinkTypeAttributes: false,
          // Disabled default by html-minifier-terser
          sortAttributes: true,
          useShortDoctype: true

When option debug: true you can see a generate logs, example logs:

Minify HTML files at public directory, total HTML files 7:
public/404/index.html > reduced 0.20%.
public/index.html > reduced 0.19%.


If you would like to help out with some code, check the details.


Licensed under MIT.

© 2023 Gatsby, Inc.