To optimize the performance of a web site that is hosted in Microsoft’s Internet Information Server 7 it is reasonable to enable client side browser caching for static content (like for example image files, CSS files or JavaScript files) that probably won’t change in the near feature. You can find more information and best practices about utilizing browser caching here.
Client side caching could be enabled by putting a Web.config file with the following content in the directory that contains the files that should be cached:
Using the above example the files will be cached for 10 days in the browser. Detailed information about the <clientCache> element can be found here.
To disable the cache settings in a subdirectory, just create a new Web.config file in that folder and override the cache settings:
You can also use the <location> element to define the cache settings for a specific file:
7 responses to “Microsoft IIS 7: Enable Client Side Browser Caching for static Content in Web.config”
I had been looking for an easy solution like this one. I run my web on IIS 7.5 and could not find alot of information out there on this subject. I wanted to cache my images, and found that adding the web.config file to the folder resolved my issue as you described. thanks!
HI,
the post answers half of my questio,but I still need the other half answered. Once I enable caching on the client browser for a specified number of days when my css or js file changes how can I update the files on the client browsers if the change is done withing the specified number of days.
Hi AJ,
thanks for your comment. What you can do is add a query string to your css and js files (like /path/to/your/file.js?ver=1). This query string could be for example the version number of you software, the timestamp of the deployment date or just a counter that you increase each time you want to force the clients to load the files from the server instead of using the cached ones.
Jan
This is just what we have been looking for! We are on an IIS 7.5 and want to leverage browser caching for our images folder and a CSS file.
Unfortunately, it is not working… Is the “path/to/the/file” relative or absolute? For example, our images are in an image folder.
In addition, can we specify two different files and/or folders with this?
Any help will be greatly appreciated!
Hi Robin,
Thanks for your comment. You can specify the cache settings for different files/folders by either create a Web.config in each directory or by use different <location> sections.
The path needs to be match with the “URL-path” of the resources (see here for more information).
Hope this helps,
Jan
It doesn’t work . It still given me the same report.
Accept-Ranges
bytes
Cache-Control no-cache,max-age=604800
Date
Fri, 15 May 2015 13:00:24 GMT
Etag
“3752dddef88ed01:0”
Last-Modified
Fri, 15 May 2015 10:21:13 GMT
Server
Microsoft-IIS/7.5
X-Powered-By
ASP.NET
X-Powered-By-Plesk
PleskWin
Thanks for the article. It was very useful to see the raw XML but I’m afraid you may have got the no-cache code sample wrong. As misleading as it sounds, no-cache doesn’t disable caching but makes the browser check if the file has changed before downloading.
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en
https://jakearchibald.com/2016/caching-best-practices/