Mar 2012

Maximize Your Chances of Caching Your jQuery

by Steve Wortham
Many people will include jQuery on their website using the CDN (content delivery network) from Google, Microsoft, or sometimes jQuery themselves.  There are links for each option on jQuery's site.

This is a good thing for several reasons:

1. Using a CDN in general is a good idea as you're never going to have good performance worldwide with just a single server.  A CDN is optimized to lower the average worldwide latency.
2. Each CDN-hosted copy of jQuery is gzipped.
3. Because so many websites are using these links, there's a good chance that your visitors will have a cached copy of jQuery before ever visiting your site.

There's a catch...
The whole caching issue depends on the links you're using.  I've observed that quite often people aren't linking to exact version numbers of jQuery.

For example, from code.jquery.com you can reference this file...
http://code.jquery.com/jquery-latest.min.js

... and you'll always get the latest copy of jQuery.

Or you can do something similar from Google...
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

That one from Google will get the latest version, assuming it starts with "1". The trouble is that when you use these references you don't get a far-future expiration date set in the cache-control header.  Therefore the user's browser will be checking for updates much too frequently, slowing down your site's load times.

In fact here's a breakdown of several options and their expiration settings...

http://code.jquery.com/jquery-latest.min.js  (no cache)

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js  (1 hour)

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js  (1 hour)

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js  (1 year)


So that last one is what I'd recommend using.  By explicitly stating the exact version of jQuery you want Google sends back a max-age header of 1 year.  So you're greatly increasing the chances that the client will simply use a cached copy.  And if a new version of jQuery comes along with bug fixes or features you really want, then just update your link.



comments powered by Disqus