Cache-Control Builder

The Cache-Control header is the single most important HTTP header for deciding how long and under what conditions browsers and CDNs may cache a response. Get it wrong and users see stale content, or caching never kicks in and your server and bandwidth costs spike. This tool lets you pick a resource type and toggle directives, then assembles the correct Cache-Control string in real time.

Common scenarios such as hashed static assets, HTML documents, sensitive API responses and images are one click away via presets, and you can fine-tune max-age, s-maxage andstale-while-revalidate values directly. Everything runs in your browser; no input is ever sent anywhere.

What the main directives mean

Cache-Control is a comma-separated list of directives. The most common ones are:

• public / private: public allows shared caches (like CDNs) to store the response; privaterestricts storage to the end user's browser only (for per-user responses).
• max-age=N: how many seconds the response is considered fresh. During that window no request goes back to the server.
• s-maxage=N: freshness that applies only to shared caches (CDNs); it overridesmax-age there.
• no-cache: the response may be cached, but it must be revalidated with the server (a 304 check) before reuse.
• no-store: do not store the response in any cache. Use it for sensitive data.
• must-revalidate: once stale, the cache must revalidate and may not serve the old response while offline.
• immutable: while fresh, the browser sends no revalidation request even on a manual reload.
• stale-while-revalidate=N: for N seconds after expiry, serve the stale response immediately while refreshing in the background.

Hashed files get immutable + one-year caching

When a build tool fingerprints filenames with a content hash (e.g. app.4f3a9c.js), the filename itself changes whenever the contents change. Because a given URL's contents never change, it is safe to cache it for as long as possible. The recommended value ispublic, max-age=31536000, immutable (one year). Adding immutable means the browser skips conditional requests even on reload, eliminating the round trip entirely.

1. Unhashed HTML entry point: use no-cache so users always get the latest version.
2. Hashed JS/CSS/fonts: public, max-age=31536000, immutable.
3. Images/media: if they rarely change, start around public, max-age=86400 (one day).
4. Personalized or sensitive responses: no-store, private.

Common conflicts and gotchas

no-store forbids caching entirely, so combining it with max-age orimmutable is contradictory. This tool flags such combinations with a warning. Also remember thatno-cachedoes not mean "do not cache"; it means "revalidate every time." To fully prevent caching, use no-store. To tune the stale-while-revalidate window to how often your data changes, the stale-while-revalidate planner helps.