Categories:> JavaScript, jQuery

Why load jQuery from the Google CDN

What is jQuery?

JQuery is a small, widely-used JavaScript library that helps to simplify front-end development tasks such as DOM manipulation, element animation, and sending/receiving AJAX content. At the time of writing it can be found in over 24,636,038 sites on the Internet, and there is a huge amount of support for it in the web development community.

What is a CDN?

CDN stands for Content Delivery Network or Content Distribution Network depending on who you’re talking to. It can loosely be defined as a collection of web servers at various geographical locations, with each location containing a copy of the same web content. Since the distance between your site’s visitor and your server has an impact on page load time, it makes sense for a visitor to download your content from the closest server collection. For example a visitor from Glasgow might access the CDN servers in Dublin to download content, where as a visitor from Las Vegas might access the content from the CDN servers in San Francisco. This is a faster approach than forcing the vistor in Las Vegas to go all the way to servers in Dublin to fetch content.

What is the Google Libraries API?

The Google Libraries API is a CDN and loading architecture for the most popular, open-source JavaScript libraries. It allows for high speed and global access to a growing list of the most popular, open-source JavaScript libraries including jQuery, MooTools and Prototype.

So why load jQuery from the Google CDN?

There are two big reasons for this:

Improved Caching

The great thing about loading from Google’s CDN is that if the user has visted another site that also loads from the CDN, then they will already have a cached copy stored locally, so there’s no need to download another copy from the server. This caching effect can help improve the loading time of your site, especially if you’re loading multiple files from the CDN.

Reduced Latency

As I mentioned before, a CDN is distributed across multiple geogrphical locations. This means the vistor is downloading jQuery from a server closer to them, thus helping to reduce latency, which is another important factor.

But what if the site can’t access the Google CDN?

This can happen, maybe the Google CDN goes down (however unlikely!) or you don’t have Internet access in your development environment. Fear not, there are solutions, my personal favourite being the one used by HTML5 Boilerplate. HTML5 Boilerplate uses a nice, simple way of falling back to a local copy in your js/lib folder, shown below:

<!-- Grab Google CDN's jQuery, with a protocol relative <span class="hiddenSpellError" pre="relative ">URL</span>; fall back to local if offline -->
<script class="hiddenSpellError" type="text/javascript">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
// ]]></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>

So there you have it, a quick guide to jQuery and The Google Libraries API and an slick, effective way to fall back to a local copy.


About Ross Gledhill See all posts by author

I’m Ross, a freelance web developer based in Glasgow, Scotland. The large majority of my freelance work usually involves WordPress, but I also have experience in iPhone & iPad apps and bespoke solutions.