An HTML Optimizer’s Config for html-minifier
Published on December 20, 2019 (↻ September 20, 2023), filed under Web Development (RSS feed for all categories).
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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.
With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.
I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
Read More
Maybe of interest to you, too:
- Next: 2019
- Previous: On Codes of Conduct
- More under Web Development
- More from 2019
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.