the cache

When explorers travel through the Arctic they often leave stores of food or fuel behind them in strategic spots. That way, when they come past on their way home (or possibly on their next trip, if they are mad enough), they have something waiting for them, without having to shoulder the burden any longer than they have to. A store like this is known as a cache (pronounced "cash").

The same principle, almost, is used by web browsers. You may notice as you surf the web that if you return to a page or - even more noticeably - an image you've surfed in the recent past, it will load much more quickly than a page being viewed for the first time (or the first time in a while). This is because the browser also keeps a cache of images and HTML files. When a page or image is downloaded, a copy is moved into the cache (a folder). That way, when the page is viewed again, the computer doesn't need to go back to the phone line to retrieve it, but can go to the folder on its hard disk; which is obviously much quicker. It also explains why the Back button works.

Pages and images don't stay in the cache forever, but they'll definitely stay there for the length of a browsing session, at least - and usually for a few days afterwards, or even longer, if the user is not a heavy web surfer.

Why do you need to know about this? Because there are ways to exploit it, if you know how browsers work. As I've already said, loading up images can take up 90% or more of the time people spend downloading your web site. If you know of the cache's existence you can save large slabs of time, and make your page more accessible, particularly to those with slow or unreliable Internet connections who, as I said in the lecture, are suffering from a form of "disability" where web browsing is concerned. Not only that but some otherwise useful techniques such as rollover images can fail to work properly if the cache's existence is not appreciated.

The main thing to do is be aware that if an image has been loaded up once already in a session, it'll reappear almost instantly. So always re-use images if you can, whether a logo, button or even a photo, rather than using a new one and forcing a return to the phone line. Apart from anything else this helps give a universal "branding" feel to the site.

There's also a clever trick you can perform with the help of the height and width attributes in the <img> tag. Say you have a fairly large image which you suspect might cause a delay when browsing of your page, but for whatever reason, it's hard to reduce the size of that image in kilobytes. Remember that image size on the screen and image size in terms of bytes are two different things, however. So say you also know that before the user would get to a point when they needed to see that image, that they would spend some time on a different part of the page (or even an entirely different page). You could then load the image up in the background, as it were, but set both height and width to 1 (pixel) and thereby make the image "invisible"; but still in its full and complete state in the cache. Then when the image is required it will appear to load instantly.

To see what I'm talking about, look at this example. While you've been reading the page up to this point, an image called "rochdalecanal.jpg" has been loading into your cache. This will appear instantly when you click on the button below the blank space under the first image. However, the image further down has not been previously loaded (unless you've viewed this page before!) and will take a noticeably longer time to come up. (Note that at university download times are very fast and this is less of a concern, but most people browse from home where phone lines are much slower. You would certainly notice the difference from home - at uni, maybe not.) Where was "rochdalecanal.jpg", however? You will be able to see what happened if you look at the source of this page, where a comment shows the location of the "invisible" image tag.

A more sophisticated way of doing this is by using JavaScript to preload the image, and you can read about that on the page as linked. The disadvantage of the technique as shown here is that you need some place where you can be sure that readers will spend enough time to download the image without their noticing it - and this before, definitely, they look at the full image. But it's a design issue you can think about. Note that whatever happens (and this applies to preloading as well), the image has to be downloaded sometime. Try as you might you simply can't sidestep the time it takes to physically transmit the image down a phone line. All you can do is conceal that time in the background rather than making it up front. The best solution is not to have very large images at all.

In summary, using the cache in tricksy ways like this is a help, but the main reason this page is here is to give you some awareness that it exists at all. Knowing how browsers work is a substantial part of designing sites that fit the user's needs rather than your own. The less you can force the user to spend time downloading stuff, whether by reusing old images or preloading them, the better, faster and more user-friendly (within reason) your site will be.

Back to the top

Back to the menu for lesson 6