Updated: 2012-02-24
This is probably what every web developer knows. A very basic performance improvement for your HTML pages. You should remove all the white spaces and line breaks before you publish your html page. You can view the effect directly in a DOM inspector and this post touches the same.
Consider this example available from the HTML5 spec (pg 21):
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
Save it in a .html file and open in your favorite browser. Next view the DOM created by this file. You can use the DOM inspector available in most of the browsers today (launch with CTRL + SHIFT + I). You will see the below DOM tree created:
So a lot of extra text nodes are introduced in place of your white spaces and line breaks. So now lets strip the html off all the white spaces, comments and line breaks. Your html will look like this:
<!DOCTYPE html><html><head><title>Sample page</title></head><body><h1>Sample page</h1><p>This is a <a href="demo.html">simple</a> sample.</p></body></html>
Reload the page and view the DOM structure using the DOM Inspector. You will see:
Notice the difference? The DOM tree created has lesser elements. Serving the page is also faster.
Develop readable code, with all the best practices proper indentation, line breaks etc. But do strip the html page before you publish, its much smaller and faster this way. Same applies for your CSS and JS files.
This is probably what every web developer knows. A very basic performance improvement for your HTML pages. You should remove all the white spaces and line breaks before you publish your html page. You can view the effect directly in a DOM inspector and this post touches the same.
Consider this example available from the HTML5 spec (pg 21):
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
Save it in a .html file and open in your favorite browser. Next view the DOM created by this file. You can use the DOM inspector available in most of the browsers today (launch with CTRL + SHIFT + I). You will see the below DOM tree created:
 |
| DOM Tree with white spaces |
So a lot of extra text nodes are introduced in place of your white spaces and line breaks. So now lets strip the html off all the white spaces, comments and line breaks. Your html will look like this:
<!DOCTYPE html><html><head><title>Sample page</title></head><body><h1>Sample page</h1><p>This is a <a href="demo.html">simple</a> sample.</p></body></html>
Reload the page and view the DOM structure using the DOM Inspector. You will see:
 |
| DOM Tree without white spaces |
Notice the difference? The DOM tree created has lesser elements. Serving the page is also faster.
Develop readable code, with all the best practices proper indentation, line breaks etc. But do strip the html page before you publish, its much smaller and faster this way. Same applies for your CSS and JS files.
But again there is a trad off .What if user wants html to be in human readable form ? and i could see in most of the pages they are well formatted then y so much significance ? y they cant take care of this in html5 atleast ? :P
ReplyDeletekrish, only if you want the "view source" to show readable stuff. I would be ok with this trade off :)
ReplyDeleteI agree with Chetan
ReplyDeleteThanks Pinaki. Well Krish, if you want, you can still view the proper tree using a DOM inspector. But I feel better compress all your web files (html/js/css)
ReplyDelete