|
Load Time Tip:
Break Up Your Tables
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Want to improve the load time of your pages? Here's a powerful tip: split your page layout into multiple tables.
Fast-loading pages are critical for a Web site. Slow pages are consistently cited as the #1 complaint about the World Wide Web. Indeed, it's been estimated that the average Internet user spends eight hours a year waiting for Web pages to load. With the next Web site just a click away, you don't want to give your visitors any reason to bail out before your site loads.
While page load time depends heavily on the size of your page and its graphics, the HTML you use to design your page also has a big impact. While your HTML code doesn't actually change the time required to download the page, it affects the time required for the browser to render its contents.
The easiest way to improve the rendering time of your pages is to include WIDTH -- and possibly also HEIGHT - attributes on all your TABLE and TD tags. Doing that allows the browser to allocate space for the table in your page layout. If these attributes are missing, the browser has to wait for all the table contents to load before rendering any part of the table.
You can improve your HTML even more, though, if you split your page layout into multiple tables. To see what we mean, look at the following example. This shows a typical Web page layout, with a logo section, a navigation bar, and a content area.
| logo |
| nav bar |
content area |
The standard approach to creating this layout is to use a single large table. You give the table two rows, with the first row spanning two columns and storing the page logo. The second row is split into two columns, with the left storing the navigation bar, and the right storing the page content.
The HTML code for this table is shown below.
<table width=190 height=190>
<tr>
<td height=40 colspan=2
bgcolor="#FFCC00"> logo </td>
</tr>
<tr>
<td width=40 height=150
bgcolor="#FFFF00"> nav bar </td>
<td width=150
bgcolor="#FFFFCC"> content area </td>
</tr>
</table>
|
But there's no reason why this page has to be laid out using a single table. In fact, doing this can significantly slow its rendering time. Suppose that the content portion of the page contains a lot of text and graphics. With a single table, the browser will have to wait for the entire content section to load before it can display anything.
Suppose instead that we split our layout into three separate tables, as shown below.
Now the browser can render each part of the page as soon as it has all the data for that section. This allows the logo and navigation sections to display before all of the content section has been fully loaded.
The code for this split table layout is show below. Notice the use of the ALIGN="left" attribute to make the tables fit together properly. You may have to play around with different alignments and table sizes to get your layout to work the way you want.
<table cellspacing=0 width=190 height=40
bgcolor="#FFCC00">
<tr>
<td> table 1 - logo </td>
</tr>
</table>
<table align="left" cellspacing=0 width=40
height=150 bgcolor="#FFFF00">
<tr>
<td> table 2 - nav bar </td>
</tr>
</table>
<table align="left" cellspacing=0 width=150
height=150 bgcolor="#FFFFCC">
<tr>
<td> table 3 - content area </td>
</tr>
</table>
|
To see an example of this technique in action, look at CNet's Builder.com channel. Notice that page header displays well before the contents section below. By splitting their page this way, CNet shaved several seconds off the page's rendering time.
This approach to page building takes some getting used to, and you may have to be creative in thinking up ways to split your tables. But it's worth the effort, since this technique can have a dramatic impact on rendering times.
How fast does your site load? Give your site a tune-up and see.
|
