How
to Design your page for Load Speed
How to 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">
</DIV>
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.
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.
About the Author "IMS Web Tips"
(http://www.imswebtips.com) 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.
|
