Use Cache

ache is a small temporary storage area of the hard drive where browsers keep files while they display them. Any file that is in the cache can be displayed repeatedly without being downloaded again and again.

The disk cache is a more permanent storage area. It holds images that will be used from session to session, even after you’ve exited your browser. When a browser accesses a page for which it has cached files, it doesn’t need to transfer those files again over the Internet; it simply pulls them from the disk cache and redisplays them. This cache works well for people who visit the same pages frequently.

The memory cache stores files during a single browser session. It stores the most recently used images and can redisplay them almost instantly. Memory cache can be very useful if you know how to take advantage of it.

For example, if you use a title graphic on the first page of your web site, it will be loaded in the memory cache the first time that page is viewed. If you want to use the same graphic on a subsequent page, it will already be in the cache and the next page will not have to wait for it to download. Reusing graphic elements as part of your site make good design sense, brings a feeling of consistency?and speeds up your pages.

Page 1&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp	Page 2	Common images for both pages (circled in blue)
Using the same background image or menu graphic on more than one page are others way to take advantage of caching. Any time you can reuse a graphic on another page of your Web site you are retrieving it from the cache. The more graphics you can reuse the faster the pages will load.

Often different graphics share certain components. Reusing these components creates a faster page.

The idea of using graphics on more than one page can be extended beyond the background or menu graphics discussed in the Using Cache section. In addition to reusing whole graphics, you can also reuse pieces of graphics on more than one page and in more than one graphic.

For example, if you have a company logo or title graphic that serves as the header for sections of the company’s Web site, it is common to change only part of the graphic to reflect the particular section that it is labeling, as shown in this illustration:

You could make many different versions of the complete logo or title graphic, using your graphics tool to build and save each full illustration?but there’s another approach. Put the idea of reusing pieces into practice and you’ll notice that there is only part of the image that changes, the section name. If we break the logo into two distinct pieces, one for the part that does not change and one for the part that is different on each page, we can reuse the unchanging part. The reused part will be in the memory cache on the user’s browser, and it will appear to load very quickly on the page.

This part does not change	This part can be changed for each page.

Use the layers palette in Fireworks or Photoshop to create the pieces, so that they are correctly sized and aligned to match with each other. Turn off all but the layers you need for one set of pieces and use the guides to determine where each piece begins and ends. In Fireworks use the slicing tool to highlight the areas of the graphic you want to export. In Photoshop crop, save a copy, and revert to create the different pieces.

Layer for “materials” is not visible. “History” is part of the background layer:

Layer for “materials” is visible:

When you break a graphic into two or more pieces it is important that you have them correctly reassembled on the page. Carefully check the HTML to make sure there are no extra spaces between the graphic pieces.

Extra space prevents the two images from touching:

Remove the space and the result is identical to the original uncut graphic:

Preloading Graphics

Pre-loading graphics is a way of getting the graphic files into the reader’s cache before they go to the page in which the graphic apprears.

Preloading graphics is another technique that can increase the perceived speed of your Web site. It is similar to the magician who redirects your focus to his right hand while his left hand is pulling a quarter out of your ear. With pre-loading, your readers don’t notice a graphic loading because it happens while their attentions is elsewhere.

To make use of the preloading technique, you put the image files for graphics you want to pre-load into an earlier page in the Web site?typically one that the reader will be spending time looking at and won’t notice something downloading in the background. Tuck in the image tags at the end of the file.

The trick here is you resize the width and height attributes of the preloading to one pixel by one pixel:

The files for the graphics will download but be too small to appear on the screen, effectively making the process invisible. However, since they are downloaded, they will be saved in the cache and when the reader requests a page on which the graphics are displayed they will fly into place.

While you were reading this page, you were also pre-loading a 21K graphic! Visit the page that contains the graphic and see how it just pops into place