12

I know that a common practice is to set an expire time far in the future for css, javascript and image files and then make sure that all browsers fetches the latest content as soon the files changes by appending a querystring (or changing filename) like this

From this <link rel="stylesheet" type="text/css" href="base.css">:

to this:

<link rel="stylesheet" type="text/css" href="base.css?v=1234">

or:

<link rel="stylesheet" type="text/css" href="base_1234.css">

But what about images referenced in a css file?

// Inside base.css 
background: url(/img/logo.png)

// Is this necessary(?):
background: url(/img/logo.png?v=1234)

Or will /img/logo.png be reloaded when base.css changes filename to base.css?v=1234 or base_1234.css automatically?

And also, what about images in src for img-tags?

3 Answers 3

10
+200

The browser is making these requests after determining an absolute path, so if you are 'cache busting' your static assets in this way, you do need to do it for each file individually, no matter where it's called. You can, however, make it easer on yourself by making it a variable on the backend.

You can append the string as a variable that you only have to update in one place on your backend, probably in conjunction with a CSS pre-processor like LESS or SASS to get all your images.

Or use relative paths to your advantage by adding the version to the base url (site.com/folder/styles.css => site.com/v123/folder/styles.css). This can be added to an existing static asset base url variable in your app, then on the server you can just use a UrlRewrite to strip out the version. This way all the images relatively referred to from your CSS automatically get the version too, having the same 'cache busting' effect.

You could be extra clever and set the variable automatically as part of your build process as the last commit hash from you version control system - which will also make future debugging easier.

2

From my experience the cache busting of the css is not recursive. So the querystring at the end of the image referenced in css is required to bust the cache.

To be sure all images are fresh you may want to also cache bust with the querystring version (img.png?v=1234).

2

Chrome seems to be the worse of the browser-bunch for not updating it's cache (perhaps due to the new predictive caching methods it's using) and the way to do this is indeed with a querystring.

This website takes it one step further and uses the simple JavaScript Date().getTime(); method (with or without jQuery) that is attached to all img tags.

Another solution is to write a javascript code so that the browser does not pick up image from the cache and loads it everytime.

The benefit of the above is that individual image-file renaming, for the sake of the querystring, is not needed as the JavaScript handles this in one pass.

While it does use a single line of JavaScript to accomplish this, it's not as high-maintenance as tracking down every img element in a large CSS file, which can take time and add to the file size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.