Inspecting a page’s cache status and age

Pre-requisites

The procedure below assumes a desktop browser’s Web Developer Tools are set up to inspect a page’s cache status and age.

As written, the procedure below also assumes a Blink-based browser (for example, Chromium, Chrome, Edge, or Opera).

The procedure can be done in Gecko-based browsers or WebKit-based browsers but specific actions (for example, how to reload a page) may be done differently.

Inspecting a page

To inspect a page’s cache status and age:

  1. Load the page to be inspected.

  2. Press Ctrl+Shift+I (or ⌘+⌥+I on macOS) to open the browser’s Web Developer Tools.

  3. Click the Network tab in the Web Developer Tools window.

  4. Press Ctrl-R (or ⌘-R on macOS) to reload the page being inspected.

  5. Note the values returned to the cf-cache-status and age columns in the Web Developer Tools window.

    The screenshot below, for example, shows a page with a cf-cache-status value of HIT, for four reloads. This means each time the page was reloaded, the page was reloaded from the Cloudflare cache.

    The screenshot also shows the age of the page on each reload in seconds.

    chromium web developer tools page loaded and header values returned
    Figure 1. Web Developer Tools window showing returned cf-cache-status and age values

A given page remains in the Cloudflare cache for 180 seconds (3 minutes).

After 180 seconds, if the page is, again, refreshed, the same cached version of the page is reloaded, but a new version of the page will be created within the cache.

Refresh the page once more and this newly created cache version of the page will load. This can be seen, as in the screenshot below, in the value returned to the age column.

chromium web developer tools page loaded and age value reduced
Figure 2. Web Developer Tools window showing a page’s age reducing on reload

Age values can be above 180 seconds

The Cloudflare cache does not automatically pull in a new version when a page’s age reaches 3 minutes (180 seconds).

Rather, when a page’s age is ≥ 180 and the page requested by a client, Cloudflare provides that page and then pulls in a new version of the page.

If, at time t₀,

  1. a cached page is 170-seconds old;

  2. a change is made to the page at its origin; and

  3. a client requests the page;

the client will receive the 170-second old page without the change.

That same cached page will continue to be served for at least the next 10 seconds.

At time t₁₀, the cached page is 180-seconds old.

As of t₁₀, the next client request will still get the cached version of the page.

But, noting the age value, Cloudflare will also pull an updated version of the page from its source.

All client requests following this will receive the updated page from the Cloudflare cache.

Inspecting a page as a public user

If a page is being inspected while signed-in to the Matrix Content Management interface, it is still possible to inspect the page’s behavior from the perspective of a public (that is, a not-signed-in) user.

When signed into the Matrix Content Management UI and previewing a page, pages are served with a /_nocache string appended to the URL.

That is, when signed-in to Matrix, a page

https://example.com/example

when previewed, is served as

https://example.com/example/_nocache

To inspect a page as a public user either

  1. log-out of the Matrix Content Management interface, re-load the page, and open a new Web Developer Tools window for the re-leaded page.

  2. Open a Private browser window (also known as an Incognito window), load the page in this window, and open a new Web Developer Tools window for the page as loaded in the Private window.

  3. Launch an entirely separate browser, load the page in this browser, and open a new Web Developer Tools window for the page as loaded in the Private window.

The latter two options have the advantage of not causing context loss.