Web development and performance
What is Caching?
Caching stores a copy of a resource so it need not be fetched again — in the browser, at a CDN edge, or on the server. Correct cache headers are among the cheapest performance wins available and among the most commonly misconfigured.
Also called: browser cache · Cache-Control
The three layers
- Browser cache
- The visitor’s own copy. Controlled by Cache-Control and ETag headers.
- CDN cache
- A copy at an edge location near the visitor. Removes the round trip to origin.
- Application cache
- Rendered pages or query results stored server-side to avoid recomputation.
Sensible defaults
- Fingerprinted assets — files with a hash in the name — get one year, immutable
- Images and fonts get a long max-age, because they rarely change under the same name
- HTML gets a short max-age or no-cache with an ETag, so updates appear promptly
- Never cache HTML for a year. Recovering from that mistake requires a URL change
The header worth auditing
Duplicate or conflicting Cache-Control headers, usually from a server config and an application both setting them. The result is undefined behaviour that varies by browser, and it is invisible until someone checks the response headers directly.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.