Browser & HTTP / Cache Index Lab

Browser Cache and HTTP Caching: Understand What Gets Reused

Follow one resource from its first download to a cache hit, a validation request, and an update—and learn which browser cache is involved.

A browser request passes through freshness and validation checks on a bright HTTP caching diagram.

A browser can show a previously downloaded resource without transferring its full contents again. Whether it should do so depends on more than whether the file is present. The browser needs a matching stored response and rules that permit reuse. If those rules require checking with the server, the browser may make a network request while still reusing the saved content.

This explains why “the page is cached” is often an incomplete diagnosis. A page combines multiple resources, and different resources may follow different policies. Begin with one document, image, stylesheet, or script and trace its actual response.

Identify which cache you are investigating

The browser's HTTP cache stores responses associated with earlier requests. It is a private cache tied to that client. A shared cache, such as an appropriately configured intermediary, can serve reusable responses to multiple clients. These layers can coexist, which means a response arriving over the network may itself have come from a shared cache.

MDN's HTTP caching guide explains this request-and-response model, including freshness and validation. The web browser cache-index overview places it alongside other browser storage mechanisms without treating them as a single inventory.

For a practical investigation, write down the URL, the expected content version, and where the unexpected result appeared. “The old stylesheet loaded after deployment” is a much better starting observation than “caching is broken.”

Follow a resource through its lifecycle

Imagine a hypothetical public publishing site. On a first visit, the browser requests an illustration and receives its bytes with response headers. On a later visit, the browser may have a stored response that matches the request. The next question is whether that response can be reused under its caching policy.

A fresh response is still within its permitted freshness lifetime. A stale response has passed that allowance and may need validation before reuse. Stale does not necessarily mean the file's content has changed. It means the cache can no longer assume freshness under the applicable rule.

Keep that distinction in your debugging notes. The server may still have exactly the same illustration after a freshness interval ends. Conversely, a file might change at the server while an earlier response is still eligible for reuse. Your publishing policy must account for that possibility.

Read Cache-Control as a set of specific instructions

Cache-Control describes caching behavior. max-age supplies a freshness lifetime in seconds. private restricts storage to private caches. no-cache requires successful validation before reuse; it does not prohibit storing the response. no-store instructs HTTP caches not to store the response.

These directives solve different problems. A frequently edited public page might allow storage while requiring validation. A response intended for one user needs an appropriate private-cache policy. Content that should not be stored in HTTP caches needs a storage prohibition. Choose according to the actual resource and audience.

Do not apply an inherited string of directives without explaining each one. For the hypothetical publisher, write a brief policy beside each resource class: what can be reused, by whom, for how long, and how readers receive a revision. That policy is easier to maintain than a collection of unexplained header fragments.

Understand validation and the 304 response

A validator lets a client ask whether a stored representation is still current. An ETag is an identifier associated with a particular representation. A client can send it in an If-None-Match request. When the relevant representation has not changed, a server can respond with 304 Not Modified, allowing reuse of the stored body.

The practical consequence is that a network request does not always imply downloading the complete file. Validation can transfer less data while still consulting the server. Inspect both the request headers and the response status when deciding what happened.

For the example publisher, a small page that changes occasionally may be a reasonable candidate for validation. The team can keep a stable public URL while checking whether a new document body is necessary. Test this with an unchanged page and then with a deliberate content edit.

Separate page updates from asset updates

A public HTML page and the resources it references often have different release needs. The page may need to point readers toward new content promptly. A stylesheet with a version or content fingerprint in its filename can represent a specific immutable build. Changing its contents should then produce a different filename.

Publish assets before their references

For example, a hypothetical deployment might move from theme.a13f.css to theme.b92e.css and update the HTML reference. A long reuse allowance becomes easier to reason about when the old URL continues to mean the old bytes. The immutable directive is intended for resources that will not change during their freshness lifetime.

Plan deployment order carefully. Make the new assets available before publishing HTML that references them. Retain older assets long enough for already open pages and older cached documents to keep functioning. This release discipline matters as much as the header choice.

Use the network panel to answer one question at a time

Open the browser's developer tools and inspect the resource in the network panel. Record its final URL, status, transfer information, request headers, and response headers. Check whether the cache has been disabled in the developer tools; that setting changes the experiment.

In Chrome DevTools, the Network panel provides a Disable cache control and can preserve the request log across page loads. Those tools are useful for comparing a first visit with a repeated visit, but the comparison should be intentional. A test with caching disabled does not describe ordinary repeat-visit behavior.

Run a small sequence: load the page, revisit it normally, change one resource, and revisit again. Keep the browser configuration and navigation method consistent. Save the observations before clearing anything, because clearing the cache may remove the evidence you need to identify the faulty policy.

Account for service workers and history navigation

The Cache API is a programmable store of request-and-response pairs, commonly used with service workers. An application's code can choose how to populate and retrieve from that store. When a service worker controls the page, inspect its strategy as well as the HTTP headers. The application may be selecting a saved response through its own logic.

History navigation follows a different path

The back/forward cache is another distinct mechanism. It can restore an entire page state from memory during history navigation. That is different from constructing a page using individually cached HTTP responses. A Back-button test therefore may not exercise the same path as a new navigation or reload.

Use these distinctions to narrow the investigation. If ordinary navigation shows the correct version but history navigation restores older state, inspect page restoration behavior. If a service worker supplies the old resource, inspect its update lifecycle. Avoid changing unrelated server headers before identifying the layer involved.

Write a repeatable update check

For the hypothetical publishing site, test three resource classes: a public article, a versioned stylesheet, and an image replaced by an editor. State what should happen after each changes. A fresh article should eventually direct the browser to the intended assets under the site's documented policy.

Include two browsers or separate profiles when shared-cache behavior is relevant. Include normal repeat navigation and a new session. Record which layer served the content when the available diagnostics expose it. These checks focus on reader-visible correctness, with transfer size and latency as additional outcomes.

The guide to cache identity and freshness helps structure those expectations. Browser caching also differs from a search engine's collected information, explained in the search-engine cache-index guide; clearing a browser cache does not change a search index.

Conclusion: trace the policy and the response

Understand browser caching by following one resource and one navigation path. Identify the cache layer, read the reuse policy, inspect validation, and test a real update. With explicit rules for public pages and versioned assets, caching becomes a predictable part of publishing instead of a mysterious explanation for every outdated page.

Continue the reading path through the subjects covered in this article.

Connected reading

Keep the ideas moving.

All Lab articles