Performance

Cache-Control

Cache-Control is the HTTP header that says how long a response may be reused and by whom. It is the main switch for browser caches, CDNs, and proxies.

How it is measured

Open the Network panel, pick a response, and read the `Cache-Control` value. Directives like `max-age`, `s-maxage`, `no-store`, `no-cache`, `public`, and `private` each change who may keep a copy and for how many seconds.

Confirm behavior by reloading and watching the size column. `(disk cache)` or `(memory cache)` means the browser did not ask the network. A 304 means it asked and the server said nothing changed.

Worked example

A static site serves `/assets/app.8f3c1.js` with `Cache-Control: no-cache`. Every visit sends a conditional request, costing about 45 ms for a 304 on a good connection and 380 ms on a slow one. Changing it to `public, max-age=31536000, immutable` removes the request entirely on repeat views.

The HTML page stays at `max-age=0, must-revalidate` so a new deploy shows up on the next load, while the fingerprinted bundle is never asked about again.

How it differs

Cache-Control tells the cache what to do. An ETag helps it check whether a stored copy is still valid. Stale-while-revalidate is a Cache-Control extension that lets a stale copy be served while a refresh runs. Cache-Control sets the lifetime, the other two refine what happens at expiry.

Common errors

Confusing `no-cache` with `no-store`: the first still allows storage but forces revalidation, the second forbids storage. Putting `private` on public assets and blocking the CDN. Setting a long max-age on an unfingerprinted file and being unable to roll out a fix. Sending conflicting `Expires` and `max-age`. Forgetting that a CDN may override your header.

In practice

List the response types on your site and give each one a deliberate policy. Fingerprinted assets get a year and immutable. HTML gets a short or zero max-age with revalidation. APIs that return user data get private or no-store. Then verify the header at the edge, not only at the origin.

See also

ETag, Stale-while-revalidate

Sources

Count this on a real site.

Watch my website