Author: Steve Lamm, Engineer on Web Performance
Recommended experience: Basic understanding of HTTP, Configuring web servers
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
Expires header and the
Cache-Control: max-age header. The
Expires header specifies a date after which a resource is invalid. At that point, the browser will ask for the resource again.
max-age works 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
Expires header or
max-age to 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-age header overrides the
Expires header. 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-Modified header and the
Last-Modified header is the date the file last changed. The
ETag header is a unique identifier for a particular version of the file. We recommend that you use the
Last-Modified header 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: