Make the Web Faster

HTTP Caching

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 ETag header.

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.

To explore this topic in more detail, see Optimize Caching in the Page Speed tool documentation.

Additional resources

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:

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.