How to do it...

By using the Expires headers, these components become cacheable, that is, these avoid unnecessary HTTP requests on subsequent page views. The Expires headers are most often associated with images, but they can and should be used on all page components including scripts, stylesheets, and Flash. We can do this in two ways. The first way is by using the Never Expires setting for all static components and setting the value to a far future date. If you are using a 32-bit system, better set the "expires date" till January 18, 2038, else it won't work on a 32-bit system without tweaking the code.

Add the Expires header by using the meta tag for static contents. Consider a site that requests the header with the following meta tag:

<META HTTP-EQUIV="Expires" CONTENT="Sat, 04 Dec 2021 21:29:02 GMT">

The response header would contain the Expires term like this:

Expires: Sat, 04 Dec 2021 21:29:02 GMT

Another way is by using Cache-Control metadata to assist the browser with the requests. For dynamic contents we use Cache-Control header definition like the following:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PUBLIC">

Content can be any of the four values: public, private, no-cache, or no-store. Here is some information regarding these four values:

If you have Firebug enabled in your Firefox browser, you can see the Cache-Control header's value at the request and response header as defined in RFC 2616 (http://www.ietf.org/rfc/rfc2616.txt).

The following are the two cache-related header parts that you should know:

cache-request-directive = "no-cache"  | "no-store"  | "max-age" "=" delta-seconds  | "max-stale" [ "=" delta-seconds  ] | "min-fresh" "=" delta-seconds   | "no-transform"  | "only-if-cached" | cache-extension                     
cache-response-directive ="public"  | "private" [ "=" <"> 1#field-name <"> ] | "no-cache" [ "=" <"> 1#field-name <"> ] | "no-store"   | "no-transform"  | "must-revalidate"  | "proxy-revalidate" | "max-age" "=" delta-seconds  | "s-maxage" "=" delta-seconds