Cache-Control - How to Properly Configure It

What is Cache-Control
?
Cache-Control
is an HTTP cache header comprised of a set of directives that allow you define when / how a response should be cached and for how long. HTTP caching occurs when a browser stores copies of resources for faster access. Access to these copied resources is much faster as the browser does not need to make a request to the server in order to receive the same files every time. You can configure your server to attach the Cache-Control
header in the response, specifying which directives to use.
Cache-Control
directives
The following is a list of the common directives used and configured when using the Cache-Control
header. See HTTP/1.1 section 14.9 for a further explanation of the directives available.
Cache-Control: no-cache
no-cache
uses the ETag header to tell caches that this resource cannot be reused without first checking if the resource has changed on the origin server. This means that no-cache
will make a trip back to the server to ensure the response has not changed and therefore is not required to download the resource if that is the case.
Cache-Control: no-store
no-store
is similar to no-cache
in that the response cannot be cached and re-used, however there is one important difference. no-store
requires the resource to be requested and downloaded from the origin server each time. This is an important feature when dealing with private information.
Cache-Control: public
A response containing the public
directive signifies that it is allowed to be cached by any intermediate cache. This however is usually not included in responses as other directives already signify if the response can be cached (e.g max-age
).
Cache-Control: private
The private
directive signifies that the response can only be cached by the browser that is accessing the file. This disallows any intermediate caches to store the response.
Cache-Control: max-age=<seconds>
This directive tells the browser or intermediary cache how long the response can be used from the time it was requested. A max-age
of 3600
means that the response can be used for the next 60 minutes before it needs to fetch a new response from the origin server.
Cache-Control: s-maxage=<seconds>
s-maxage
is similar to the above mentioned max-age
however the "s" stands for shared and is relevant only to CDNs or other intermediary caches. This directive overrides the max-age
and expires
header.
Cache-Control: no-transform
Intermediate proxies sometimes change the format of your images and files in order to improve performance. The no-transform
directive tells the intermediate proxies not to alter the format or your resources.
Each of these directives serves its own purpose and can be used in a variety of scenarios. To help further simplify things, Ilya Grigorik, a developer at Google, created the decision tree below to help determine what directives should be set for a particular resource.
Cache-Control
configuration
The HTTP Cache-Control
header can be implemented on the server or can even be added within the code. The following are examples of how to implement Cache-Control
in Apache, Nginx, or within your PHP code.
Apache
The following snippet can be added to your .htaccess file to tell the server to set the Cache-Control
header's max-age
to 84600
seconds and to public
for the listed files. Expires
and Cache-Control
headers can also be included with Apache by using the mod_expires
module.
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Nginx
This snippet can be added to your Nginx configuration file. The example below uses the Cache-Control
header directives public
and no-transform
with an expire setting set to 2 days.
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}
PHP
Cache-Control
headers can also be added directly in your code. This example demonstrates using the PHP header to include Cache-Control
setting a max-age
of 1 day.
header('Cache-Control: max-age=86400');
Summary
Cache-Control
is a powerful HTTP header when it comes to speeding up websites with the use of browser and intermediary cache. Although its ability to increase website speed is not it's only as it is also quite useful to help make private information less vulnerable. The settings you choose to apply to the Cache-Control
directives are dependent on the nature of information that is being delivered as well the desired expiration time of those assets.