Use The Clients Cache

[WebsitePatterns]

Problem

How do you reduce download times?

Context

A Web site with many pages that contain images that are used as navigation buttons, icons, bullets and so on.

When many images are used, download times are increased. Users often abort downloads if they take too long and browse elsewhere.

Forces

1. Many (most) users have low-bandwidth access to the site.
2. Users do not wait for pages to download unless they are sure that they contain the information they want. Otherwise they cancel the download and look elsewhere.
3. You want to give the site an attractive look or you have corporate publication guidelines to conform to.
4. Images take longer to download than text.
5. It is much quicker to load images from cache than from the network.

Solution

Use a ConsistentLook throughout the site, with the same images being used for the same button or "ident" logo on each page.

Use div elements for your navigation and content. Make sure content appears first in the HTML code, the navigation second and advertisements the at the end. This way to user can check the content while navigation elements are loaded. Also, having advertisements show up at the end has two positive effects: users don't get to wait for them if they are merely going though that page to some other and 2. if user does stay on the page, they don't block out the ads in their mind as happens with page that loads ads at startup -- MilanBabuskov

Resultant Context

The images will be cached by the client's browser when they are first encountered and so the browser will not need to download them for subsequent pages.

If images are changed, the change will not immediately be reflected in browsers that have cached the images.

Known Uses

The WikiWikiWeb uses the same image as an "ident" at the top of each page.

Many sites use common navigation buttons, to go up the TreeStructure or back to a previous page for example.

-- NatPryce

Another example, possibly a little more extreme, showed up in a Web-based application I wrote. It was part applet, part CGI, with the applets using graphical elements as controls. One applet -- small and quick-loading -- played a little animation loop while we loaded the user's cache with the images and the main JAR.

Also, if the user disables their cache this just won't work. That's usually not a problem, but be ready for complaints.

-- RobCrawford

Using "splash" time to preload images is a common technique. While the reader is being entertained by eye candy (or while they're reading), download the images that'll be needed for the next page(s). This is often accomplished without distraction by loading images into 1x1 pixel spaces at the bottom of the current page. Example:

<img src="preload.gif" height=1 width=1 border=0>

-- DaveSmith

Do users actually hang around these days to watch fancy splash screens? Everybody I've ever heard on the subject, whether user or developer or JakobNielsen, argues that they're eye-candy meant to satisfy the tech-clueless GoldOwner, and that people just click right past them as fast as possible. The only exceptions would be Flash developers and other people with a big vested interest in racking up billable hours.