HTML Code Minification

Minification is the process of reducing file size by removing extra spaces, comments and crunching longer variable names. In development phase, often developers write comments, give meaningful variable names and spaces for readability and maintainability. However, when serving to end user, these things are not needed and can be avoided.

Remember, everything comes in bits and bytes. Avoiding code comments, spaces and smaller variable names means you are avoiding extra bytes to transmit to your end user. Even if we can reduce size by 10kb. For a million visitors, it means 10 gigabytes of bandwidth savings. This reduces your server costs, improves site loading speed and gives end user a better experience. Do you still needs to be convinced about the need for HTML Minification?!

HTML code Minification can be achieved in multiple ways. In this article, let us use an online tool to demonstrate this.

HTML Minification Using Online Minifier (Tooltot)

              This is a pretty straight forward way to minify HTML code. There are many online tools to minify, we have chosen Tooltot Minifier to demonstrate.

Go to Tooltot (https://www.tooltot.com/p/html-minifier.html), paste your HTML code and click Minify. That's it, you got your minified code! You can start using this minifed version in production. Often, people serve minified versions as yourfilename-min.html.

We can observe from the screenshot, the resulting code is 19.29% less in size. It varies based on your code.

Happy Minifying!!