Microsoft IIS 7: Enable Client Side Browser Caching for static Content in Web.config

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:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="10.00:00:00" />
    </staticContent>
  </system.webServer>
</configuration>

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:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Cache-Control" value="no-cache" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

You can also use the <location> element to define the cache settings for a specific file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <location path="path/to/the/file">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="10.00:00:00" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

Comments

  1. [JM]

    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!

  2. AJ

    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.

  3. Jan Jonas

    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

  4. Robin

    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!

  5. Jan Jonas

    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

  6. Jorge

    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

  7. Tim Smith

    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/

Leave a comment

Your email address will not be published. Required fields are marked *

*