How to Tweak HTML Table To Speed Up Page Load Time



There are many ways to increase a web page's load speed. Using proper HTML table layout is one of them.

Visually faster

Using tables is the easiest way to layout a neat web page. Most of the time, different table layouts do not affect page load time itself. The effect exists in users visual experience that a page loads faster. That means the page looks like loading faster but in fact the total time used is still the same.

When a web browser displays a table, it looks for the opening <table> tag and closing </table>tag. Nothing will be rendered on the screen until the browser finds the closing </table> tag. As a result, if you put all your web content into a big table, no matter how many tables you have inside that big table, users will not be able to see anything displayed until browser reads all the way to that big table's </table> tag.

Therefore, we should avoid putting your entire page content into one big table. Here the entire page content typically includes page header such as banners, navigation menus, main content, and page footer such as copy right, company info, etc.

One big table has bad visual experience because users will initially see a blank screen when the page is first requested. The entire page will be displayed only when the browser sees the last </table> tag that closes the big table.

To correct this problem, adding different sections of a page into physically separated tables is the solution.

For example, page header can go to the first table. Then horizontal navigation menu into the second table. If you have left or right hand side vertical navigation menu, add them to the third table together with your main page content. The fourth table should contain page footer.

Here is what I mean.

Page header (company logo and/or banner image)

Horizontal navigation menu

Left hand side nav menu, banners, ... etc

Main Content

Right hand side nav menu, banners, ... etc

Page footer (company info, ... etc)

Below is the HTML source code. You may substitute some of the tables used by div css style sheet, but the basic concept remains.

<table cellspacing=0 cellpadding=0 width=300 border=0> <tbody> <tr> <td align=center valign=middle width=300 height=40 bgcolor="#e3e3e3"> <font size=1>Page header (company logo and/or banner image)</font> </td> </tr> </tbody> </table> <table cellspacing=0 cellpadding=0 width=300 border=0> <tbody> <tr> <td align=center width=300 height=20 bgcolor="#ccccff"> <font size=1>Horizontal navigation menu</font> </td> </tr> </tbody> </table> <table cellspacing=0 cellpadding=0 width=300 border=0> <tbody> <tr> <td valign=top width=50 height=150 bgcolor="#d9e4f2"> <font size=1> <br> <br>Left<br>hand<br>side<br>nav<br>menu, banners, ... <br>etc</font> </td> <td align=center valign=middle width=200 height=150 bgcolor="#eeeeee"> <font size=2>Main Content</font> </td> <td align=right valign=top width=50 height=150 bgcolor="#d9e4f2"> <font size=1> <br> <br>Right<br>hand<br>side<br>nav<br>menu, banners, ... <br>etc</font> </td> </tr> </tbody> </table> <table cellspacing=0 cellpadding=0 width=300 border=0> <tbody> <tr> <td align=center width=300 height=40 bgcolor="#e3e3e3"> <font size=1>Page footer (company info, ... etc)</font> </td> </tr> </tbody> </table>

In the above example, page header and horizontal navigation menu will be displayed entirely before the left/right and main content section. This is because they are in physically separated tables. If the main content takes a while to load, users will see something rather than blank screen.

Physically faster

To make a page loads faster, you should always add the table's width parameter and <tg> cell width parameter. If not, web browser needs to spend a little bit time to figure out these parameter values based on other information about a table.


Copyright© GeeksEngine.com

Other Recent Articles from the Webmaster Help category: 1. How to load IP addresses for countries into your MySQL database 2. How to set up your website connection details in FileZilla 3. The Difference Between Dynamic URLs and Static URLs 4. How To Find Out Everything You Want To Know About A Website 5. Robots Meta HTML Tag Syntax Explained 6. What If You Don't Want Your Pages To Be Crawled and Cached by Search Engines 7. What Robots.txt is And Search Engine Robots Explained