#frontend #opensource #webdevelopment #html

HTML Optimization: a standard config for HTMLMinifier

Minify all the things

HTML minification is useful to decrease payload size and with that improve performance. As a specialist for HTML and CSS optimization I’ve in many places argued that HTML minification is critical and should go as far as to omit all optional tags and quotes. While, likewise personally speaking, such practice would benefit each developer, it’s at least something to do automatically.

At sum.cumo, we don’t require our frontend team to manually optimize all code, and omit everything optional. We take the automation route and use our tooling for that, and in the case of HTML, we like to employ HTMLMinifier (npm). Here I like to briefly share the configuration we’ve decided on, to centrally feed our projects with:

collapseInlineTagWhitespace: true,
collapseWhitespace: true,
conservativeCollapse: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true

(You find an explanation for all these values in the HTMLMinifier documentation.)

As you can tell, this configuration is pretty aggressive in that it removes a lot of code. We’ve found, however, that these options, and HTMLMinifier in general, are robust and work very well reducing respective projects’ payload.

Opting not to discuss each individual setting, I would like to leave that option open, however: If there’s interest in going over all the different HTMLMinifier settings and how they are (or are not) useful, let us know on Twitter. This also applies if there’s interest in us sharing and open-sourcing this configuration’s internal Node module, which we install in the projects that use HTMLMinifier (it’s pretty basic, but we would look into sharing it).