If we configure components to be cached by browsers and proxies,
how do users get updates when those components change? When an
Expires header is present, the cached version
is used until the expiration date. The browser doesn't check for any
changes until after the expiration date has passed. That's why using the
Expires header significantly reduces
response times—browsers read the components straight from disk without
generating any HTTP traffic. Thus, even if you update the component on
your servers, users who have already been to your site will most likely
not get the updated component (since the previous version is in their
To ensure users get the latest version of a component, change the component's filename in all of your HTML pages. Mark Nottingham's web article "Caching Tutorial for Web Authors and Webmasters" says:
The most effective solution is to change any links to them; that way, completely new representations will be loaded fresh from the origin server.
Depending on how you construct your HTML pages, this practice may be either trivial or painful. If you generate your HTML pages dynamically using PHP, Perl, etc., a simple solution is to use variables for all your component filenames. With this approach, updating a filename across all your pages is as simple as changing the variable in one location. At Yahoo! we often make this step part of the build process: a version number is embedded in the component's filename (for example, yahoo_2.0.6.js ...