Tip #24

Caching and your website

We have talked in Lesson 4 about the Dreamweaver download indicator, which gives you an estimate of how long your page will take to download.

download indicator

In playing with your graphics and looking at this download indicator, you may have noticed that if you place the same image multiple times on the same page, it does not increase the download time. This is because of web caching.

In general a cache is a special high-speed storage mechanism. It can be either a reserved section of main memory or an indepedent high-speed storage device. For more details on cache in general, check out this entry in Webopedia (an online encyclopedia dedicated to computer technology): webopedia.internet.com/TERM/c/cache.html.

Another web resource on Caching Tutorial for Web Authors and Webmasters at www.wdvl.com/Internet/Cache/index.html further explains web caching.

A web cache sits between web servers (or origin servers) and a client or many clients, and watches requests for HTML pages, images and files (collectively known as objects) come by, saving a copy for itself. Then, if there is another request for the same object, it will use the copy that it has, instead of asking the origin server for it again.

As is explained at this site, there are two main reasons that web caches are used:

  • To reduce latency - Because the request is satisfied from the cache (which is closer to the client) instead of the origin server, it takes less time for the client to get the object and display it. This makes websites seem more responsive.
  • To reduce traffic - Because each object is only gotten from the server once, it reduces the amount of bandwidth used by a client. This saves money if the client is paying by traffic, and keeps their bandwidth requirements lower and more manageable.

How can this affect you, even as a beginning web author? In another web document at www.wdvl.com/Internet/Cache/tips.html#TIPS, the author gives several suggestions for making a cache-aware site. Two are:

  • Refer to objects consistently. For example, if you are referring to your homepage and use the link of /index.html in one place, use the same format for the link on other parts of your site.
  • Use a common library or images or other elements and refer to them from different places on your site. For example, you may have a larger logo for your site on the main page, but on secondary pages use a smaller version of the image. You should put that secondary page image in a set location and refer to that same location each time. This is why people will sometimes create a folder called images or graphics and put all images or graphics used on that site in that one folder. (If an image is used in only ONE page on your site, it does not matter really where that image is stored.) However, if you use the same image in multiple pages on your site, once that image is placed into cache, during a session, the other secondary pages using that image will load faster.

These tips are created as part of a class on Dreamweaver Basics.