Why isn't Chrome caching responses, even when cache-control header is present?

user_1675976 0
Viewed 1104

I am trying to understand WHEN Chrome caches things and how it decides what it caches. For example, I visited this news article and opened the DevTools. https://www.nextgov.com/ideas/2020/07/so-much-decentralized-internet/167281/

I've ensured that Cache is enabled (i.e. "Disable Cache" in unchecked).

When I refresh the page, the call for 167281/ gets made again. It is not retrieved from the cache. This is despite the fact that a cache-control header is set on the response.

Why is Chrome not caching this (and so many other resources) on the page?

Chrome Cache

Cache DevTools

cache-control google-chrome caching
2 Answers

The server returns HTTP status code 304 which means to tell browser that its cache is still valid, and it should use it.

Quote from https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching: "When a validation request is made, the server can either ignore the validation request and response with a normal 200 OK, or it can return 304 Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document"

user_110979000

When you set cache-control: max-age=... you are saying to the requester that is safe to cache the resource for this long.

But its up to each browser (or applications in general) to decide when to actually cache. Mobile browsers may only cache small resources and desktop browsers may as well do the opposite.

Given your example in Firefox Developer Edition 80.0b5 after some reloads the page started to cache, changing the request cache-control to if-modified-since. This means the browser have the resource cached but will query the server for the resource just to check if it still up-to-date. If it is, the server (or some intermediary network router) will just return a 304 response with no actual content, which is exactly the case you showed:

enter image description here enter image description here

But when I hit enter in the URL bar or when I use the navigation buttons, the cache is used without any actual request:

enter image description here

It's important to add that the cache-control is a hint to just not the actual requester: intermediaries will also use this informations to cache responses and make next requests load faster. And that even if the main resource (the html page) is cached, all assets linked in the page have their own cache-control tag.

The "transferred" column on dev-tools seems to show better if the resource was effectively cached locally or not:

enter image description here

user_101196640
Related