Search code examples
.netgoogle-chromecachingiisweb-config

Chrome will not cache CSS files. .js files work fine


Chrome will not cache the CSS files on my site, the js files are cached without issue, but the CSS is loaded from server every time. The server is IIS 8 and in my web.config I have:

  <location path="Content/dist">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:15" />
  </staticContent>
</system.webServer>

which sets the cache to expire in 1 day. in the header for my CSS files I can see that it has taken as there is this:

Cache-Control: max-age=86415

The full header is as follows:

Accept-Ranges: bytes
Cache-Control: max-age=86415
Content-Encoding: gzip
Content-Length: 78464
Content-Type: text/css
Date: Thu, 16 Aug 2018 11:46:30 GMT
ETag: "053689a4935d41:0"
Last-Modified: Thu, 16 Aug 2018 10:12:14 GMT
Server: Microsoft-IIS/8.5
Vary: Accept-Encoding
X-Powered-By: ASP.NET

On my local machine, the files are read from cache as expected, but when I push to the server I have the troubling behavior. Its just CSS that this is happening with, .js files from that same folder referenced in web.config are loading from cache. Here is the header from one such file.

Accept-Ranges: bytes
Cache-Control: max-age=86415
Content-Encoding: gzip
Content-Length: 3698
Content-Type: application/javascript
Date: Thu, 16 Aug 2018 11:45:44 GMT
ETag: "f7e1df9a4935d41:0"
Last-Modified: Thu, 16 Aug 2018 10:12:14 GMT
Server: Microsoft-IIS/8.5
Vary: Accept-Encoding
X-Powered-By: ASP.NET

Firefox loads the files from cache as I expect too.

https://gyazo.com/3ba41707c00e7fb539f6b84cc90f70e0

Site URL :

https://devworks.cashbackforex.com/


Solution

  • I faced similar kind of issue and turns out to be web.config's compilation attribute was set to debug=true, as-

    <compilation debug="true"></compilation>

    It causes your files to neither be bundled nor cached on browser. Just removing debug=true resolved my issue. So I changed it to-

    <compilation></compilation>

    Edit-

    For Chrome specifically, it could be related to your certificate.

    Chrome does not cache resources from servers with self-signed certificate.

    See here