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:

Decreased Latency

Increased Parallelism

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:

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.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.