HTTP Cache Headers Explained
Master Cache-Control, ETag, Last-Modified, and Vary — how browsers and CDNs cache responses.
Published:
Tags: HTTP caching headers, Cache-Control header guide, browser caching HTTP
HTTP Cache Headers Explained HTTP caching is one of the highest-leverage performance optimizations available — it eliminates unnecessary network requests entirely. But cache headers also cause some of the most confusing bugs: stale content served after a deploy, users seeing old versions of pages, CDNs caching API responses they shouldn't. Understanding how each directive works prevents both categories of problem. --- All the tools discussed here are available for free at theproductguy.in — client-side, no sign-up required. Part of the HTTP Debugging Tools Guide — a complete toolkit for diagnosing web requests. --- What is The Two Types of Caching? Fresh/stale caching — the cache stores a response and serves it for a defined period without checking the origin. Zero network requests during…
Frequently Asked Questions
What is Cache-Control in HTTP?
Cache-Control is an HTTP header that tells browsers and CDNs how to cache a response. It can appear in both requests and responses. In responses, it controls whether the response can be stored, by whom, and for how long. Key directives are max-age (freshness duration), public/private (who can cache), no-cache (must revalidate), and no-store (never cache).
What is max-age in Cache-Control?
max-age=N tells caches the response is fresh for N seconds after the response date. After N seconds, the response is stale. A stale response can still be served (with a warning) or must be revalidated, depending on other directives. max-age=0 means the response is immediately stale and requires revalidation on every use.
What is an ETag?
An ETag (Entity Tag) is a cache validator — a fingerprint of the response content. The server generates and returns it in the ETag response header. On subsequent requests, the client sends the ETag in If-None-Match. If the content hasn't changed, the server returns 304 Not Modified with no body, saving bandwidth. ETags are typically a hash or version identifier.
How does browser caching work?
When a browser receives a cacheable response, it stores it with its headers. On the next request for the same URL, the browser checks if the cached version is still fresh (based on max-age or Expires). If fresh, it uses the cached copy without a network request. If stale, it revalidates with the server using If-None-Match or If-Modified-Since headers.
What is stale-while-revalidate?
stale-while-revalidate=N is a Cache-Control directive that allows a cache to serve a stale response immediately while simultaneously fetching a fresh copy in the background. The N value is how many additional seconds after the max-age window the stale response may be served. This improves perceived performance at the cost of occasionally serving outdated content.
All articles · theproductguy.in