An HTML Optimizer’s Config for html-minifier

Post from December 20, 2019 (↻ July 3, 2020), filed under Web Development. (Tweet this?)

Jad (Joubran) asked me about my configuration for html-minifier the other week, and in a hurry I pointed him to the config I had worked out for sum.cumo. In my own projects, however, I work with a different, more ambitious setup. It’s this, which I’m just going to throw over the fence:

collapseBooleanAttributes: true,
collapseInlineTagWhitespace: true,
collapseWhitespace: true,
conservativeCollapse: true,
decodeEntities: true,
includeAutoGeneratedTags: false,
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
preventAttributesEscaping: true,
processConditionalComments: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortAttributes: true,
sortClassName: true,
trimCustomFragments: true,
useShortDoctype: true

It translates to the following parameters in the command line:

--collapse-boolean-attributes
--collapse-inline-tag-whitespace --collapse-whitespace
--conservative-collapse --decode-entities --minify-css
--minify-js --minify-urls --no-include-auto-generated-tags
--prevent-attributes-escaping --process-conditional-comments
--remove-attribute-quotes --remove-comments --remove-empty-attributes
--remove-optional-tags --remove-redundant-attributes
--remove-script-type-attributes --remove-style-link-type-attributes
--sort-attributes --sort-class-name --trim-custom-fragments
--use-short-doctype

(As you can tell I’m assuming some knowledge about using html-minifier.)

Defensive Optimization

Occasionally I’d use a less aggressive, more “stable” configuration to optimize HTML code. The following setup, for example, I’ve recently used to “polish” the in good parts static files of meiert.com:

collapseBooleanAttributes: true,
decodeEntities: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true

For the command line:

--collapse-boolean-attributes --decode-entities
--remove-optional-tags --remove-redundant-attributes
--remove-script-type-attributes --remove-style-link-type-attributes

Here’s the full command I use in my structure, if that’s useful:

html-minifier --collapse-boolean-attributes --decode-entities
--remove-optional-tags --remove-redundant-attributes
--remove-script-type-attributes --remove-style-link-type-attributes
--file-ext html --input-dir meiert.com/ --output-dir meiert.com/

❧ I work with these setups in a mostly manual fashion because for some projects, like UITest.com or The World’s Highest Website, I intentionally manage everything manually, whereas in others, like HH Kaffee, it’s completely automated. For me this makes for a good mix for honing my skills while not wasting too much time when the code base is rather large.

When it comes to html-minifier, I think Juriy (aka kangax) has done extraordinary work with it. As I said in my optional HTML primer I consider it the best and most important tool for HTML optimization. Use it (while keeping your manual HTML skills sharp)!

About Me

I’m Jens Oliver Meiert, and I’m a web developer (engineering manager) and author. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.