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:
<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, Nov. 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: https://jqueryui.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://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/ - 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: https://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: https://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: https://github.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! :)
18 responses to “Save Bandwidth by Serving jQuery, MooTools, Prototype via Google’s AJAX Libraries API”
OMIGOSH you just reminded me that I need to check out if it works with Javascript disabled! Aieee! I am very impressed with your Slider script because I like it that it’s completely usable even when the visitor turns off Javascript. Deep inside I thank myself for placing the links at the bottom – for some reason, if I’ve tried to place the links on top, visitors without javascript will have a hard time navigation as the page will position at the top of the anchored container when the the link is clicked. If the links are above, they’ll have to keep scrolling to the top to see the tabs. Phew!
Have a great December!
#8 Louis: it’s clear from the comment you posted that you have absolutely no idea what you’re talking about and you couldn’t use these services even if you wanted to. Which, thankfully, you don’t.
I think it is very interesting to use google for delivering libraries but presently I have the problem that not all functionality is working with mootools from the google network.
I am not only using the core from mootools I am also using ‘more’.
mootools-1.2-more.js
Is there any way of combining
http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js
with
mootools-1.2-more.js
When I use the combination of googles cdn and the ‘more’ from my server, my site doesn’t work properly.
Any ideas?
@15
ill do this, check if you have the right more version, oder check if it works with the 1.2.2 Core from Google:
http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
@ HeadY
Besten Dank! It works!
I am using:
mootools/1.2.3/mootools-yui-compressed.js
and I took a new ‘more’ from the mootools ‘more builder’ website.
Now everything works fine.
:)
Don`t like Mootools too :(
But I love jQuery.
And your methods is good too.