Monday, December 22, 2008

Google hosted jQuery

Formerly Google AJAX API, now Google hosted libraries is a content delivery network (CDN) for several popular JavaScript libraries. The CDN provides reliable, high-speed, high-availability and global access to files hosted on it.

UPDATE:
You can also use jQuery hosted by Microsoft CDN servers.

If you are using one of the libraries belowe, Google has you covered:

  • AngularJS
  • Chrome Frame
  • Dojo
  • Ext Core
  • jQuery & jQuery UI
  • MooTools
  • Prototype
  • script_aculo_us
  • SWFObject
  • Web Font Loader

As you can see, Google CDN also hosts jQuery (as well as jQuery UI). In this post we will concentrate on jQuery.

Google CDN hosts uncompressed as well as minimized jQuery files, supports gzip. The main advantage of using Google hosted jQuery is that if your visitors have already visited some site that loaded jQuery from Google servers, then it would already be on user's machine. So the browser would load it from its' cache.

Today, almost everyone is using Google hosted jQuery. So there is a huge chance that your visitors have it cached. By using Google CDN, you are reducing your page load times.

Here is how to load jQuery from Google servers:

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

At the time of writing, Google hosts the following versions of jQuery:

2.0.3, 2.0.2, 2.0.1, 2.0.0,
1.10.2, 1.10.1, 1.10.0,
1.9.1, 1.9.0,
1.8.3, 1.8.2, 1.8.1, 1.8.0,
1.7.2, 1.7.1, 1.7.0,
1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0,
1.5.2, 1.5.1, 1.5.0,
1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0,
1.3.2, 1.3.1, 1.3.0,
1.2.6, 1.2.3

You can see up to date versions of hosted jQuery versions on Google Developers page.

Legacy method: Loading jQuery using Google AJAX API

Up until jQuery version 1.7.2, Google had javascript library loader API. If your legacy project is already using it to load other libraries, here is how you can use it to load jQuery.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.7.2");
  google.setOnLoadCallback(function() {
    // Your code goes here.
  });
</script>

Loading jQuery UI from Google CDN servers

Google CDN also hosts jQuery UI files. So if you are using jQuery UI you can also load it using these links and code:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- OR Legacy method -->

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
  google.load("jqueryui", "1.7.2");
  google.setOnLoadCallback(function() {
    // Your code goes here.
  });
</script>

Currently Google hosts these versions of jQuery UI library:

1.10.3, 1.10.2, 1.10.1, 1.10.0,1.9.2, 1.9.1, 1.9.0,
1.8.24, 1.8.23, 1.8.22, 1.8.21, 1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16,
1.8.15, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6,
1.8.5, 1.8.4, 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2

9 comments:

  1. Thanks for the tip!

    ReplyDelete
  2. How can I use a jquery ui plugin when using this method?

    ReplyDelete
  3. @Jeff V to load your jQuery UI lib files from Google servers use this link:

    http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js

    ReplyDelete
  4. I am trying to use them for youtube videos...

    ReplyDelete
  5. I always thought its better to host the jquery libs on your own server, that way your not relying on a remote 3rd party hosted site in order for your site to function.

    That said, your right about the jquery library being stored in the cache of users before they hit your site.

    Got me thinking anyway.

    ReplyDelete
  6. Paul Irish has found a good way of adding a fall back in case the CDN is down.

    http://github.com/paulirish/frontend-pro-template/commit/bedeaf91f9a0e7e01915100ccd180e8268838ba4

    ReplyDelete
  7. Need benchmark when loading jquery from CDN from another country

    ReplyDelete
  8. hello sir/madam i m using ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js this file in my site ,,is this free to use

    ReplyDelete