Hosted jQuery fallback plan #WebDevGeek

It's estimated that jQuery is employed by over half of all "major" websites. "Major" means highly-trafficked-sites such as NBC, Amazon, Twitter and ESPN. Close to one-in-four of these sites use Google's hosted jQuery library files (a.k.a. Google's "Content Delivery Network" or "CDN") rather than serving local copies of files. There are some great reasons to deliver jQuery via a CDN -- namely a better end-user experience and less server and network loads thanks to CDN content originating from localized source servers and end-user web browser caching of commonly-served files. Employing a CDN, however, introduces an external dependency that can cause sites to seriously malfunction if the CDN becomes unavailable.

The easy solution is to dual-source those critical jQuery files: attempt to load from a CDN and, if that fails, load from a local source instead. The code for this is super-simple and is being used more and more often as websites feel the bite of unexpected CDN service interruptions...

(Almost) Nothing new, here...

This "dual source" solution is nothing new -- there have been plenty of blog posts and helpful comments promoting the same idea. I'm going to go one step better, though, and point out why the two-line script should be in its own file rather than used inline (the way it is most often shown).

First let's see the script. If you are using hosted jQuery from a CDN your include line will look something like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

That example will load version 1.8.0 of the core jQuery library. If the user's browser can't communicate with Google's servers at the "googleapis.com" domain, however, the file won't load and any jQuery scripts in your webpage will fail.  You could avoid this by simply loading up a local copy of the same file:

<script src="/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

In this example I'm loading a copy of the file I've placed on my web server under the directory "jquery/1.8.0".  Three out of four major websites using jQuery choose to use a local copy.  This is good for dependability but it misses the chance to take advantage of the fact that end users' browsers are very likely to already have a CDN-sourced copy of jQuery from recently visiting some other jQuery-enabled website.  Why should the user have to download another copy of the same library again from your site (and why do you want to pay for the bandwidth to needlessly serve up copy-after-copy of that library?)

A Simple Solution

The obvious solution is to attempt to load jQuery from a common CDN and, if that fails, fall back to your local copy. You get to embrace the potential advantages of already-cached copies of jQuery while avoiding the pitfalls of adding a major external dependency.  Even better, the solution script is super simple:

<script>
  // Get jQuery from Google if not already loaded.

  window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"><\/script>');

   

  // If jQuery still not loaded then get local copy.

  window.jQuery || document.write('<script src="/jquery/1.8.0/jquery.min.js"><\/script>');

</script>

Going One Better
Instead of placing the dual-source script inline on your webpage, put it in its own library file and load the file as an external script. This allows you to easily upgrade your website's jQuery version by updating the references in a single file. Create a file "jqloader.js" with the same code (minus the <script> tags) and place it on your web server:

  // "jqloader.js" - Dual-source jQuery loader.
  // Get jQuery from Google if not already loaded.

  window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"><\/script>');

   

  // If jQuery still not loaded then get local copy.

  window.jQuery || document.write('<script src="/jquery/1.8.0/jquery.min.js"><\/script>');

In your web page, load the "jqloader.js" script file the same way you used to load the jQuery file:

<script src="/jquery/jqloader.js" type="text/javascript"></script>

Got DotNetNuke?
If you don't know, DotNetNuke (a.k.a. "DNN") is the most-used dotNet-based open-source framework around. It's also been around quite a while: DNN just celebrated its 10th anniversary. I've worked with it for the past seven years so I'm always keen on new hints for improving the core platform. The "dual-source jQuery" approach is a good example of one of those improvements.

By placing our dual-source-jQuery load script in a file you can easily switch a DotNetNuke-based website to the dual-sourced approach. Once you've set up your local copy of jQuery and have created the "jqloader.js" file, update your DNN jQuery settings to point to "jqloader.js":

1. Go to HOST -> JQuery Settings
2. Enable the "Use Hosted jQuery Version?" checkbox.
3. Add the path to "jqloader.js" as the "Hosted jQuery URL" path. Relative paths are supported. For this example the path would be:  /jquery/jqloader.js

That's it -- your DNN site will now automatically fall back to a local copy of jQuery if the externally-hosted copy becomes unreachable.