Save Bandwidth by Serving jQuery, MooTools, Prototype via Google’s AJAX Libraries API

A great way to save bandwidth is to take advantage of Google’s AJAX Libraries API to serve your favorite open-source JavaScript libraries. Here is how Google explains it in their official documentation:

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries.

The AJAX Libraries API provides your applications with stable, reliable, high speed, globally available access to all of the most popular, open source JavaScript libraries. Your application can use our very flexible loader google.load(), or direct, path based access to the scripts.

Usage

There are two different ways to include JavaScript from Google’s network. The first is to simply link directly to the document via <script> element, just like you would when hosting the file on your own server. For example, to include the most recent (compressed) version of jQuery from Google, we write:

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

The second way to include JavaScript from Google’s network is to use Google’s google.load() method. Google recommends this as the “most powerful way to load the libraries,” offering “the most functionality and performance.” To use this method, you simply name your preferred JavaScript library and desired version number, and include the method at the bottom of your <body> element like so:

<script type="text/javascript">
	google.load("jquery", "1.2.6");
</script>

Here is a complete list of available libraries (current as of 11/25/2008):

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.1");
google.load("dojo", "1.2.0");
google.load("swfobject", "2.1");
google.load("yui", "2.6.0");

Note the syntax used here:

google.load("[name of library]", "[version number]")

Name of library is a no-brainer; the version number is more flexible. The google.load() versioning system enables as much precision as needed. Specifying a full version number (e.g., 1.2.3) will load the exact version; specifying a partial version number (e.g., 1.2) will load the most recent version available for that particular branch. This logic also applies when loading the scripts directly via <script> elements.

Available JavaScript Libraries

Here is a current list (as of the time of this writing) of JavaScript libraries available from Google’s distribution network. All of these libraries are available via either inclusion method (i.e., google.load() or <script>). For more information, or to check out a current list (with current version numbers, etc.), visit Official Developer’s Guide. This list is current as of today, November 25th, 2008:

jQuery

  • script name: jquery
  • versions: 1.2.3, 1.2.6
  • load request: google.load("jquery", "1.2.6");
  • uncompressed: google.load("jquery", "1.2", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
  • script site: http://jquery.com/
  • note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild..

jQuery UI

  • script name: jqueryui
  • versions: 1.5.2
  • load request: google.load("jqueryui", "1.5.2");
  • uncompressed: google.load("jqueryui", "1.5", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.js
  • script site: http://ui.jquery.com/
  • note: this library depends on jquery. before loading this module, you must load jquery e.g.:
google.load("jquery", "1.2");
google.load("jqueryui", "1.5.2");

Prototype

  • script name: prototype
  • versions: 1.6.0.2, 1.6.0.3
  • load request: google.load("prototype", "1.6.0.3");
  • script path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js
  • script site: http://www.prototypejs.org/

script.aculo.us

  • script name: scriptaculous
  • versions: 1.8.1, 1.8.2
  • load request: google.load("scriptaculous", "1.8.2");
  • script path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js
  • script site: http://script.aculo.us/ (404 link removed 2013/10/28)
  • note: this library depends on Prototype. before loading this module, you must load Prototype e.g.:
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.2");

MooTools

  • script name: mootools
  • versions: 1.11, 1.2.1
  • load request: google.load("mootools", "1.2.1");
  • uncompressed: google.load("mootools", "1.2.1", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js
  • script site: http://mootools.net/

Dojo

  • script name: dojo
  • versions: 1.1.1, 1.2.0
  • load request: google.load("dojo", "1.2.0");
  • uncompressed: google.load("dojo", "1.2.0", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js.uncompressed.js
  • script site: http://dojotoolkit.org/

SWFObject

  • script name: swfobject
  • versions: 2.1 (current)
  • load request: google.load("swfobject", "2.1");
  • uncompressed: google.load("swfobject", "2.1", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js
  • script site: http://code.google.com/p/swfobject/

Yahoo! User Interface Library (YUI)

  • script name: yui
  • versions: 2.6.0
  • load request: google.load("yui", "2.6.0");
  • uncompressed: google.load("yui", "2.6.0", {uncompressed:true});
  • script path: http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yuiloader/yuiloader-min.js
  • uncompressed: http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yuiloader/yuiloader.js
  • script site: http://developer.yahoo.com/yui/

Taking advantage..?

This is a relatively new service provided by Google. I am interested in whether or not you are taking advantage of it. I have heard reports of many gigabytes of saved bandwidth thanks to Google’s AJAX Libraries API. What about you? Are you planning on using it? Already using it? Share your experience with performance, reliability, bandwidth, or other aspects. It’s fascinating..

Chillz! :)