Webmaster Tools
How to Improve HTML Load Time
by  Ozioscilator,  mangt@portaldepot.net
Last Modification Date : Sat, March 22, 2008

Improve Load Time: Lets first ask the question, how important is your "html load time"? An estimated, 7 billion dollars, are lost every year, from websites that just don't load in a quick enough time. With the demand for exotic imagery, audio/video presentations and interactive javascripts, current day websites are allways faced with this loadtime challenge. If your webpage takes longer then 45 seconds to load, you will loose many fast paced viewers and even some search engine robots have a wate state. The real name of the game is "30 Seconds or Bust".

This article will show you 6 ways how to improve, webpage loadtime. Hopefully, with a little focus you can achieve a 30 second or less, html loadtime.

1. HTML Errors: A very important aspect of programming is that you write "error free code". Any HTML tags misplaced or open tags can be very costly when considering loading a page. If you have multiple errors you could loose as much as 5 - 10 seconds, when loading a webpage. And any javascript errors can be just as costly. Make sure you proof read all your code, to always double check, for any errors. Poorly written code can also cause a load factor. So always strive to learn better programming technique. You will find that HTML is sometimes a very open structure, that there may be more then one coding method that proves to be the fastest..

2. Elliminate White Space: Another drag on the servers is caused from overextended white space. Computers like reading exact code, any spaces, skips or blank lines can create a stressfull environment. So if you are hard pressed, to shorten your webpage load time, eliminate any extra white space and any "comment lines" when not needed.

3. Table-Layout = Fixed: The Table-Layout method is a most important way of fast loading any html content. We at Portal Depot use this method vigorously within our web pages. When you setup your page architecture, you might have code that resembles this structure.

<table width="90%">

<tr><td colspan="3">"header"</td></tr>

<tr><td>"column left"</td>

<td>"column middle"</td>

<td>"column right"</td></tr>

<tr><td colspan="3">"footer"</td></tr>

</table>

This table is considered a free floating system. Where the only stipulated width is for the entire table. The individual columns will size according to the content that is found within each td element or column. This table setup loads very slowly, even if you were to put width attributes within each td element, it will still load sequentially. However, the following code uses the style attribute "table-layout = fixed" to allow the servers to load the table, as a total entity, in a fixed format.

<table width="90%" style="table-layout:fixed">

<col width="30%" /><col width="60%" /><col width="30%" />

<tr><td colspan="3">"header"</td></tr>

<tr><td>"column left"</td>

<td>"column middle"</td>

<td>"column right"</td></tr>

<tr><td colspan="3">"footer"</td></tr>

</table>

You will notice that there are only two changes made, to the free floating code, to make the fixed format code. The first change is to setup inline style with the table-layout:fixed attribute. And the second change is to set the column width of each td element, <col width="30%" /><col width="60%" /><col width="30%" />. However, both of these changes must be incorporated to totally fix the table-layout. When you apply the fixed format to a table the servers will load the entire table as a fixed table-layout, instead of free floating the width sequentially, according to the amount of text written. This will improve your html loadtime significantly. However to accomodate your website content you might put in a separate table within each column and fix the table-layout, of the table, within each column. Whatever your architecture might be the "table-layout: fixed" method will certainly shorten html loadtime.

4. CSS to Minimize HTML Code: Another way of saving html load time is by using CSS style, in the form of either style sheets or header blocks. By incorporating CSS in header blocks, you can eliminate recursive html attributes. Instead of inputing, font charcteristics, within each html tag you could simply put any style attributes in a header style block and apply it to all similiar html elements. This is of course the beuty of CSS style, so you can set up font characteristics in one statement and have it applied to any and all similiar html elements. You then can make changes to one statement and it will be applied to the entire page. In using this practice you will also lessen the amount of html code, displayed on document. This will in turn shorten html loadtime.

One thing to remeber is that your page is made up of html code (in bytes), images and any javascripts. So you can use CSS to shorten the amount of html code being displayed, and once you get rid of any extraneous white space and comments, then you can focus on optimizing your images.

5. Image Optimization: There are three ways you can save HTML loadtime with images. The first is caching images. You should allways keep in mind that any images loaded from one page will be cached by your clients computer. So any further page viewing using these same images will automatically be loaded from cache. So if you think you are going to have a webpage loadtime problem, focus on reusing header images, menu bars, footer images ... for each page.

The second way to shorten, image loadtimes, is by optimizing each image. This process will lessen the amount of pixels used by each image. Of course you would have to decide if an image needs top quality resolution or not. You can decrease the pixel size of an image as much as 50, 60, even 70% without any critical distortion. On the front page of portaldepot.net we went from 42 seconds to 30 seconds by optimizing each image. It was a must to reach that 30 second or bust goal. Image optimization is the easiest way to shorten your html loadtime, especially with this image optimizer from DynamicDrive.com Image Optimizer . The image optimizer app can be applied to jpg's, gif and npg images.

The third way to load your images faster is with image preloading programs, usually in javascript or php formats. You may have to hunt for image preloading code and if and when you find this code you will have to experiment with your apps to meet qualifications.

6. PHP Include Files (For Reuse HTML): PHP Include files are soon becomming a new web development craze. With these files you can isolate any html or javascript code from a document page and then call on the include file to display the code. This method will shorten your html content saving valuable html loadtime. But the real magnatism for this method occurs when you have code like a menu or footer that is displayed on a multitude of pages. So if you decide to make any changes to the code you just have to make the change to the PHP Include file. To get a full report on how to make PHP Include files, for reuse html, check out our article at:

How to Make PHP Include Files For (Reuse HTML)

Check Your HTML Load Time: Here's a good link that thoroughly checks, HTML loadtime, and also analyzes your pages for intrinsic disorder.

Website Optimization.com


Refer This Page To A Friend Bookmark This Page
© Copyright 2007
Powered by Tech Systems.com


CreditCards (6K)