Virtual Mechanics
Click here for a free WYSIWYG pixel precision HTML editor.
For the best in D HTML editors
Archive by Date
Archive by Topic

Design your page for Load Speed!

The Internet is rife with dogma. The things that you should or
should not do to create a successful web site. Often the dogma is
superficial or based upon a "Truth" which in this business just does
not last for very long. To be successful you have to be constantly
looking for new ways of doing things. Designing a good web site
often gets superficial treatment laced with dogma.

I have designed quite a few web pages but I don't consider myself a
designer. Good designers are able to take a few ideas or concepts
and whip them into something that can be quite magical (in my
opinion). I consequently will not attempt to tell anyone how to
design a great looking site.

What I can tell you are a few of the things that you should take into
account when you do design a web site. These are important whether
you are a great designer or a novice.

The first of these is load time. If a new visitor to your site sees
little but a blank screen or unrecognizable 1meg GIF file loading for the
first 20 seconds, odds are pretty good that they are likely to leave
before they even find out what your site is all about.

"But", you say, "last week you said that load time is not very
important!" That is correct. Load time is not important. It is the
experience that is critical. A web page that loads in 10 to 20
seconds but offers the visitor nothing of interest in that time is a
disaster. A web page that takes 60 seconds to load but is constantly feeding
interesting and relevant information to the visitor is a success.

Think of a loading web page as a slide show or presentation. By
default, a browser will display each of the various elements that
make up a page as it encounters them in the HTML file. Text,
images, scripts, forms etc, will be processed in sequence. With the
older Browsers that did not support CSS (Cascading Style Sheets),
these components were displayed from the top to the bottom of the
page as the page was loaded. If the first element on the page is a
relatively large graphic such as a logo, the visitor will have to
wait until that element has finished loading before seeing anything of
meaningful interest.

CSS means that Web Page elements can be located anywhere on the
web page so that the top element does not need to be loaded first.
Start with text. It loads fast, takes time to read and is a perfect
opportunity to explain the benefits of your product or service while
those nifty graphics are loading. Whether you next want to load
links or display small graphics is a judgement call but you probably
want to leave your largest images to the last.

What about displaying the corporate logo? Isn't branding important?
Yes it is but not at the sake of loosing your visitor. With CSS and
Javascript it is possible to hide and make page elements visible. Why
not start with a simple text version of your logo that becomes
invisible and replaced with your graphic after the page has finished
loading. Is15fig1
illustrates an example of this. If you check the source you will see
that the Text and Image of the logos are contained in <DIV> tags
with Visible and Hidden properties applied. After the page has
finished loading, a Javascript switches the visibility property so
that the plain text logo is replaced with a higher quality graphic.

If CSS and Javascript are a bit too advanced for you, simply display
the text logo first then load you graphic last so that it completely
covers the text logo.

Something else you can do to help improve load time is to pre-load
larger images or scripts. How do you do this? If you know which
pages are likely to be visited next you can load their images on the
current page with an invisible property so that they will not be
seen. Once the image is loaded it will be stored in chache (on the
visitor's computer) so that it does not need to be downloaded again.

The format for doing this is:

<DIV style ="position:absolute;visibility:hidden;">
<img src="mypic.gif">


Note that you must include "position:absolute;" for the benefit of
Netscape Browsers that would otherwise have a problem.

Some caveats to consider when pre-loading images. Do not over do
it. Loading images can interfere with the operation of you current
page especially if it displays animation or uses interactive input
from the visitor. Do not try to pre-load images if it is unlikely that
they will be completed before the user moves on. Know which pages they
are going to visit next. Use a good stats program to find out. Check
our article http://www.imswebtips.com/issue8top2.htm for more
info on this.

It goes without saying that you should find other ways to reduce load
times when possible. These include reducing the size of your
images, minimizing the number of images on your page, and
reusing the same images whenever possible. Do not for example, use
the same image in two different directories. Even with the same
name the Browser will assume they are different images and
download them twice.

If you are careful about how you design, layout and load your site,
you can create quite complex web pages that will load fast or appear
to load fast for your visitors. In either case it is likely to be a
more enjoyable and meaningful experience than a fast loading web page
with little content.

How long will it be until load times become irrelevant or dogma?
Probably until at least everyone has a reliable high speed connection
which I expect will take longer than many people may think.

Next week more design considerations.

"IMS Web Tips" ISSN 1488-7088
© Copyright 1999 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.

To subscribe send an email to tips@imswebtips.com with SUBSCRIBE
as your subject or visit the IMS Web Tips home page for subscription information and a list of past articles.
IMS WebTips