Below is the classic Web page layout. You'll notice the branding across the top, navigation down the left side, and content in the remaining part of the page. It's pretty common for such pages to be constructed using a large table which defines the entire grid. With the branding, navigation, and content tables nested within the overall framework table, this can be a difficult page for the browser to render.
Branding
|
|
nav.
|
|
content content
content content
content content
content content
content content
content content
content content |
|
By making each table independent and concise, any browser can render each element as soon as it finishes reading it. So the first elements of the page appear faster, and the user can take advantage of the features at the top of the page immediately. (Remember, "perceived speed" and "visual accessibility".)
In the second example below, the branding table loads first on the page, followed by the navigation table. And, since we set the alignment of the navigation table to "left", the content loads next, positioned to the right. The page appears to load faster, and the user has something to see and use almost immediately.
Branding
|
|
align=
left
nav.
|
|
content content
content content
content content
content content
content content
content content
content content |
|
So, as with images, to get the best results with your tables, you need to play around with a variety of solutions until you get a layout that both you and your users can live with. It may seem like a lot of effort just to shave a few seconds off a page's load time, but competition for user loyalty is fierce, and those seconds can be all that stand between your visitors and the Back button.
next page»
Home
