Imagine you're at a large, formal dinner party.

There's a beautifully set table but no food because the host didn't begin cooking until the guests sat down for dinner.

Because the host neglected to do the necessary prep work, everyone leaves before dinner is finally served.

Something similar may be happening on your Web site if your pages load too slowly.

Internet users are more impatient than those hungry dinner guests. They won't wait around long to see your site: If it doesn't load within eight seconds, you could lose one-third of your visitors.

With just a little prep work, though, you can make your site appear to load faster. Preload images with JavaScript and reuse the same images throughout the site. With images preloaded, your pages will appear to download more quickly.

Preload Images

Take advantage of the fact that image files stored locally in a browser's cache file display much faster than files downloaded from a server.

When you preload images, you instruct the browser to download image files needed for display on subsequent pages. When those pages are viewed, they'll appear to pop up almost instantly because the images are ready and waiting.

To preload images, insert some simple JavaScript code inside the HEAD tag. Be sure to use the correct name and path for your image.

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) {
img1 = new Image();
img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
}
</SCRIPT>

Here you're creating variable names for two images: img1 and img2. Then you attach the actual name and path of the image to the variable SRC file. The images will be stored in the browser cache.

Don't get too carried away and try to preload all your site images on one page. That's overkill, and it can significantly affect the total download time of the page. Preload just the next set of images your visitors will need.

Look at your site logs and do some testing to determine how visitors move through your site. If the majority jumps from your home page to your products or catalog page, preload the images for those pages on your home page. Do your best to load images in the order they'll be needed.

Reuse Images

There's another trick to using the browser cache: Use the same images throughout your Web site. This gives your site visual continuity and speeds up the display.

Every time you reuse an image, it's one less request the browser has to make to the server.

The best candidates for reuse are company logos, menu bars and other navigational icons, because they often appear on every page in the site. Depending on your design, you can probably find other images to reuse, too.

Carefully organize your files and directories to make sure you use the same file name and path each time you use the image. Otherwise, you could use corporate//images/logo.gif on the home page and insert office//images/logo.gif on another page. Although the image files have the same name, they're in two different directories. The browser will download both. Preloading and reusing images doesn't change your download time but pages appear to load faster.

To really speed up your page, you have to reduce the size of your graphics files. Several good image optimization tools are available. NetMechanic's GIFBot tool is free. Use it to compress image file size without sacrificing image quality.

Use images wisely. They can add a lot to your site, but they also can drive away your site's most valuable asset: your visitors.

About the Author:
Todd Gandy is director of business development for NetMechanic Inc., an independent provider of online Web site maintenance, promotion and monitoring services.

Click here for more info from this author...