How to Determine if an Item is Cached

When you're looking at a website in your browser, how do you determine what is cached, and what isn't?

More specifically...

• How do you tell if Cloudflare is delivering a specific URL, image, or file from the cache?
• How can you easily see this information more easily for the results of an entire webpage?
• How can you easily visualize the cache status for the images on a webpage?

In general, the best way to determine these details from the browser is through the Network tab of Chrome dev tools. In there, you can check the response header

Use Chrome dev tools and look at the header; 

• HIT: The resource was successfully served from Cloudflare's cache.
• MISS: The resource was not found in Cloudflare's cache and was fetched from the origin server.
• EXPIRED: The resource was found in Cloudflare's cache but is stale and needs to be refreshed.
• BYPASS: Cloudflare was instructed to bypass the cache and retrieve the resource from the origin server.
• DYNAMIC: The resource was not cached because it's considered dynamic (e.g., due to cookies or query strings).
• STALE: The resource is served stale from the cache because Cloudflare couldn't reach the origin server.
• UPDATING: The resource is being updated in the background while serving a stale version.

Image caching 

If you use Google Chrome there is an excellent plugin called Dr. Flare. When it's switched on, it will color code images depending on their cached status.

• Green-tinted images are served from CF's cache
• Red-tinted images are not cached and are served from the origin server
• Grayed images are external, served from elsewhere

https://chrome.google.com/webstore/detail/drflare/pibckhncbjabhlomohgcdedacopeooml/related?hl=en