In a normal webpage there is a lot of whitespace. We put it there in form of tabs and carriage-returns in order to make the document more maintainable and easier to read. But it has its price in terms of adding to the overall weight of the document in kilobytes and it takes longer for the browser to render a page with a lot of whitespace.
By getting rid of all the extra whitespace in the HTML you can save up to ~25% of the total weight of the page in kilo bytes and make rendering in the browser faster. It's a double-win.
Minifying HTML has the same benefits as those for minifying CSS and JS:
Moreover, HTML frequently contains inline JS code (in < script > tags) and inline CSS (in < style > tags), so it is useful to minify these as well.
Guidelines:
This online HTML compression tool will save space in your HTML files and make them much smaller by doing the following:
Example:
Before
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <title>Google website optimization</title> <meta name='Description' content='Google website optimization, minify HTML'/> <meta name='Keywords' content='google, website, optimization, minify HTML'/> <meta http-equiv='content-type' content='text/html; charset-UTF-8'/> <link rel='stylesheet' href='http://www.domain.com/meni.css' type='text/css' media='all'> <link rel='shortcut icon' href='http://www.domain.com/favicon.ico'/> </head> <body> <ul> <li>lsit items</li> <li>lsit items</li> <li>lsit items</li> </ul> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <link href='link.html' title='Link'/>Link</a> <link href='link.html' title='Link'/>Link</a> <link href='link.html' title='Link'/>Link</a> text<br /> text<br /> text<br /> <script type='text/javascript' src='plugin1.js'></script> <script type='text/javascript' src='plugin2.js'></script> </body> </html>
After-Minifying the following HTML resources could reduce their size by 436B (43% reduction).
<!DOCTYPE html> <title>Google website optimization</title> <meta content='Google website optimization' name=Description> <meta content='google, website, optimization' name=Keywords> <meta charset-utf-8> <link href=meni.css media=all rel=stylesheet type=text/css> <link href=favicon.ico rel=shortcut icon> <body> <ul> <li>lsit items <li>lsit items <li>lsit items </ul> <p>paragraph <p>paragraph <p>paragraph <link href=link.html title=Link>Link</a> <link href=link.html title=Link>Link</a> <link href=link.html title=Link>Link</a> text<br> text<br> text<br> <script src=plugin1+2.js'></script>