Do you want to make your web pages load faster in your clients browser? Here is a simple tip that can do just that. For small web pages, you may not see a noticeable difference, but as the size of your pages grows, this tip will help improve the speed that your page loads in your clients web browser.
Background:
When a user requests a web page, the request is sent to the web server and the resulting page is transmitted back to the clients browser. Some factors in how long it takes for the web page to load in your browser is the size of the requested document, speed of the connection, network traffic across the Internet and sever speed.
In this article we are going to concentrate on the size of the documents. The more compact your pages are, the faster they can be transmitted to the client?s web browser and rendered. When your web browser receives and web page, it reads the HTML tags and formats the page accordingly. If a page has two consecutive spaces or more, the extra spaces are ignored. Now each one of those extra spaces takes up space in the HTML document, thus increasing the overall size of the document.
HTML Editors:
The average HTML editor does a nice job of formatting your HTML documents. Editors such as Front Page will add many extra spaces so that your HTML code looks nicely formatted, such as this:
<html>
<head>
<title>Test Message</title>
</head>
<body>
<p>This is the body </p>
</body>
</html>
The size of the above web page is 163 bytes in size. Its appearance is nice and readable to the human eye, and if you are manually editing a web page, it easier to edit. If you are using WYSIWYG editing, your HTML Editor will add these extra spaces for you. Now remember, when a web page is translated, it is done so by your web browser, and those extra spaces just increase the file size. The larger the file, the longer it takes for it to get from the web server to your web browser.
Solution:
If you look at the same code below, it will produce the same output on your web browser, but it's size is much smaller (91 bytes in size). The difference between these two pages, simple, we removed the extra, un-need spaces (note: these "extra spaces" are known as White Spaces).
<html><head><title>Test Message</title></head><body><p>This is the body</p></body></html>
An example of this type of optimization can be seen on Yahoo. Just go to these links and see for yourself:
http://www.yahoo.com
To view the source of these web pages, go to your browsers menu View | Page Source. As you can see by looking at the source of these pages, they are optimized with very little white space, and both samples above have a great deal of content, yet, they load extremely fast.
Conclusion:
By removing the unneeded white spaces on these pages, you have reduced the overall file size of the web page, meaning that you have less data to transmit over the Internet, and thus will improve the overall loading time of your web page in the clients web browser.