Benefits of Google hosted jQuery

Basically, you should see this kind of code inside a header tag of a website:

That is the normal way of including jQuery library in your website. There’s no problem of doing this, but there’s a better way. Google AJAX Libraries serves jQuery to your users coming directly from Google’s network of datacenters. There are several advantages of this over hosting jQuery on your own server:

1. Decreased Latency
2. Increased Parallelism
3. Better Caching

I’ll explain those three benefits of Google’s CDN and show you some of examples on using this service.

Decrease Latency

CDN short term for Content Delivery Network – this distributes your static content over servers in diverse, various physical locations. When a browser managed to resolve the URL of these files, their download will automatically come from closest available server in the network. In Google AJAX Libraries CDN, users not physically near your server would still be able to download jQuery faster than forcing them to download it from your server.

Increased Parallelism

To help avoid unnecessary overloading servers, limiting the number of connections of browser can be made simultaneously. Depending on browser, the limit might be minimized into two connections per hostname. By the help of Google AJAX Libraries CDN it will eliminate one request to your site, allowing your local contents to be downloaded in parallel. However it doesn’t make a big difference for users with a six connection browser, but those still uses a browser that uses only two, the difference is obvious.

Better Caching

Ideally, the greatest but least mentioned benefit of using the Google AJAX Libraries CDN for you jQuery is that your users are not required to download jQuery at all. It doesn’t matter how aggressive your caching is. But if you’re hosting jQuery locally, the users will need to download it at least once. Even if they have tons of identical copy of jQuery in their cache, those have no use when the user visits your website first time.

How to do it

Now, you’ve been probably convinced by Google AJAX Libraries CDN. It’s time to show you on how to do this stuff. Out of two methods available, this method is the one that Google recommends: The google.load() approach offers the most functionality and performance. Example:

// You may specify partial version numbers, such as "1" or "1.3",

//  with the same result. Doing so will automatically load the

//  latest version matching that partial revision pattern

//  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.4).

google.load("jquery", "1.4.4");

google.setOnLoadCallback(function() {

// Place init code here instead of $(document).ready()

});

There’s nothing wrong with this, actually it’s an improvement over hosting jQuery yourself, and it doesn’t offer the best performance though. The image above clearly shows that loading, parsing, and executing jsapi affects the actual jQuery request negatively. It’s not a big amount, but it’s a delay. The worst part is that you can’t reliably use a $(document).ready() handler in conjunction with this kind of load method. It requires the setOnLoadCallback().

Back to Essentials

Above all that drawbacks to the google.load() method, I’d recommend using this kind of old way This avoids the jsapi delay and eliminates three useless HTTP request. I would recommend and prefer this one.

Conclusion

At the end of the day, the decision is in your hands. You may choose to host the jQuery locally on your server or use the Google AJAX Libraries CDN. But I hope the explanation above does completely shows the advantage of hosting jQuery via Google AJAX Libraries CDN over hosting it yourself. Ideally the Google AJAX Libraries CDN is clearly better.

Frequently Asked Questions about Google Hosted jQuery