Web Design for Speed
Copyright 2006 Mark Nenadic
Have you ever noticed that some sites are much faster than
others. Or that some specific websites take a notably larger
amount of time to load than others? Have you ever seen a site
that begins by displaying only the background, and then shows
the text all at once several minutes later? This is the sign of
a poorly designed website, and you should make every effort to
omit this web design mistake from your own works.
Tables are frequently used among web designers for creating an
attractive and effective site. However, rarely do web designers
create new tables for the different segments of their content.
Instead, they simply divide the cells into which they will be
placing their content - the lazy road. While this may work very
well if there are very few images - or no images at all - on
your website, if this is not the case, then you will only be
convincing your visitors to leave before they've even touched
what your site has to offer them.
If your site has several images or is quite intense in its
graphic usage, consider using separate tables for dividing your
content. The reasons for this are many, but straightforward.
The first reason you should split your content among several
tables can be explained by understanding the way that internet
browsers read tables in a web site. Within a standard HTML site,
the browser will display the text and the images as they load.
However, when tables come into play, the browser will wait until
the entire page has loaded before any of its contents are
displayed within your visitor's internet browser. All that is
required is one large graphic to slow down the display of your
entire site from within fifteen seconds to over a minute.
Therefore, it is for precisely this reason that you should use
separate tables to split your graphics from other elements of
your site. Simply format the border, cell spacing, and cell
padding at 0 so that the multiple tables are not visible to your
viewers.
Using two or more tables is among the best ways to split up all
of the data on your web site. The first table may consist of
your logo and any header information that you wish to include in
your web design. A second table can be the actual content of the
site. If your page happens to be especially big, a third table
can be added, for example for a particularly large graphic or
other sizeable element.
This usually works quite well as the visitor will immediately be
able to see your logo and some of the options offered by your
web site as they wait for the rest of the page's content to load.
You can also choose to split up your content by creating tables
within your tables. This will allow the main table to load
first, displaying its own contents while the tables within it
continue to load. This makes the loading time of your page
notably faster, and still provides the viewer with something to
look at and read as the page's sub-tables continue to load.
As an additional note, to continue to save on loading time, it
is discouraged that you should use elements such as Java,
Shockwave, and ActiveX programs within your tables. Instead, use
JavaScript within your web page tables as it is much faster in
its loading and its execution.
These techniques are highly valued by web designers who
prioritize fast loading websites, and who understand how
important it is to get your content in front of your visitors as
quickly as possible in order to discourage them from going
elsewhere to find a faster site.
Whenever possible, consider your visitors with slower
connections - such as dial up - and test the speed of your site
before finalizing its web design. Remember that most visitors
find it much easer and much more appealing to simply click away
from a slow site and find a fast one than to wait forever for a
sluggish load. The rule of thumb is to have your first
information up within 10 seconds for even the slowest
connections, and then build rapidly from there, providing
additional information and content before the viewer can become
bored or frustrated.