Cache-Control - How to Properly Configure It

What is Cache-Control?

Cache-Control is an HTTP cache header consisting of a set of directives that allow you to specify when/how to cache a response and for how long.

When you visit a website, your browser stores copies of the accessed data and images in a store named the cache for faster access. When you revisit the website, you can use Cache-Control to define rules that determine whether the data and images should be loaded from the local cache or whether your browser must send another request to the server to re-request the resources. Accessing the copied resources is much faster because the browser doesn't have to request the server to get the same files each time.

It is essential to understand that the browser always stores the respective resources only for a certain time. Thus, caching has a validity period, referred to as Time To Live (TTL).

Once the TTL expires and you request the cached resource, the browser must reaccess the server and download a new copy of the resource.

What role do HTTP headers play?

HTTP headers allow the browser and the web server to communicate additional information to each other, such as the TTL for a resource.

Hypertext Transfer Protocol (HTTP), the protocol on which web communications are based, was introduced in 1991 to enable data transfer between users and servers.

HTTP headers are pieces of code central to browser requests and server responses when rendering websites and contain important information about each message. For example, a request header informs what resource is being requested and what data formats the client accepts, while the response header tells whether the request was successfully fulfilled.

The Cache-Control header can appear in both HTTP responses and HTTP requests.

You can configure your server to append the Cache-Control header to the response by specifying which directives to use.

Cache-Control directives

The following is a list of the common directives used and configured using the Cache-Control header.

Cache-Control: no-cache

no-cache means that the cached resources cannot be re-used without first checking if the resource has changed or has an updated version on the origin server. An ETag header is usually used for this purpose.

An ETag is an HTTP header containing a unique token for the resource version at the time of the request. As soon as the resource is updated, the token on the origin server is also changed.

When you revisit a website with a no-cache directive, a detour is returned to the server each time. In doing so, the client compares the ETag of the cached resource with that of the server. Only if both ETags are identical the cached resource may be made available to you. If the ETags differ, this is the sign for the client that the resource has been updated, and the client needs to download a new version, which is then made available to you. This way, you can ensure you always get the latest resource version.

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 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 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 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 themax-age, as mentioned above. 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 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 various 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 implementing 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 to 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');

Why a CDN simplifies Cache-Control

As you can see, there is a wide variety of cache headers, making manual cache management difficult.

A CDN like KeyCDN saves you from manually customizing individual headers and allows you to manage cache policies through a clear and user-friendly dashboard.

In addition, using a CDN also brings a website's content closer to the visitor, significantly speeding up resource delivery and ultimately resulting in a better visitor experience. The advantage is even more apparent with first-time visitors whose browsers have not yet cached the website's resources.

Summary

Cache-Control is a powerful HTTP header for speeding up websites and increasing the user experience on the Internet with a browser and intermediary cache. Although its ability to increase website speed is not its only, it is also quite useful to help make private information less vulnerable. The settings you choose to apply to the Cache-Control directives depend on the nature of the information being delivered and the desired expiration time of those assets.