Why does Chrome spend time "downloading" content from cache?

Question

I am serving static content intended to be cached by the browser indefinitely. Chrome is caching it as expected, but is still spending time "downloading" it. I am using Chrome 46.0.2490.71.

As you can see, the content is being served from cache, but still takes 68ms for content download. This is causing the svg images to flash in on every page load, even though the file is cached.

Here is the relevant timeline information from a page load in Incognito mode:

The "Total Time" and "Event Time" fields for each of those events is zero. Replicating this with the file served locally (but still from cache) the "Receive Data" event is only seen once.

A few interesting points to note:

• Serving the same file from my local machine, with the same encoding, does not produce the same download delay.
• Switching to Incognito mode (no extensions) halves the download delay, but does not eliminate it.
• It is quicker to refresh the page, as it appears to take less time to receive a 304 response from the server than to merely load it from cache.
• Closing the dev tools does not appear to have any effect on the delay.
• IE 11, Edge, and Firefox 41 do not show any delay.

What possible causes could there be?

Quade

What extensions have you loaded? Most extensions do not work in Incognito... – Triable

This is probably caused by an extension you installed. Many times they cause weird bugs like this, because they have access to many things in the code/browser... I have never run into this, and I use devtools all the time to measure my sites' performance, so I don't think this is a chrome bug. Just try disabling them, and them allowing them one by one. – Faerie

To be honest I don't think 67ms is unrealistic for loading 142kb from disk. – Springe

I have the same problem, and none of the answers can explain it: Google Chrome, url: d301sr5gafysq2.cloudfront.net/6533ea311688/dist/webpack/… , size: 10MB. 1st download takes ages (23sec - 100+sec) This is not my problem. But refesh also takes 2-3sec with content download being most of it even though it got http response code 304 and the actual downloaded size was 408 bytes. However if I download the file and then open it as file:///tmp/vendor.js then it loads in 15-50ms. – Pitch

Answer 1

So this has to do with the way caching works in Chrome. I don't have personal experience with Chrome's codebase, but I do know a bit about the theory of it. (I also found a reference to Chrome's cache implementation here for the more curious: chromium disk cache)

For reference, here is a screenshot of my loading your actual Stack Overflow question in Chrome with the Network panel open and the Network Throttling option set to "Offline". Notice that every single entry in this list is got from cache!

You'll also notice that Chrome is spending time "downloading" every file. Why is this? Well, Chrome's cache is a database, and that database is also compressed to save space. When you retrieve a document from cache, the price of that retrieval is not zero. Chrome has to look up the item in the cache database, and then inflate that entry into memory so Chrome can work with it. I don't know the exact details concerning how the Network chrome-dev-tools panel shows the times, but I would guess that getting that file from disk, uncompressing it, and then parsing and working with the result is what you're seeing reflected in "Time downloaded."

I can't comment on why other browsers don't also have this delay, since I don't have a lot of experience with them. It might be that they either use a more efficient method of getting things from cache (possible), or it could be that they keep the cache in memory at all times (unlikely), or that they're skipping some of the integrity checks Chrome is making on cache data (possible)

Bartholemy

Is there a way to prioritize what goes into memory vs disk in the cache? – Plaintive

Answer 2

I came across same issue. I implemented PDF Download functionality. on clicking download link I got response in around 260 ms but downloads starts after 10 seconds on chrome.

FIX:- I analysed that my windows system was 64 bit and chrome was 32 bit. After upgrading chrome to 64 bit this issue was resolved. I found resolution at https://bugs.chromium.org/p/chromium/issues/detail?id=103737

Moyra

Answer 3

When I pass header("Content-Length: xxx") it loads like 100% faster!

Sterilize

Answer 4

I had the same issue, downloading from cache took an eternity. Problem was that my file had a gzip size of 410 KB (which is already huge) Unzipped it has a size of 1.5 MB, so the browser used so much time for loading it from the cache then unzipping it.

With the lastest chrome dev tools you see the unzipped size as well:

Autoerotic

Answer 5

I ran into a similar "problem". However, the unexpected lag disappeared once I loaded my page (with its "slow-to-retrieve-from-disk-cache" dependencies) in an Incognito window with DevTools closed. This suggests to me that either the problem was due to interference from either a Chrome extension, or from the DevTools window.

Brasier