If you use jQuery on your website two things to consider are:
- What version of jQuery to use, and
- How should the jQuery library be referenced from your website
Concerning the first question… Ideally everyone would use the latest and greatest version of jQuery. With each new version, the guys and gals building jQuery fix bugs, add new and useful features, and improve the library’s performance. But with any updated product there are potentially breaking changes with each new release, so upgrading carries with it some friction in the form of regression testing your script (and any plug-ins you are using). So then the question really becomes, when does the benefits of the new version outweigh the cost of upgrading – and that is a question you’ll have to answer for yourself.
Concerning the second question… Rather than hosting the jQuery library locally, public facing websites should use a Content Delivery Network (CDN). In his blog post, 3 reasons why you should let Google host jQuery for you, Dave Ward provides an excellent summary of what a CDN is and why you should use one:
A CDN — short for Content Delivery Network — distributes your static content across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network. …
Potentially the greatest (yet least mentioned) benefit of using … a CDN is that your users may not need to download jQuery at all.
No matter how aggressive your caching, if you’re hosting jQuery locally then your users must download it at least once. A user may very well have dozens of identical copies of jQuery-1.3.2.min.js in their browser’s cache, but those duplicate files will be ignored when they visit your site for the first time.
On the other hand, when a browser sees multiple subsequent requests for the same … hosted version of jQuery, it understands that these requests are for the same file. … This means that even if someone visits hundreds of sites using the same hosted version of jQuery, they will only have to download it once.
(As an aside, a common concern I hear from clients when I suggest using a CDN is the fear that if the CDN goes offline then their site will break. The good news is that you can use a CDN as your primary source for jQuery and provide a local, fall-back version should the CDN be down. This Stackoverflow question - Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail – shows a couple of ways to accomplish this.)
Dave Ward’s jQuery CDN Survey
In September 2010, Dave Ward ran an interesting experiment – he wrote some software that crawled the 200,000 most popular websites (as reported by Alexa) and examined how they referenced the jQuery library (if at all) and to answer questions like:
- Did they use a CDN?
- If so, which CDN?
- And so on.
In 6,953 reasons why I still let Google host jQuery for me Dave shares his results, which I’ve summarized here:
- Only one top 1,000 ranked Alexa site uses the Microsoft jQuery CDN (Microsoft.com)
- 47 of the top 1,000 ranked Alexa sites use the Google CDN
- 6,953 of the top 200,000 sites use the Google CDN
The lesson to take away from Dave’s study is that you should use the Google CDN to host the jQuery library because using that CDN gives you the greatest likelihood that your visitors already have that version of the jQuery in their browser cache.
Repeating Dave’s Study
I decided to repeat Dave’s study so that I could see what interesting unreported information lie in the data. So I whipped up my own application to crawl the 13,247 top rated Alexa sites using the Html Agility Pack to grab all <script> elements with an src attribute, saving the src path if it contained the substring “jquery”. Before showing you my data, let me repeat the same considerations/warnings Dave noted with regard to the accuracy of his survey:
I’ll be the first to admit that my approach is fraught with inaccuracies:
- Alexa – Alexa itself isn’t a great ranking mechanism. It depends on toolbar-reported data and individual rankings must be taken with a grain of salt. However, I believe that aggregate trends across its top 200,000 sites represents a useful high-level view.
- HTTP errors – About 10% of the URLs I requested were unresolvable, unreachable, or otherwise refused my connection. A big part of that is due to Alexa basing its rankings on domains, not specific hosts. Even if a site only responds to www.domain.com, Alexa lists it as domain.com and my request to domain.com went unanswered.
- jsapi – Sites using Google’s jsapi loader and google.load() weren’t counted in my tally, even though they do eventually reference the same googleapis.com URL. Both script loading approaches do count toward the same critical mass of caching, but my crawler’s regex doesn’t catch google.load().
That’s a very thorough way of saying, These results are not definitive, but are meant to give a general overview or understanding of the jQuery and CDN usage landscape.
I leave you with what I found to be some interesting statistics…
Resurrecting the Microsoft CDN Bit By Bit
For die-hard supporters of the Microsoft CDN, you’ll be happy to know that there is now more than one top 1,000 ranked site that uses the CDN! In addition to Microsoft.com (rank 24), SparkStudios.com (rank 359) and XBox.com (rank 650) now also use the Microsoft CDN. However, none of these three sites (nor www.asp.net – rank 1,226) use the suggested CDN URL:
The CDN used to use the microsoft.com domain name and has been changed to use the aspnetcdn.com domain name. This change was made to increase performance because when a browser referenced the microsoft.com domain it would send any cookies from that domain across the wire with each request. By renaming to a domain name other than microsoft.com performance can be increased by as much to 25%. Note ajax.microsoft.com will continue to function but ajax.aspnetcdn.com is recommended.
Only two sites in my survey actually use the ajax.aspnetcdn.com - wwwwwwwwwww.net (rank 7,542) and mmajunkie.com (rank 8,057). A total of 20 websites in my survey use ajax.microsoft.com.
The Ten Most Popular Websites That Host jQuery at Google’s CDN
Here are the ten most popular sites that use jQuery hosted at the Google CDN, along with which version of jQuery they use:
|Domain ||jQuery Version |
|10 ||twitter.com ||1.3.0 |
|98 ||fileserve.com ||1.3.2 |
|111 ||taringa.net ||1.4.2 |
|117 ||twitpic.com ||1.4.2 |
|123 ||xtendmedia.com ||1.4.1 |
|145 ||stumbleupon.com ||1.4.2 |
|174 ||guardian.co.uk ||1.4.2 |
|175 ||stackoverflow.com ||1.4.2 |
|187 ||imgur.com ||1.4.1 |
|204 ||reference.com ||1.4.2 |
jQuery Version Popularity
The following graph shows the popularity of different versions of jQuery. The bar height represents the total number of sites in my survey that use the particular jQuery version, whereas the red portion indicates the number that host jQuery on the Google CDN.
Note that my method for determining the jQuery version was by examining the URL itself and did not actually search for the version in the actual jQuery file. Google’s CDN uses URLs that embed the version number. Microsoft’s CDN embeds the version number in the file name. For those that hosted jQuery locally (or with some other CDN), I searched both the URL and file name for a version string. The vast majority of sites that self-host jQuery did not include any version identification in the URL or filename (e.g., the file was hosted at a path like /scripts/jquery.min.js) and therefore aren’t represented in this graph. However, I think the pattern here can be extrapolated to those site’s where the version number isn’t part of the URL/file name. Namely, version 1.3.2 and 1.4.2 are the most used.
For the record, there are only two sites in my survey that use version 1.3.0 – Twitter.com (rank 10) and MagicBricks.com (rank 4,324).
jQuery Usage in Aggregate
Of the 13,247 sites surveyed, more than 35% of the sites (4,689) use jQuery…
Of these 4,689 sites…
- Only 18% of these sites use the Google or Microsoft CDNs…
- 22 use the Microsoft CDN
- 826 use the Google CDN