Chrome doesn't cache images/js/css

CachingGoogle ChromeHttp Headers

Caching Problem Overview

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?

Caching Solutions

Solution 1 - Caching

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

Solution 2 - Caching

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.

Solution 3 - Caching

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 -

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

  2. Press f5, this would verify if the file has become stale (probably that is how you are refreshing)

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

Solution 4 - Caching

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.

Solution 5 - Caching

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

Solution 6 - Caching

I believe you are looking for

Cache-Control: immutable

Categories
Recommended Caching Solutions
Recommended Google Chrome Solutions
Recommended Http Headers Solutions

Previous Solution:

Extender Provider failed to return an Extender

C#asp.net.Net 3.5

Next Solution:

resize font to fit in a div (on one line)

JqueryCss

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRogerView Question on Stackoverflow
Solution 1 - CachingSabrina LeggettView Answer on Stackoverflow
Solution 2 - CachingJacob KrallView Answer on Stackoverflow
Solution 3 - CachingtusharmathView Answer on Stackoverflow
Solution 4 - CachingVanuanView Answer on Stackoverflow
Solution 5 - CachingRahulView Answer on Stackoverflow
Solution 6 - CachingAshutosh SharmaView Answer on Stackoverflow