Chrome slow to load resources `(from disk cache)`

Question

My site http://www.front-end.io configures the HTTP requests to load resources from cache with first priority. So my header will be like:

cache-control:max-age=315360000
ETag:W/"11913b-ks0rwRQM+ijHcl1HDuse3g"

Chrome indeed does not initiate any request (even 304) to the server, it loads from the cache directly:

It takes my Windows10 Chrome >400ms to load the js file from local disk.

My Ubuntu Chromium also takes >100ms.

But FireFox takes around 10ms only!

I found this question as well, Google Chrome load image from cache slower than download, but there are not explanations.

Could anybody help? Thanks.

Answer 1

Probably that is wrong timing information.

In order to Chrome Dev Tools such as Timeline display correct information you must disable extensions to exclude noise that they produce. Relevant excerpt from How to Use the Timeline Tool article by Kayce Basques:

Disable extensions. Chrome extensions can add unrelated noise to Timeline recordings of your application. Open a Chrome window in incognito mode, or create a new Chrome user profile to ensure that your environment has no extensions.

Although some extensions can intercept resource requests in blocking fashion Grammarly is not one of those extensions. It doesn't have required webRequestBlocking permission specified in manifest file. Check chrome.webRequest page for more information.

If you measure time that took browser to get /vendor.61e0ab918e699695d3a3.js script from disk cache, compile and execute it you will see that it is pretty much constant regardless of whether Grammarly enabled or disabled. You can use code snippet below:

<script>var startTime = performance.now();</script>
<script type="text/javascript" src="/vendor.61e0ab918e699695d3a3.js"></script>
<script>
  var endTime = performance.now();
  console.log("Time: " + (endTime - startTime) + " [ms].")
</script>