Using IIS7 why are my PNGs being cached by the browser, but my JS and CSS files not?
- by Craig Shearer
I am trying to sort out caching in IIS for my site.
Basically, I want nothing cached, except for .png, .js, and .css files.
At my site level, I opened the HTTP Reponse Headers and used the "Set Common Hedaers..." to set content to expire immediately.
I have no Output Caching profiles set at any level in IIS.
I clear my browser cache then try accessing my site. When my site requests a PNG file, I see responses like:
Accept-Ranges bytes
Age 0
Connection Keep-Alive
Content-Type image/png
Date Thu, 12 Apr 2012 21:55:15 GMT
Etag "83b7322de318cd1:0"
Last-Modified Thu, 12 Apr 2012 19:33:45 GMT
Server Microsoft-IIS/7.5
X-Powered-By ASP.NET
For JS and CSS files, I see responses like:
Accept-Ranges bytes
Cache-Control no-cache
Connection Keep-Alive
Content-Encoding gzip
Content-Length 597
Content-Type text/css
Date Thu, 12 Apr 2012 21:55:15 GMT
Etag "06e45ede15bca1:0"
Last-Modified Mon, 02 Nov 2009 17:28:44 GMT
Server Microsoft-IIS/7.5
Vary Accept-Encoding
X-Powered-By ASP.NET
Accept-Ranges bytes
Cache-Control no-cache
Connection Keep-Alive
Content-Encoding gzip
Content-Length 42060
Content-Type application/x-javascript
Date Thu, 12 Apr 2012 21:55:14 GMT
Etag "2356302de318cd1:0"
Last-Modified Thu, 12 Apr 2012 19:33:45 GMT
Server Microsoft-IIS/7.5
Vary Accept-Encoding
X-Powered-By ASP.NET
So, why are my PNGs able to be cached, but JS and CSS files not?
Then, I go into the Output Caching feature in IIS and set up profiles for .png, .css, and .js files. This updates the web.config file as follows:
<caching>
<profiles>
<add extension=".png" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".css" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".js" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
</profiles>
</caching>
I do a "precautionary" IISReset then try accessing my site again.
For PNG files, I see the following response:
Accept-Ranges bytes
Age 0
Connection Keep-Alive
Content-Length 3833
Content-Type image/png
Date Thu, 12 Apr 2012 22:02:30 GMT
Etag "0548c9e2c5dc81:0"
Last-Modified Tue, 22 Jan 2008 19:26:00 GMT
Server Microsoft-IIS/7.5
X-Powered-By ASP.NET
For CSS and JS files, I see the following responses:
Accept-Ranges bytes
Cache-Control no-cache,no-cache
Connection Keep-Alive
Content-Encoding gzip
Content-Length 2680
Content-Type application/x-javascript
Date Thu, 12 Apr 2012 22:02:29 GMT
Etag "0f743af9015c81:0"
Last-Modified Tue, 23 Oct 2007 16:20:54 GMT
Server Microsoft-IIS/7.5
Vary Accept-Encoding
X-Powered-By ASP.NET
Accept-Ranges bytes
Cache-Control no-cache,no-cache
Connection Keep-Alive
Content-Encoding gzip
Content-Length 3831
Content-Type text/css
Date Thu, 12 Apr 2012 22:02:29 GMT
Etag "c3f42d2de318cd1:0"
Last-Modified Thu, 12 Apr 2012 19:33:45 GMT
Server Microsoft-IIS/7.5
Vary Accept-Encoding
X-Powered-By ASP.NET
What am I doing wrong? Have I completely misunderstood the features of IIS, or is there a bug.
Most importantly, how do I achieve what I want - that is get the browser to cache only PNG, JS and CSS files?
