Click Here!
Evrsoft.com
  Web Development, Web design, HTML code, HTML tutorials, Javascripts, DHTML, ASP, Perl, CGI scripts  
YOU ARE HERE: Home : Articles : Design your page for Load Speed
Web Hosting  •  Website Tools  •  HTML Tutorials  •  PHP Resources
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



.

News
  " TARGET="_blank">...

...

...

...

...

 
More News  
Interactive
A database error has occured!
Misc

Join our newsletter!
Join our eNewsletter
for software updates,
freebies and more!


      Subscribe
      Unsubscribe



30,674,408
Domains
Registered Worldwide
...more statistics

Click Here!

 


  Articles are submitted to EDN and licensed from various content sites.
  To report abuse, copyright issues, article removals, please contact [violations (at@) evrsoft.com]

  Copyright © Evrsoft Developer Network. Privacy policy - Link to Us

Contact Evrsoft