68

In Google Chrome, how you can check which files are served from the browser cache, and which comes from the server?

Vishwajeet
  • 1,575
  • 2
  • 19
  • 35
  • 1
    James's answer, from chrome inspector, is brilliant.I'd note some further info..When you open chrome's inspector, and go to the network tab, the relevant table only shows when you refresh the page.. If it says status-200, size-___B then it loaded the page directly. Otherwise it didn't. If it says status-304, size-___B then it made the request but loaded it from cache. If it says status-200, size-(memory cache), then it loaded it from cache and didn't make the request – barlop Jul 27 '19 at 12:46
  • Actually, according to [this response](https://stackoverflow.com/a/44628075/6381989): with a status 304 the request is made and the headers are re-fetched but the file's content is loaded from the cache. If the file's content is modified after a given time (defined by the Cache-Control header), the whole file is downloaded again. – Bruno Silvano Jan 06 '20 at 15:43

2 Answers2

84

In Chrome Developer Tools switch to the Network tab and on the Size column it will either give you the size of the downloaded content or say (from disk/memory cache).

Cached requests

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
James
  • 80,725
  • 18
  • 167
  • 237
  • Mine always shows the time,I have minified the files using gulp and each time I refresh the files are requested from server.I to make browser cache the files?Earlier I thought it was a default feature. – KillABug Apr 13 '16 at 07:28
  • @KillABug browsers caching generally is a default feature. Do you hash, timestamp or version your filenames? – James Apr 13 '16 at 12:35
  • No I intend to but, currently each browser refresh makes a new call to all static files. I think I need to update the headers for 'max age' combined with versioning to make the caching work for me. Your inputs sir. – KillABug Apr 13 '16 at 13:31
  • @KillABug headers are a good place to start, check what your server is returning or if you want to be explicit set your own. – James Apr 13 '16 at 15:55
  • Yes right now nothing specific in the `. htaccess`, the default values must be returned. Is it due to the application server returning the files? Does the browser behave differently for an app server and something like S3 which is a static storage. Just curious,will read about it for sure. Thank you for the inputs. – KillABug Apr 13 '16 at 16:06
  • 36
    Make sure to uncheck "disable cache"... because you probably have it checked :) – craigmichaelmartin Aug 02 '16 at 18:55
  • Ah. just one thing, when is says "from cache", it means which kind of catch? Either what' stored into my browser's catch or what's cached on the website's server? – stack Sep 06 '16 at 13:26
  • But when Chrome shows status of the file as 304 (not modified), do we consider that it was cached? – Azim Oct 20 '16 at 07:11
  • @Azim yes, not modified = from cache. – James Oct 20 '16 at 09:19
  • Noe that when you force reload a page (Ctrl/Cmd+Shift+R), Chrome will never cache requests, even if the same request is made twice or more from the same page. For example, if you load the same image in two places, you'll never see "from disk/memory cache" for the subsequent requests. – Dan Dascalescu Feb 25 '17 at 03:47
  • 3
    When implementing an [ETag system](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#ETags), there will always be size due to the connection of retrieving the headers. When i doubt force google to disable the cache, load it and view the size (and write this down). Then enable the cache againt and the size is much lower, usually a few hundred bytes, the cache is working. – engineercoding May 17 '17 at 18:54
  • Brilliant answer. I'd note some further info..When you open chrome's inspector, and go to the network tab, the relevant table only shows when you refresh the page.. If it says status-200, size-___B then it loaded the page directly. Otherwise it didn't. If it says status-304, size-___B then it made the request but loaded it from cache. If it says status-200, size-(memory cache), then it loaded it from cache and didn't make the request – barlop Jul 27 '19 at 12:46
  • Note that this works for `assets` only, not for the actual page HTML. It will never show "from cache" next to the actual html page even if it's loaded from cache (checked with server-side breakpoints: they were no serevr hit, but chrome still showed it is loaded over the network) – Alex from Jitbit May 16 '20 at 15:35
7

If you can't see the size column then you may need to close this window

close the headers, preview, response tab

The size column will tell you if the response is coming from cache or over the network.

joshuakcockrell
  • 5,200
  • 2
  • 34
  • 47