CODEWITHSUNDEEP
cachingbrowser-cachehttp-caching
Tzvetan Jordanov
Tzvetan Jordanov

Reputation: 123

Why some css, js and images files are loaded from the disk cache and other no?

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!

Upvotes: 10

Views: 9564

Answers (3)

Junior Tour
Junior Tour

Reputation: 640

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>

Upvotes: 0

Jokies Ding
Jokies Ding

Reputation: 3494

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.

Upvotes: 2

Amaresh S M
Amaresh S M

Reputation: 3010

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).

Upvotes: 2

Related Questions