What HTTP headers are needed to let web browsers cache your server's static content properly?

This article will tell you exactly what HTTP response headers you need to let web browsers know they should cache your web server's static content properly. If you want to know what headers in the HTTP response are needed for HTTP clients to properly cache your HTTP server's static webpages you've come to the right place.

If you want your static resources cached by web browsers..

Your server should send the following cache control headers in the HTTP response if you want your resources cached by client browsers.

Header and Value	Supported HTTP Version	Explanation
Date: Tue, 24 Dec 2013 07:27:15 GMT	1.0 1.1	exact date of generating this response
Etag: "1edec-3e3073913b100"	1.1	its entity tag
Last-Modified: Tue, 10 Dec 2013 12:14:20 GMT	1.0 1.1	when it was last modified
Cache-Control: max-age=21600	1.1	how long you want it cached in seconds since date of access
Expires: Tue, 24 Dec 2013 13:27:15 GMT	1.0 1.1	when you want it expired

You need all of these headers to work for both HTTP/1.0-compliant and HTTP/1.1-compliant web browsers.

In the following requests for the same resource an HTTP/1.0-compliant browser would include the following header.

If-Modified-Since: Tue, 10 Dec 2013 12:14:20 GMT

And an HTTP/1.1-compliant browser can choose to include the following headers.

If-Modified-Since: Tue, 10 Dec 2013 12:14:20 GMT
If-None-Match:"1edec-3e3073913b100"

Then the web server would know whether to return 304 Not Modified or 200 OK.

It turns out Google Chrome (Version 31.0.1650.63 m) would only send If-Modified-Since. It is up to the browser what headers to include given the information it has. Somehow it thinks sending If-Modified-Since is enough in this case.

The ETag does not have any information that the client can use to determine whether or not to make a request for that file again in the future. If ETag is all it has, it will always have to make a request. However, when the server reads the ETag from the client request, it can then determine whether to send the file (HTTP 200) or tell the client to just use their local copy (HTTP 304). An ETag is basically just a checksum for a file that semantically changes when the content of the file changes.

The Expires header and max-age directive are used by the client to determine whether or not it even needs to make a request to the server at all. If the resource has not been expired the browser can choose not to make a request to the remote server.

So you want to use all of these headers. Set Expires and max-age to a reasonable value based on how often the content changes. Then configure ETag to be sent so that when clients do send a request to the server, the server can more easily determine whether to send the file back.

If you use a CDN, Expires and Cache-Control would let the CDN know when the CDN should grab a fresh copy from your server.

If you NEVER want your static resources cached by web browsers..

Your server should send the following cache control headers in the HTTP response if you NEVER want your resources cached by client browsers.

Header and Value	Supported HTTP Version
Expires: Sat, 26 Jul 1997 05:00:00 GMT	1.0 1.1
Last-Modified: Tue, 24 Dec 2013 07:54:18 GMT	1.0 1.1
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0	1.1
Pragma: no-cache	1.0 1.1