HTTP Caching and CDNs: Serving Pages Closer and Faster

Understand browser and shared caches, freshness rules, validators, and how a CDN reduces latency without serving stale content.

By Rishipal Singh · · 7 min read

A nearby cache serves a fresh response directly and revalidates older content with the origin.
Visual guide: A nearby cache serves a fresh response directly and revalidates older content with the origin.

Repeating the same network request for every visitor wastes time and bandwidth. HTTP caching lets a browser or an intermediary keep a response and reuse it while it is still fresh. A content delivery network (CDN) places copies at locations closer to users, reducing the distance data must travel.

Freshness rules

A response can include Cache-Control: max-age=60, which says the representation may be reused as fresh for 60 seconds. Browser caches are private to one user. Shared caches, such as a CDN, can serve a response to many users when the response permits it. Use private for user-specific data and avoid public caching of content that contains secrets or personal information.

Cache keys matter too. A response that varies by request headers may need a Vary header so different representations are not mixed together. Caching is a correctness decision as well as a performance decision.

Validate before downloading again

When a cached response becomes stale, the browser can ask whether it changed. An ETag is a validator for a particular representation. The browser sends it back in If-None-Match. If the content is unchanged, the server returns 304 Not Modified; the cached body is reused instead of retransmitted. A Last-Modified timestamp and If-Modified-Since provide another validation mechanism.

How a CDN helps

A CDN can serve static files from an edge location near the visitor. If the edge does not have a fresh copy, it fetches or revalidates the object with the origin, then caches it according to the response's rules. Versioned asset names make long-lived caching safer: when the file changes, its URL changes too.

When a page looks stale, inspect the response's cache headers, the cache key, and whether a shared cache is allowed to store it. Those details usually explain what the browser or edge is reusing.

Practice: choose a cache response

A browser has a cached response with an expired max-age value and an ETag. Which conditional request header can it send before downloading the full resource again?

Reveal the explanation

Send If-None-Match with the stored ETag. If the representation is unchanged, the server can reply 304 Not Modified and the browser reuses its cached body.

HTTP Cache and CDN Playground

Simulate browser and edge-cache hits, expiration, and ETag revalidation.

Open the activity in a new tab