1

I'd like to speed up my site's loading time in part by ensuring all CSS/JS is being cached by the browser, as recommend by Google's PageSpeed tool. But I'd like to ensure that visitors have the latest CSS/JS files, if they are updated and the cache now contains old code.

From my research so far, appending something like "?459454" to the end of the CSS/JS url is popular. But wouldn't that force the visitor's browser to re-download the CSS/JS file every time?

Is there a way to set the files to be cached by the browser, but ensure the browser knows about updated versions of the cached files?

Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
Tim Jahn
  • 1,154
  • 7
  • 16
  • 29
  • This question was answered here also: http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files – pedromanoel May 31 '13 at 12:22

4 Answers4

3

If you're using Apache, you can use mod_pagespeed (mentioned earlier by symcbean) to do this automatically.

It would work best if you also use the ModPagespeedLoadFromFile directive since that will create a new URL as soon as it detects that the resource has changed on disk, however it will work fine without that (it will use the cache expiry time returned when it fetches the resource to rewrite it).

If you're using nginx, you could use ngx_pagespeed.

If you're using IIS, you could use IISpeed, which is not a Google product and I don't know it's full feature set.

matterbury
  • 31
  • 2
2

Version numbers will work, but you can also append a hash of the file to the filename with your web framework or asset build script:

<script src="script-5054a101c8b164cbfa570d97fe23cc0d.js"></script>

That way, once your HTML changes to reflect this new version, browsers will just download and cache the updated version of your script.

Blender
  • 289,723
  • 53
  • 439
  • 496
1

As you say, append a query string to the URL of the asset, but only change it if the content is different, or change it when you deploy a new version.

Chris Sedlmayr
  • 979
  • 1
  • 10
  • 25
  • That was my question I guess. I'd have to manually change the appended string before deploying the new code, and ONLY change the appended string if that file changed. I suppose I could automate this somehow with git after-build hooks? – Tim Jahn Mar 25 '13 at 21:32
  • When you deploy, write out the tag/sha and use that. Or md5 the file contents and use that, it's automatic then, but not sure how performant. – Chris Sedlmayr Mar 25 '13 at 21:54
0

appending something like "?459454" to the end of the CSS/JS url is popular. But wouldn't that force the visitor's browser to re-download the CSS/JS file every time?

No it won't force them to download each time, however there are a lot of intermediate proxies out there which ignore query strings on cacheable content - hence many tools (including mod_pagespeed which does automatic url rewriting based on file conents, and content merging on the fly along with lots of other cool tricks) move the version information into the path / filename.

If you've only got .htaccess type access then you can strip the version information out to map direct to a file, or use a scripted 404 redirector (but this is probably only a good idea if you're behind a caching reverse proxy).

symcbean
  • 47,736
  • 6
  • 59
  • 94