how to cache css, images and js?

Question

I would like to have images, css, and javascript cached client-side on their browser when they load up a web page. There are so many different types of caching I am confused as to which ones to use with asp.net mvc.

Would it also be possible to have their browsers check for new or modified versions of these files?

Thanks!

Answer 1

You need to set cache control headers on the server. You can do this by sticking this in your web.config:

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

This would tell the browser now to even check for new content on anything static for 30 days.

For your second question, provide some mechanism of adding a querystring to the content. In my current project we compress and combine and javascript and css as part of the build. When putting links in the page is looks like:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>

The querystring is the Major.Minor.0.Changeset number and changes anytime we push a build, causing the client to re-fetch it. The same exact thing happens on stylesheets in their <link> element.

Answer 2

Take a look at the answer I posted here for a solution that maximises the benefit of using caching, and avoids any problems with needing users to 'hard' refresh (Ctrl+F5).

It uses an MD5 hash of the content itself in the URL, so that the URL remains the same as long as the file is the same, which is really the goal. Calculating the hash is super fast, and it's cached in memory on the server so page rendering isn't noticeably slowed down. The whole thing is measured in microseconds, and the benefits have been (on my site for scuba divers) awesome so far. I apply it to all images, CSS and JS with the exception of images from within CSS files as they're not server-generated on my site (yet.)

Answer 3

@Paul Creasey and @Salsa are both correct that browsers will handle caching by default so long as the link is the same.

As you mentioned, this raises a problem when you need to update those files as you have no guarantee that the client's browser will check for an updated version. In many cases they only do this after a fixed amount of time has passed which can create a crummy user experience.

There are a number of questions already asked on this site as to how to handle alerting the client browsers to refresh the cache. In short, they all rely on changing the link when you change the file's contents.

You can append a parameter to the URL that will only be used for caching purposes such as:

<script src="/myJavascript.js?version=4"></script>

Then just change the version number when you change the contents and need to force a client side refresh ala this answer.

Answer 4

This is best done in IIS or in your config file - make sure your CSS/JS/images are set to never expire.

When you reference them from your code, I suggest appending a version or build-date to the filename, e.g. script.js?20100120, so that when you do come around to changing them, you just need to change the version to force a refresh from all the browsers that have cached it.

Answer 5

Client side caching is handled automatically by browsers when you properly set Cache-Control headers and set web.config. Like that :

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

Answer 6

Browsers take care of this for you automatically, actually. You have to go out of your way to get them to NOT cache css, js, html and images.

I'm not that familiar with ASP MVC, but I think they type of caching you're thinking of is opcode caching for your created dynamic output server-side?