Chrome doesn't cache images/js/css

Asked 3/8, 2010 at 21:51 Answered 7/7, 2017 at 6:57

When Chrome loads my website, it checks the server for updated versions of files before it shows them. (Images/Javascript/CSS) It gets a 304 from the server because I never edit external javascript, css or images.

What I want it to do, is display the images without even checking the server.

Here are the headers:

Connection:keep-alive    
Date:Tue, 03 Aug 2010 21:39:32 GMT    
ETag:"2792c73-b1-48cd0909d96ed"    
Expires:Thu, 02 Sep 2010 21:39:32 GMT    
Server:Apache/Nginx/Varnish

How do I make it not check the server?

Segura answered 3/8, 2010 at 21:51 Comment(1)

Have you checked #46191650 ? – Lethargy 3/9, 2021 at 20:3

121

Make sure you have the disable cache checkbox unchecked/disabled in the Developer Tools.

Pretended answered 28/1, 2013 at 17:20 Comment(4)

This helped me solve the same issue. In-case you all are stuck, in the developer tools, click the gear icon at the bottom-right. – Srinagar 5/9, 2013 at 0:19

And to think I was about to write an image serving page, just to enforce cache control. THANK YOU!! – Node 22/10, 2014 at 15:11

I just threw my arms up into the air demanding god to punish me for my stupidity. Also had cache disabled... – Terriss 19/11, 2014 at 0:43

The problem existed between my keyboard and chair. – Sonja 31/1, 2017 at 15:29

What do your request headers look like?

Chrome will set max-age:0 on the request's Cache-Control header if you press Enter in the location bar. If you visit your page using a hyperlink, it should use the cache, as expected.

Thereupon answered 27/4, 2011 at 5:30 Comment(10)

Request headers are also set to max-age:0 for page refreshing, which makes sense. Test using links.. – Dahabeah 16/1, 2012 at 12:30

@Jacob Krall, may I reverse the question. What can I do to fore Chrome always hit server for an image url, even if I visit page using a hyperlink. I have set all cache control headers, etc. but chrome never refreshes this images when navigation through anchor. IE and FF works as expected, refreshes them every time. – Karelian 17/1, 2013 at 0:45

@thedk: what have you set the cache-control header to? – Thereupon 17/1, 2013 at 16:15

@thedk: old question, but: for an apache these htaccess commands will do:

FileETag None; 		Header unset ETag; 		Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"; 		Header set Pragma "no-cache"; 		Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"

(replace ";" with linebreaks!) - if it's just for development you can enable "disable cache" in chromes developer tool's settings menu – Casar 11/6, 2013 at 17:37

@it's other way around – Variform 20/8, 2013 at 16:17

@ChrisNicholson: this works for me just now. I used the back/forward buttons to eliminate server round-trip. – Mima 1/11, 2013 at 9:6

I'm seeing max-age=0 regardless of how I interact with the site. – Nijinsky 2/7, 2014 at 0:36

A). Chrome will also set max-age:0 if you hit refresh in addition to using the location bar. B) Both these behaviors appear to be the case in Firefox as well. I can't speak to other browsers. – Carl 9/12, 2015 at 19:42

With disable cache in developers tools off: F5, refresh, and enter in the address bar all won't work for all static assets. Somehow, some started to get served form disk cache and some not. Back and forth made all static assets got served from disk cache, leading for me to the conclusion that caching is working :) – Inject 29/1, 2017 at 10:56

This makes sense. I think it's because, for average users, hitting enter on the link bar should equate to hitting refresh. – Rime 15/11, 2017 at 1:5

Wow! I was facing the same issue for quite some time.

I'll tell you why you were facing this issue. Your headers are just fine. You receive a 304 because of the way you are trying to refresh the page. There a mainly 3 ways -

Press enter in the address box. You will observe chrome reads the file from the cache first and does not go to the server at all.
Press f5, this would verify if the file has become stale (probably that is how you are refreshing)
Press Ctrl+f5, this is unconditional reload of all static resources.

So basically - you should press the return key in the address bar. Let me know if this works.

Cavorelievo answered 12/5, 2013 at 18:31 Comment(3)

Press Enter in address box still reloads. Copy pasting url in new or same tab and then pressing Enter does not. – Mayonnaise 19/6, 2016 at 18:11

Google Chrome version 58.0.3029.110 - Clicking Enter in the Address bar did not work for me, but copy-paste of the url in a new tab, and then Enter worked... because reasons... :) – Pepita 5/6, 2017 at 13:16

@Tushar - is there any way by which I can avoid sending the request to server in case of F5? As of now it sends the request to server, then server responds back with 304 and then it gets loaded from cache. I want browser to load it from cache directly when someone press F5, as my resources are available in disk cache. – Billion 26/4, 2018 at 6:31

For me, it was self-signed certificate:

https://code.google.com/p/chromium/issues/detail?id=110649

In the above link the Chromium Developer marked the bug: #WontFix because the rule is: "Any error with the certificate means the page will not be cached."

Therefore Chrome doesn't cache resources from servers with self-signed certificate.

Inquisitionist answered 10/2, 2016 at 23:34 Comment(7)

There are a lot of good answers on the page, but this has to be the crucial first step of any https pages – Etymon 29/6, 2016 at 11:45

I am experiencing the same issue. Is there any work around for this? – Polyamide 18/9, 2016 at 17:14

@TumainiMosha you can add self-signed certificate to your browser storage. Than it'll go green and will be cached. – Inquisitionist 18/9, 2016 at 22:58

You saved my day! – Golanka 30/1, 2017 at 15:24

It is cacheing now. On version 63 (mac OS) – Technology 30/1, 2018 at 1:45

Nice thanks I was scratching my head why it cached on firefox and not with chrome – Quarterphase 14/3, 2018 at 15:6

This was the reason for me as well, thanks :) – Karaganda 16/3, 2021 at 9:9

If you want Chrome to cache your JS/CSS files - the server will need to set a "Cache-Control" header. It should look like:

Cache-Control:max-age=86400 (if you want to cache resources for a day).

Splenic answered 3/8, 2010 at 21:55 Comment(5)

Thanks for the reply. Here are the new headers: Cache-Control:max-age=2592000 Connection:keep-alive Date:Tue, 03 Aug 2010 21:57:36 GMT ETag:"2792c73-b1-48cd0909d96ed" Expires:Thu, 02 Sep 2010 21:57:36 GMT Server:Apache/Nginx/Varnish but it still doesn't work. Chrome still checks the server for modifications. – Segura 3/8, 2010 at 21:58

How are you making sure that Chrome checks the server for modifications ? Are you using something like Fiddler ? – Splenic 4/8, 2010 at 17:12

@Splenic Ctrl-Shift-I in Chrome – Unveil 12/7, 2012 at 3:41

Note chrome caches JS/CSS by default, without a cache-control header, at least for regular page loads. On reload or shift-reload it fetches new from the server. – Marismarisa 9/1, 2014 at 17:9

On devconsole, if chrome loads cached file you should see (from cache) on the size column against the file – Vivie 5/4, 2015 at 20:27

I believe you are looking for

Cache-Control: immutable

Soke answered 7/7, 2017 at 6:57 Comment(2)

Not that currently then only browsers that support this are Firefox and Edge. developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… – Lytta 26/9, 2017 at 12:6

chrome and safari also have support for it. Please check #41937272 I believe this is the solution if you don't control client. – Soke 27/9, 2017 at 5:26

Recommended topics

Hot tags