Cache-Control vs. ETag: What Each One Actually Controls

When browsing the network tab in a browser, developers often encounter Cache-Control and ETag in the response headers of various resources like images, stylesheets, and scripts. While both headers are commonly recognized, few developers understand how they work together to manage caching. This article will explain the basics of HTTP caching and delve into the specific roles of Cache-Control and ETag, using the example of a project's OGP image generator.

The Purpose of HTTP Caching HTTP caching allows browsers (and CDNs) to store previously fetched responses – such as images, stylesheets, or scripts – and reuse them for subsequent requests to the same URL, instead of requesting the server again. Without explicit instructions from the server, browsers have to make an unreliable guess about whether a cached response is still valid, which can lead to inconsistencies across different browsers and situations.

Cache-Control vs. ETag: Two Different Approaches HTTP caching addresses two different problems with two distinct headers: Cache-Control and ETag. Cache-Control determines how long a browser can skip contacting the server entirely, while ETag provides a more fine-grained method of checking whether content has changed after the expiration period.

Cache-Control: Setting Expiration and Immutability The Cache-Control header sets an expiration window, defining how long a cached response can be reused without contacting the server. In the example provided, the project's blog theme uses the following Cache-Control header for its OGP image: `Cache-Control: public, max-age=2592000, immutable`.

The directives used are: public – the response can be cached by any cache along the way, like a CDN. max-age=2592000 – the response is considered fresh for 30 days (2,592,000 seconds). immutable – the content will not change during this period, so the browser can skip even the lightweight revalidation check. The combination of a 30-day window with the immutable directive implies that the URL will always point to the same content, making revalidation unnecessary.

ETag: Efficient Revalidation After Expiration When the Cache-Control max-age period expires, a browser initiates a revalidation check with the server to determine if the cached copy is still valid. ETag, short for Entity Tag, plays a crucial role in this process. An ETag is a short identifier, usually a hash, generated from the response's content.

If even a single byte of the content changes, the ETag changes with it, effectively becoming a fingerprint of the content. The revalidation flow involves the following steps: The server's initial response includes an ETag, such as `ETag: abc123`. The browser remembers this value and, once the cached copy expires, sends a follow-up request with the If-None-Match header containing the ETag value.

The server recomputes the content's current ETag. If the ETag hasn't changed, it responds with 304 Not Modified, a lightweight response with no body. The browser uses its existing cached copy upon receiving a 304 response. A 304 response doesn't retransmit the actual content; it only confirms that the cached copy is still valid, skipping the network transfer altogether.

Why ogp-generator.php Doesn't Use ETag The article explains that the OGP image generator's code doesn't implement ETag, opting instead for a different caching strategy. The generator attaches a filename to the image containing the post ID, language, and post's last-modified timestamp. This technique is known as cache busting, which makes sure a given URL can never point to content that changes, as the filename (and thus the URL) changes whenever the content changes.

By using this approach, the generator ensures that a URL will always point to immutable content within its 30-day lifespan, eliminating the need for ETag. Both Approaches Serve the Same Purpose HTTP caching aims to prevent stale content from being served, but it achieves this goal through two different approaches: Cache-Control focuses on deciding how long a browser can skip contacting the server, while ETag provides an efficient way to confirm, after expiration, whether the content has genuinely changed.

The choice between these approaches depends on the frequency and granularity of content changes. While ETag offers a more efficient revalidation method, cache busting using filename versioning, as seen in the OGP image generator, can simplify the caching process by ensuring content immutability within the specified timeframe.