Caching Static Resources in IIS

When a user requests a web page from your server, your web server does not just have to serve up the page itself.  It also has to serve all of the images, JavaScript, CSS and other files needed to render the page.  And this can add up to quite a few bytes having to travel over the wire.  According to this graph at the HTTP Archive site, the total size of the average web page is almost 2 MB.

Data from HTTP Archive (http://httparchive.org/trends.php)

One of the most tried and proven ways to improve performance in all of Computer Science is by caching, and this applies to web performance as well.  By locally caching static assets that change relatively infrequently, we can transfer many fewer bytes over the wire on subsequent page loads, because we already have many of the assets we need cached locally.

Two Use Cases

Consider the following two use cases:

A user going from page to page during a single session within your site.
Usually, there is some content on each page that is the same.  Think of a company or site logo in the header.  This same image is probably used on every page within your site  Rather than having the user's browser download this same image over and over again for each page they visit, we want them to download the image once (on the first page they visit) and then use the cached copy for all of the subsequent pages they visit.

A user visits your site and returns a few days later to view information again
Lets say you are running some sort of web store or site that has some product information pages.  A user might visit your site today and then come back in a few days to double check some of the information or do additional research on that product.  It is possible that some information in that time may change.  But most of that information is static.  Think of product photos.  These are updated relatively infrequently, so what we really want is the browser to download these on the first visit to the page and cache them.  This way, in a few days when the user returns, the browser will not need to re-download these files, but instead just load them from cache.

Benefits

One of the benefits is obvious.  When the browser can use a cached copy of a resource, it doesn't have to wait for that file to load.  This makes the page load faster.

A second benefit though is reduced load on your web server.  Think about it.  Why should your web server be extending cycles and using up network bandwidth serving out the same, unchanged file over and over again.  This is wasteful and ultimately lowers the total number of users you can support per server.

Many people are tempted to think that caching is only important for public facing web pages, but it can be just as important for internally facing web apps.  You may have branch offices that have smaller network pipes back to your main office.  And as just pointed out, caching can save resources on your web server, which ultimately saves your company money.

Implementing Caching in IIS

You can turn caching on from IIS Manager, but all this really does is write some configuration data to the web.config file.  So lets just look at what that data looks like.

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

The critical parameter is cacheControlMaxAge.  This tells IIS to set a header on the response for when the file should expire in the browser's cache.  The format here is (days).(hours):(minutes):(seconds).  So in the example above, we would be caching static content for 30 days.

If you put this configuration section your root web.config file of your site, it will apply to all static content in your website, so images, plain old html files, JavaScript CSS files and any other static files.  If you want to have a more focused policy, then you can create a web.config file in a subdirectory of your site and drop the above text into that file, and the policy will only apply to static items in that folder and its subfolders.  So for example, if you wanted to cache images for 30 days as shown above, but not other file types, you would put this file in a subdirectory called images on your site that contains all of your images for your site.  What this allows you to do is to effectively define separate caching policies per subfolder on your site (and thereby by type if you keep things nice and organized).

Why would you want to do this?  I'll talk about that in a future post as well as how the browser will actually confirm that a resource has not changed when it uses a file from its cache.

Useful Links

IIS clientCache Parameter
http://www.iis.net/configreference/system.webserver/staticcontent/clientcache

Google Documentation on HTTP Caching
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control