HTML minifiers: grunt-contrib-htmlmin vs grunt-minify-html

HTML minifiers: grunt-contrib-htmlmin vs grunt-minify-html

You need to minify HTML: to improve page load on your site, let your users access your content when they need to without a long wait, and use less bandwidth when you serve your hosted site. The easiest, robust way to do so is to minify during the build process, and Grunt is the best tool out there to make your build process a breeze. But once you set up Grunt, where do you get from there to having your minified HTML? You can use one of two Grunt plugins we recommend.

grunt-contrib-html

grunt-contrib-htmlmin is most popular Grunt plugin out there to minimize HTML and comes with tons of options, including removeComments and collapseWhitespace. It is your perfect minifier if you have a standard DOM, and even works very well with a JavaScript framework like AngularJS. The problem with grunt-contrib-htmlmin is that - underneath the surface - it uses regular expressions to parse HTML tags - and that's not what a proper parser should do. That approach is prone to errors that do break the build when used with advanced frameworks like Google Polymer. So if you're building a cutting edge site, or a groundbreaking webapp, grunt-contrib-htmlmin is very likely not going to work for you. How do we fix this? Introducing: grunt-minify-html.

grunt-minify-html

grunt-minify-html is way more advanced than the more popular aforementioned competitor, as it's based on an actual HTML parser. The output follows HTML5 standards and produces a smaller HTML file. As a minor downside, there are less options to configure it, comments - to remove HTML comments - and empty - to get rid of empty attributes - are the only ones we ever use. And do results corroborate the premises? Yes. grunt-minify-html parsed all our data-binding in your Polymer elements perfectly, and reduced the payload of our own inspire.blufra.me. Then we asked ourselves if it was worth only using our new tool for the more complex HTML documents, and if we'd rather stick to the more popular grunt-contrib-htmlmin for our standard HTML. So we put it to the test. grunt-minify-html beat grunt-contrib-html by a few bytes on a standard HTML page. And a few bytes per page actually make a lot of difference. They make mobile experience smoother for our users, and they bring bandwidth costs down. So we are now using it everywhere, in every build process for any product. Here is actual CoffeeScript code from our Gruntfile.coffee:

minifyHtml:
  options:
    comments: true
  dist:
    files: [ {
      expand: true
      cwd: '<%= config.dist %>'
      src: 'index.html'
      dest: '<%= config.dist %>'
    } ]

And what did we learn?

The decision is now yours. If you are after a very popular Grunt plugin with loads of options and you aren't building a particularly fancy site, head over to grunt-contrib-htmlmin. If you instead like to be a trailblazer and have cutting edge HTML data-binding in DOM, go get grunt-minify-html, and let the fun begin.

Edoardo L'Astorina

Edoardo L'Astorina

Edoardo L'Astorina has 15 years of experience in software development. Edoardo has had a major role in the new Transport for London site and led the development of the new Royal Opera House site. Edoardo has developed sites and apps for Intuit, Stint, JPC, The Crocodile and Miura Edoardo started Blu Frame to help companies develop sites that stand out, load fast and are easy for users to access Edoardo is passionate about risotto, Terrence Malick movies, Oasis songs and rowing