Design your
page for Load Speed
By Virtual Mechanics |
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>
is15fig2
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.
Next week more design considerations.
Source: "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 join.imswebtips@list.imswebtips.com
or visit www.IMSWebTips.com
for subscription information and a list of past articles.
More Articles
|
.
|
|
[an error occurred while processing this directive]
|
|
|
|
|
