To speed up the load time for the visitors, it is crucial that everything that
can be cached by the browser IS cached by the browser. That includes static
files such as images, stylesheets and script files. By letting the browser cache
all these files means it doesn't need to request them again for the duration of
the cache period. That saves you and your visitors a lot of bandwidth and makes
the page load faster. A well primed browser cache also triggers the load and
DOMContentLoaded event sooner.
By adding this snippet to your web.config, all static files are cached in the
browser for 1 year:
<staticContent>
<clientCache cacheControlMode=”UseMaxAge” cacheControlMaxAge=”365.00:00:00?/>
</staticContent>
This setting sets the expiration date of the file one year in the future. It
does that by setting an HTTP header that instruct the browser to add the file to
its internal cache. If you hit F5 or ctrl-F5, the browser will request the files
no matter what the expiration is set to.
A major problem with client-side caching is if your static files change before
the cache expires. Then the visitor with the old version in the cache won't see
the new file until she clears the browser cache or hit F5. Therefore, this
setting must be used with caution and probably with a shorter expiration time.