Cache javascript & css on user's browser and load new one when changes are made

Question

Hi, this question might be available online but sorry that I cant find a solution that I understand. Can someone pls help me?

The situation is this, I would like users' browser to cache external .css and .js files. However, each time I made changes, I would want user's browser be able to load the updated external files instead of using the previous cache. I found out that by adding parameter when including ext .css and .js files will help. But when I did this, I found out that browser no longer cache the files and but keep on loading the external files each time i visit the page. May I know how can i solve this? Thanks..

Answer 1

Most web servers will use the files' modified dates to report whether files have changed to the browser. And browsers should correctly ask for files with an If-Modified header so that cached copies will be used.

Are you sure the browser isn't already doing the right thing?

Answer 2

To understand caching I recommend Mark Nottingham's caching tutorial: http://www.mnot.net/cache_docs/.

If you set the proper "Expires" headers the files will be cached even if you add dynamic URL parameters. For that is indeed the most efficient way to handle your problem.

Answer 3

Basically you have 2 options:

• Use Etag. If you hosting provider allows it you could configure Etag in a .htaccess file: <Directory /path/to/directory>
FileETag INode MTime Size
</Directory>

• Not an parameter, add the version as a part of the filename. E.g.: style_10.css