Avoid same Javascript / CSS file load on different pages of a website

Question

We have multiple pages on a website which require many of the same Javascript and CSS files.

How do we avoid those files being downloaded again if it has already been downloaded by the user browsing some other page?

Answer 1

If the file is in the same path, the browser should automatically cache it. You may want to explicitly specify the cache expiry time, if possible via your web server or programming environment.

Answer 2

If you use an HTTP traffic analyzer like Fiddler you should see that requests for JavaScript and CSS resources return an HTTP code 304 (Not Modified). This tells the browser "the version of the resource you have in your cache is the same as the one on the server so you don't need to download it again".

For even better performance you can explicitly set caching headers for these resources.

This caching tutorial has great info.

Answer 3

You should explicitly set caching headers if you want caching. www.fiddler2.com/redir/?id=httpperf