Author: Steve Lamm, Engineer on Web Performance
Recommended experience: Basic understanding of HTTP, Configuring web server.
When you set the correct HTTP caching headers, you get a double win because revisits to your web pages load faster and there is less load on your web server.
The cache, which is local copies of resources, works because many resources change infrequently. When a browser can reuse a local copy, it saves the time to set up a connection as well as the time to download. The key to making the cache work effectively is HTTP caching headers, which are sent by the web server to specify how long a resource is valid and when it last changed.
The HTTP protocol gives two ways to define how long a resource is valid: the
Expiresheader and the
Cache-Control: max-ageheader. The
Expiresheader specifies a date after which a resource is invalid. At that point, the browser will ask for the resource again.
max-ageworks much the same way but it specifies how long a resource is after it is downloaded instead of giving a specific date. That is nice because you can configure your web server with a constant value.
We recommend that you set the
max-ageto be at least one month in the future and preferably a year in the future. You only need to set one of the two headers. If you set both, the
max-ageheader overrides the
Expiresheader. If your resources change more often than that, you can change the names of the resources. A common way to do that is to embed a version number into the URLs. The main HTML page can then refer to the new versions as needed.
Once a resource is invalid, a browser has two options. It can download the resource again, or do a conditional GET request which only downloads the file if it has changed. In order to make a conditional GET request, the browser needs a way to specify what version it has in the cache. Once again it is up to the web server to provide that, and once again the HTTP protocol gives possibilities: the
Last-Modifiedheader and the
Last-Modifiedheader is the date the file last changed. The
ETagheader is a unique identifier for a particular version of the file. We recommend that you use the
Last-Modifiedheader because if the date is sufficiently far back, the browser may choose to skip requesting the file altogether.
To see these headers in action, try loading each of these pages twice:
To load the pages a second time, either click on the link again, or click on the address bar of the page and press Enter. If you click the Reload button, that forces the browser to do conditional GET requests if the resources are in the cache.
To take a closer look at these examples, you can download HttpWatch and use it to look at the HTTP headers.
For information on writing the headers, try a search for "expires header" and your web server or programming language. Here are a couple direct links: