Cut the File Size with These Three HTML Minification Tools

By Maria Antonietta Perna

HTML optimization tools

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Although there isn’t clear agreement on the benefits of HTML minification, if you test your website on Google’s PageSpeed Insights, part of the answer you could get as a result is that you should minify HTML, CSS and JavaScript.

Minifying a resource means getting rid of redundant elements, that is, elements which the browser doesn’t need in order to process the document correctly.

Applying this concept to a HTML document, minification could include things like:

  • Stripping HTML comments, as well as comments inside inline CSS and JavaScript code
  • Removing white space both in HTML code and inline CSS and JavaScript
  • Removing unnecessary quotes, empty attributes, etc.
  • Getting rid of CDATA sections

These operations contribute to keep the file size down, but also make it easier to keep the code clean and maintainable.

GZipping Versus Minifying Resources

Is still worth minifying HTML if you’re using GZip?

One of the arguments against HTML minification is that, gzipping HTML pages already gets rid of white space and reduces file size. This makes minification quite useless.

Firstly, it’s important to point out that the two operations are not the same and don’t achieve the same results.

The result of minification creates a file made of perfectly valid code that the browser can parse and execute, just like the unminified version of the same file. On the other hand,

Gzipping finds all repetitive strings and replaces them with pointers to the first instance of that string. … On the web, gzipping is done directly by your server. … The server compresses the file and sends it across the network like that. The browser receives the file and unzipped it before using it.

Chris Coyer on CSS Tricks

That said, using both techniques can make you save a few bytes. For instance, in Effects of GZipping vs. minifying HTML files, Mads Kristensen discusses a small experiment consisting of both minifying and gzipping the HTML files of four popular websites, i.e., amazon.com, cnn.com, twitter.com and xbox.com. The results show that by undergoing both gzipping and minification, the file size decreases by 9-16%.

The following tools will automate the minification process for you.

Minimize

HTML minification tools: Minimize

Minimize is an open source, server-side HTML5 minifier based on the node-htmlparser2.

This tool:

  • Can minify HTML5 code (not older HTML drafts, no inline PHP code or template files)
  • It’s highly configurable
  • Can distinguish conditional IE comments

… and more. You can visit the project page on GitHub for more details.

Will Peavy’s HTML Minifier

HTML minification tools: Will Peavy HTML Minifier

The HTML Minifier is an online tool for HTML minification built with PHP.

To use it, paste your HTML in the textbox, including any CSS and JavaScript you might have added to the markup, and click the Minify button.

To ensure scripts still work after minification, Peavy recommends you terminate JavaScript statements with a semicolon (;) and use multiline comments (/* */)

Kangax HTML Minifier

HTML minification tools: Kangax HTML Minifier

Kangax HTML Minifier is a JavaScript-based HTML minifier with super powers.

These are just some of this tool’s capabilities:

  • Removing HTML comments
  • Removing comments from styles and scripts
  • Removing CDATA sections
  • Removing attributes’ quotes
  • Removing unnecessary attributes
  • Removing blank attributes
  • Validating input through HTMLLint

You can configure each option according to your own needs.

To learn more about HTML Minifier, you’ll find all the info in Kangax’s Experimenting with HTML Minifier and Perfection Kills.

Conclusion

Although not so common as minifying CSS and JavaScript, HTML minification is part of Google’s PageSpeed Insights recommendations. Whether it’s worth doing it remains an open question.

In this article, I’ve listed three tools that can help you shave a few bytes off of your web pages by automating a number of HTML minification tasks.

What about you, do you think minifying HTML is a good idea? What’s your favorite HTML minification tool?

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now
Login or Create Account to Comment
Login Create Account