Minifying an HTML page is the process of removing unnecessary characters or spaces from a web page. This does not change its display or functionality, and will improve the overall web page performance. The following article lists a few of the free tools that are available on the internet. The process of minifying HTML is similar to minifying/compacting CSS but there may be cases when you should not compress the HTML in order to preserve the intent of your HTML code.
Why should you minify HTML?
The central reason for minifying HTML is to improve performance by removing unnecessary characters and spaces within the HTML file. When you remove characters and spaces you are essentially making the overall file smaller. This in turn makes it quicker for the web server to load. One of the main examples of characters you can remove are the characters that make up a comment. It is considered good practice to provide comments within code for documentation. Make a copy of the file and save it in a backup folder or folder labeled “documentation” in order preserve comments that are in your code. Minify the file that will be loaded on the server. This will help to improve its importance.
When should you minify an HTML file?
If you find that your webpages are continually loading slowly, then one of the steps you can take is to look at the HTML code that make up your website. Remove unnecessary characters, spaces or comments to improve your websites loading times. The removal of these items must not affect the function or display of your website. Minifying HTML should only be of your steps in optimizing your website’s performance as it may not be a significant factor in making your website load faster. Optimizing the performance of your website may also involve minifying the CSS, setting up caching or other server-side actions.
When should I not minify my HTML code?
There are certain cases where removing spaces may cause in issue in items you are trying to display. A good example this is when you are using a <pre> tag where you are trying to present a block of code in a specific way. In these cases, you avoid removing the spaces so that the items you are trying to display appear properly. If you find that minifying the HTML affects the way your web page is appearing, then make sure not to compress that section of your code.
Examples of minifying HTML
<html>
<head>
<!– Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo –>
<title>Title of the document</title>
</head>
<!– Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus –>
<body>
<p>Content of the document</p>
<!– This unordered list explains…Mauris vitae tellus a sapien vulputate scelerisque. Suspendisse velit tortor, tincidunt in massa eu, facilisis placerat purus. Suspendisse pharetra gravida mauris at fringilla. Suspendisse scelerisque magna mattis nulla interdum, venenatis gravida nisi ornare. Proin malesuada vestibulum justo sed sagittis. Sed at imperdiet metus. Vestibulum non blandit enim. Nulla vehicula iaculis luctus. Fusce elementum luctus nisi hendrerit euismod. Aenean eu vestibulum arcu. Duis malesuada elit non tempus interdum. –>
<ul>
<li>Item #1</li> <!– Phasellus purus sapien, luctus ac orci et, dignissim ultricies lorem. Aenean libero augue, ornare at gravida in, tempor eu nulla. –>
<li>Item #2</li> <!– Phasellus purus sapien, luctus ac orci et, dignissim ultricies lorem. Aenean libero augue, ornare at gravida in, tempor eu nulla. –>
<li>Item #3</li> <!– Phasellus purus sapien, luctus ac orci et, dignissim ultricies lorem. Aenean libero augue, ornare at gravida in, tempor eu nulla. –>
</ul>
</body>
</html>
The code above shows a simple example of a web page with lots of unnecessary comments. When the comments and unnecessary spaces are removed, then code has been minified to make the file smaller. The same code is shown below:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>
</body>
</html>
The code above can be further compressed by removing the line breaks and spaces. Here’s how it will appear
Notice that the code then becomes one long line of text and can be much harder to read. This makes it harder for other developers to interpret, so it is good practice to keep a non-mnified copy of the file that that includes the developer comments. Although the file is compressed, it’s smaller size doesn’t produce a large improvement in loading time. In fact, file reductions will vary based on the size of the HTML document. However, if you are reducing a 10KB file down to 1KB file, the benefit of the compression becomes apparent in bandwidth savings when the file is loaded many times over a long period of time.
Free tools for Minifying HTML
There are a number of tools that you can use to minify your HTML code. We will only list a few of them. If you wish to use something different, simply use your favorite search engine to search for a tool that will meet your needs.
Hey guys Minify HTML also working good with InMotion WordPress
Thanks for your alternative recommendation. We appreciate your contribution to the Community!