What is Cache-Control?

Delivering web content to users relies heavily on web caching, when browsers serve a website’s content from temporary storage locations called caches. The policies that dictate web caching behavior and storage are called cache controls.

This article describes cache control, browser caching, headers, and some use cases for cache-control headers.

What is Browser Caching?

Browser caching (also known as web caching) temporarily stores web content, such as images, HTML files, and videos, on a local host to improve the page loading time and browsing experience. This allows further requests for the same content to load faster, improving the user experience.

Web caching occurs in two different scenarios:

• First visit: When a user visits a webpage for the first time and requests certain web content, the browser requests the content from a web server, downloads and serves it to the user, and saves it in a cache for subsequent requests.
• Subsequent visits: On subsequent requests for the same web content, the browser serves the page from the browser’s cache, shortening the loading time.

Importance of Browser Caching

Browser caching provides three key benefits, which are discussed below.

Improves Browser and System Performance

A cache serves subsequent requests for the same webpage, meaning that a browser can retrieve it from a local source instead of having to redownload, improving overall performance.

Saves Data

Downloading web resources for every request requires an internet connection and consumes data. Web caches ensure that the content is already available locally. As a result, users can access it without needing internet access or consuming data.

Ensures Efficient Use of Resources

Repeated resource downloading eats up server resources more quickly without a web cache. A web cache makes more efficient use of resources by preventing the waste that occurs through repeated downloads.

On the downside, a web cache may consume storage space on users’ devices and sometimes serve outdated content. However, you can deter this by regularly clearing the web cache.

What Are Headers?

HTTP headers provide metadata about client requests and server responses (for example, preferred media formats). They are case-insensitive header fields separated by a colon and key-value pairs.

There are four broad header categories, each depending on what information they provide:

• Response headers record the resource returned, like the response location, resource type, file size, and name and version of the server.
• Request headers record the client’s operating system (OS), browser type and capabilities, and outputs accepted by the browser in a text-body format.
• Representation headers are metadata about the resource in the message body, which includes encoding and media type.
• General headers are directives that both the requester and server must follow. They contain caching directives, connection options, pragma, and warnings.

Cache-Control Header

Like HTTP responses, a cache-control header contains policies on how web browser caching occurs both in client requests and server responses.

Some directives that cache-control headers contain include the following:

• Max-Age indicates the time it takes for a cached response to expire. This is the elapsed time from when the server generated the response, not when the browser received it.
• No-Cache indicates that browsers must submit a validation request to a server before caching a response.
• No-Store usually applies to sensitive data like banking and health information, indicating that a resource can’t be cached.
• Public means the cache can store the response.
• Private means the resource is user-specific, so only the user’s device can cache it.

Other Cache Headers

Apart from cache control, there are other HTTP headers that relate to caching. They control various other cache-related settings you can customize to ensure optimized cache use. Some of the most commonly used cache headers are:

• Expires: If a Max-Age cache-control header is not specified, you can use the Expires header to set a time for the resource’s expiration. This ensures that the resource isn’t sticking around forever. With content delivery networks, the maximum age allowed is 365 days.
• Vary: The vary header details which parts of a request message must match a cached resource for it to be considered valid. This enables the filtering of cached resources to ensure they meet the requesting party’s needs.
• ETag: This header appears in responses to inform browsers of changes to resources that may be in caches. The ETag is a string of characters that the browser compares to its cached resource. If they match, the browser uses the local resource.

Cache-Control Use Cases

There are many cache-control use cases, including the following:

• Preventing caching for private and dynamic content: For cases in which the web content contains highly sensitive measures, omitting cache-control headers doesn’t prevent caching, as most modern web browsers cache content through their internal algorithms. In these cases, developers must explicitly inform the browser whether to cache resources by setting the cache control header to private or public. Additionally, cache-control header values like no-cache and no-store ensure that there’s no caching of resources by the browser.
• Ensuring up-to-date content: For dynamically generated content that produces fresh content on every request or for static content that gets updated frequently, not specifying a cache-control header to specify the cache behavior will lead to unexpected results. Instead, setting the cache-control header to no-cache in the response ensures revalidation to the server and fresh content delivery.
• Enabling fast delivery and performance for static assets: For static web files like images, CSS, and JavaScript files that are downloaded on each server request, adopting a caching strategy, like setting a max-age cache-control header, will cache this static content and significantly improve application performance.
• Improving performance with the immutable directive: Upon request for static application files, the browser reconfirms the revalidation of these items, which consumes bandwidth and slows down page loading times. Setting assets that don’t require conditional revalidation to be immutable ensures no revalidation after loading, which consumes less network bandwidth and improves performance.

Key Takeaways

• Caches are temporary storage locations that store webpage content for subsequent requests.
• Caches use cache-control headers to make policies and directives that affect the behavior of caches and how they store data. Cache-control directives include max-age, no-cache, public, and private.
• Different cache-control directives apply to multiple use cases.
• The private cache-control directive, for example, is crucial for sensitive content that requires security measures to protect data and ensures that content isn’t cached.
• The immutable directive helps save network bandwidth for static web content that doesn’t require conditional revalidation, thereby improving page loading time and performance.