15

I've been really digging into Google Page Speed, optimizing a lot of the sites I'm working on to score well on that -- and quite successfully I'm proud to say.

The only downside I've come across is that by some of the caching stuff being done, small changes to JS and CSS tend not to cause a new copy of the files to download.

Is there any way when changes are made to the JS, CSS (or other resources) to force a new copy to download?

2
  • 1
    Does your HTTP server support ETag? Commented Feb 3, 2012 at 15:30
  • Not sure. How do I determine?
    – Keefer
    Commented Feb 3, 2012 at 15:32

3 Answers 3

26

I'm running into similar issues sometimes that JS and CSS is cached to long. The solution that works for me is, adding an versionnumber or timestamp of the last update to the filename as querystring. This way the browser sees the file as changed and it will download it again.

Could be something like this for getting JS:

http://yourdomain.com/content/js/functions.js?v=201232
1
  • FYI on android 2.2 and lower this breaks it i've found.
    – Petrogad
    Commented Mar 26, 2013 at 15:41
5

I know that this is probably apparent, as, you could gather that the "versioning" technique for invalidating cache works for any static resource requested, but in case it is not, I will pipe in here.

We allow branding for some of our applications, and, that means image files very often change during the course of clients' lifetimes with us, as well as other static files previously mentioned. If the same name were to be used for a file, caching would present a problem. Handily, the idea of versioning the source of an image works just as well.

<img src="images/title.gif?v=2" />

Also, it is probably not important to mention this, but, the term "invalidating cache" in this regard, is not technically correct. To invalidate cache is to remove the cache entries. There is no actual way to truly programatically do this for a browser. What we are actually talking about here is asking the web-server for a new file due the name of the file changing, not forceably removing the original file. You can easily test this by changing a file version back and forth between an unused version, and an older used version, and seeing the HTTP 200 and 304 responses respectively.

enter image description here

1

Take a look at the HTML5 Boilerplate. http://html5boilerplate.com/ It does a lot of the stuff you are worrying about automatically and it does handle cache invalidation by using differently named css files every time they are modified.

Relevant snippet from the bundled .htaccess:

# ----------------------------------------------------------------------
# | Filename-based cache busting                                       |
# ----------------------------------------------------------------------

# If you're not using a build process to manage your filename version
# revving, you might want to consider enabling the following directives
# to route all requests such as `/style.12345.css` to `/style.css`.
#
# To understand why this is important and even a better solution than
# using something like `*.css?v231`, please see:
# https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# <IfModule mod_rewrite.c>
#     RewriteEngine On
#     RewriteCond %{REQUEST_FILENAME} !-f
#     RewriteRule ^(.+)\.(\w+)\.(bmp|css|cur|gif|ico|jpe?g|m?js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
# </IfModule>

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.