Setting a local fallback for jQuery served via CDN

by on 10th July 2014

The advantages of using a CDN (Content Delivery Network) to serve commonplace resources are well-known.

Why Use a CDN?

Let’s say a visitor to your website requests a popular library such as jQuery or Mootools – when using a CDN, the content should (depending on setup) deliver from the server that’s physically closest to the user. The coverage, speed and bandwidth of the CDN’s infrastructure thus reduces the strain on your own server, decreasing page load time. What’s more, by referencing a big CDN such as Google’s Hosted Libraries, you can take advantage of cross-site caching. In other words, so many websites now rely on Google to serve jQuery that there’s a large possibility your visitor will already have the library cached from a previous visit to another site using Google’s CDN.

In theory, it’s as simple as this:

But what if the CDN goes down? This is highly unlikely, admittedly, but why leave these things to chance? What’s more, complete dependence on a CDN precludes the possibility of offline development. If your website is reliant on an external library such as jQuery, and your internet dies for the afternoon (or you enjoy coding on the tube…), there’s not much you can do.

Setting a Fallback

Let’s code ourselves a local fallback. That way, if our CDN of choice proves to be unavailable for whatever reason, our own webserver can supply jQuery (or Mootools, etc) along with the rest of our website’s files, and everything will function normally. This is the solution used in the excellent HTML5 Boilerplate:

Here, the ‘||’ is essentially acting as an OR statement. If ‘window.jQuery’ returns FALSE (in other words, jQuery was not successfully loaded), then it executes the next statement – adding a script tag to the page that references our local copy of the library. jQuery for everyone!

Whilst sufficient for the vast majority of websites, this solution is not perfect, however. Upon discovering that the CDN is unavailable, the user’s browser could (in theory) hang for a significant length of time before giving up and falling back to the local copy. During this period, your jQuery plugins (or anything that’s called after jQuery) won’t load.

yepnope.js to the rescue

For those unfamiliar with this tiny Javascript library (1.7kb minified and gzipped!), yepnope is an “asynchronous conditional resource loader” and is integrated into Modernizr. In other words, it lets you load only the scripts you need, and does so in parallel rather than in series, whilst still always executing them in the order you intended.

To use an example similar to the one in their documentation:

In this scenario, both jQuery and our jQuery-dependent plugins are downloaded simultaneously, and will then execute in order. If our CDN fails, we revert to the local fallback version following a one-second timeout, during which time the dependent plugins can still be downloaded.

This is a fairly watertight solution, and offers us the best of both worlds: the speed, coverage, and caching benefits of a CDN, with a quick and efficient fallback solution as our failsafe.

Happy coding!

We're hiring – check out our careers page Careers

Get insights straight to your inbox

Stay one step ahead of the competition with our monthly Inner Circle email full of resources, industry developments and opinions from around the web.