Browser Caching and Cache-Control Explained

Browser caching lets a visitor’s browser keep a local copy of your files — images, stylesheets, scripts — so repeat visits load them from disk instead of downloading them again. Done well, it makes second and subsequent page views feel instant. The whole system is controlled by a few HTTP headers, chiefly Cache-Control.

How the browser decides

When a browser needs a file it already has cached, it checks whether the cached copy is still “fresh.” If it is, the browser uses the local copy with no network request at all — the fastest possible outcome. If it might be stale, the browser asks the server whether anything changed. The Cache-Control header sets the rules for that decision.

Cache-Control directives

Cache-Control is a single header carrying one or more directives:

Directive	What it does
max-age=SECONDS	How long the file stays fresh before revalidation
public	Any cache, including CDNs, may store it
private	Only the user’s browser may cache it, not shared caches
no-cache	May store, but must revalidate before each reuse
no-store	Never cache — for sensitive or personalized responses
immutable	Content will never change, so skip revalidation entirely

A practical strategy

The trick is to treat two kinds of content differently.

Static assets: cache hard, version filenames

Stylesheets, scripts and images rarely change, so cache them for a year and mark them immutable:

Cache-Control: public, max-age=31536000, immutable

To push an update, change the filename — for example app.4f2a1c.css — so the new page references a new URL the browser has never cached. This “cache busting” through versioning is what lets you cache aggressively without ever serving a stale asset. Most build tools add the hash automatically.

HTML: keep it short-lived

HTML changes whenever content does, and it references your versioned assets, so it should not be cached for long. A short max-age or no-cache with revalidation keeps pages current:

Cache-Control: no-cache

ETag and revalidation

An ETag is a fingerprint the server attaches to a file. When a cached copy needs revalidating, the browser sends the ETag back with If-None-Match. If the file is unchanged, the server replies 304 Not Modified with no body — a tiny response that saves re-downloading the whole file. Last-Modified with If-Modified-Since works the same way using timestamps. ETags are most useful for HTML and other content you revalidate rather than cache immutably.

Frequently asked questions

Related guides