How to know if resource was truly loaded from cache in chrome devtools?

Question

Chrome devtools network tab shows "Transferred data over network" value of the same size of cached resource file. If I block the last request that appears on above image, picture isn't loaded, but the second request still shows the same amount of data was transferred. How to know if the image resource is really being pulled from cache and bandwidth is being saved?

Note: I'm using max-age Cache-control policy and in Firefox it is clearly working.

Toggery

Does this answer your question? Check whether network response is coming from server or Chrome cache – Calli

Unfortunately this doesn't answer my question. Even though I'm using max-age in the cache-control header and a subsequent request with a cached response is made right away, the transferred data still shows approximately the same amount of data as the cached file itself and not just a few hundred bytes as it was expected. – Toggery

But yet, analyzing this has provided me with more evidence that data is not being retrieved from cache, it's just not enough to conclude it, though. – Toggery

Answer 1

The ultimate answer to you question can be provided by the access logs of the server you are requesting the ressource from. Just add an "fingerprint parameter" to your request and check the access log from the server.

Another option would be using an extension like webQsse (https://chrome.google.com/webstore/detail/webqsee-web-sniffer-recor/gamdpfnfkjknkimfbboonmgdfnondfme) which also displays where the image is loaded from.

Baculiform

Answer 2

You can see the content being loaded from the disk or memory if you open the network tab in Chrome dev tools.

Example

Studhorse