9

I'm running WP website with cache plugin enabled. The site is running slow so I decided to check which element is consuming more time to load. Straight to F12 (chrome web tools) and from there the tab Network. What I see and I don't understand is why some of the files are loading from disk cache and other no. Please see the attached image (column "Size")

web tools screenshot

So, if you know the answer guys, please share it.

Thank you!

Jesse
  • 1,386
  • 3
  • 9
  • 23
Tzvetan Jordanov
  • 113
  • 1
  • 8
  • Well for starters, the browser could have been explicitly _instructed_ to cache some resources differently than others … – 04FS Jan 20 '20 at 15:30
  • Which plugin do you use now? Possible you need to improve the setting. – Simone Rossaini Jan 20 '20 at 15:31
  • 1
    The disk / memory cache won't be the slowdown. Your 304's, might be. Although a 304 means not modified, the client is still having to do a HEAD request to find out. In your screenshot alone there are 12 304's, that's 12 requests to the server, and if this is not using HTTP2/SPDY it's wasted time, and wasted even if HTTP2. It also looks like it's all you CSS that's doing, check the expires headers for these and maybe increase. – Keith Jan 20 '20 at 15:38
  • I'm using the cache plugin Spped of light and the plugin manages the expire headers. By the way I tested many cache plugins and they all work the same way ... – Tzvetan Jordanov Jan 20 '20 at 16:14

3 Answers3

3

Memory Cache- stores and loads resources from Random Access Memory (RAM). It is fast because it is easy to load resources from RAM. These resources will persist until you close the Browser or you manually clear it.

Disk Cache- It stores and load the resources from disk and it is persistent. It will not contact webserver over network to get the data.Disk cache is usually included as part of the hard disk.

I guess browser will decide the type of cache storage based on the type of the resources or based on their frequency of usage.

Sometimes we use assets or resources from other sites(third party) these contents will be transferred over the network and size of those contents will be donated in Bytes(B).

Community
  • 1
  • 1
Amaresh S M
  • 2,936
  • 2
  • 13
  • 25
  • 2
    I think it is also depends on whether the hosted environment supports SSL or not. On a customer, their domain was not https (no cert) and disc cache did not worked if you perform refresh, everytime the content was read from tomcat. but after installing a proper cert, the content was read from browser disc cache (chrome) provided that resources not modified – benchpresser Jul 30 '20 at 08:44
2

It seems that all resources are loaded from cache. The difference is some resources are read from disk cache. Some resource are read from memory cache and the rest come from 304.

ETag and cache-control decide whether a resource should be read from local disk/memory cache or require to be refreshed(304). If the resource expired, then chrome will send request to server to check whether the file need to be updated. The size of 304 request is just the size of request entity not the size of your source file.

If the resource didn't expire, chrome will try to read from memory/disk cache and it won't send any request to server side.

It is unclear how web browser decide the cache type. According to some document, we just notice that chrome are prefer to save css file into disk cache and save img/font/js file into memory cache.

Jokies Ding
  • 3,374
  • 1
  • 5
  • 10
  • 1
    how/where do we set ETag and cache-control? Memory cache is simple topic, but disc-cache is complex. Even for same product, we get different behaviours on different installations and environments with the same browser. I think the deployed env. (tomcat), firewall, routings, SSL (remote part issues) plays also a role when determining to use disk-cache or not. On some customer i can not use the disc cache it always gets a fresh copy but with the same product with same browser on other customer it reads from disc (on all cases resources are never modified). by resources i mean a javascript file – benchpresser Jul 30 '20 at 09:56
  • we have a huge bundle (js file) and not using the disc cache causes performance problems. I search for days why on some customers the disc cache is NEVER used? – benchpresser Jul 30 '20 at 09:58
0

Sometimes HTTP cache of browser is also related to CORS policy.

For example: If your index.html are deployed with HTTP response header Cross-Origin-Embedder-Policy: credentialless, and load JS, CSS or other static files from cross origin domain will NOT hit disk cache or memo cahce.

This is a known issue of Chrome: https://github.com/whatwg/fetch/issues/1253 .

Solution

Add crossorigin=“anonymous” to your script tag, for example: <script type="text/javascript" src="https://your.com/a.js" crossorigin="anonymous"></script>

Junior Tour
  • 439
  • 7
  • 8