Question

I just searched the web but could not find a good answer to this:

The Google page speed extension for FF told me to cache files on my website (PHP). Therefore I updated my .htaccess (in my beta-area of the website) in order to cache certain types of files:

ExpiresActive On
ExpiresDefault A0
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

While coding in the beta area, I noticed that due to the cache control settings, I need to press F5 to get the lastest .css file for example. That’s not bad for me… however what about the users?

So can I tell the browser to re-download all files (only) when I update my site (or the file expires) and use the cache if not?

It would be perfect if I could tell the browser: “Hey, all files before Update-time are old, please re-download them – however files after Update-time are ok, use the cache.”

Answer 1

Here’s a simple approach I sometimes use, which doesn’t require any complication configuration.

Whenever you modify a css or javascript file, simple add a dummy parameter to the markup. I typically use the current date and/or time. For example:

<link type="text/css" rel="stylesheet" href="site.css?120911" />

This forces the browser to download a new copy of the file when you need to update it, while still allowing you to maintain consistent file names behind the scenes.