Increase performance and reduce bandwidth consumption by adding caching directives that browsers will use to cache static assets on the client-side. Can have significant impact on the perceived speed of website page loads.

To instruct web browsers to cache static assets for 1 year, add the following block inside the <system.webServer> node in web.config:

<system.webServer>
	<staticContent>
		<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
	</staticContent>
</system.webServer>

This will respond with the appropriate header to cache all requests to static assets for the current directory on down.

Upon first request of a static asset in the current directory or in one of its children the browser will locally cache the file. Subsequent requests for the same file will be served from the browser’s local cache rather than re-requesting the file from the server (until the cache expires, in this case 1 year, or until the user clears their browser cache or it is otherwise purged from their browser cache).

If you need to omit a subdirectory from caching after implementing the rule above, simply create a new web.config file in that subdirectory with the following block inside that file’s <system.webServer> node:

<system.webServer>
	<staticContent>
		<clientCache cacheControlMode="DisableCache" />
	</staticContent>
</system.webServer>

This will cause IIS to send a Cache-control: no-cache header for assets within that directory (and its children), effectively turning off caching for that content.

One downside to using static asset caching is the loss of control when an updated file might be introduced; if an old logo.png has been cached by the browser, IT will be served rather than the updated file. Renaming the file will cause the new file to be served, or cache-busting techniques such as appending a query_string to the static asset’s url, as in logo.png?v=1.2.3 will address this as well.