libraries

How & why you should use Google CDN

What is Google’s CDN?

Google CDN stands for Google Content Distribution Network. It provides a loading architecture for the most popular, open source JavaScript libraries.

Why should I use Google’s CDN links?

Most of the websites I see, still host their JavaScript Library on their own server (Most, not all). Actually never have I ever seen any Web Development Blog hosting the library on their own server. They always use Google CDN, which is great because it has a number of advantages:

  1. Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
  2. Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
  3. There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN?

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the <script/> tags and via The Google AJAX Libraries API.

To use the Google AJAX Libraries API we need to include the Google “jsapi” script:

<script src="http://www.google.com/jsapi"></script>

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
    google.setOnLoadCallback(function(){
        // use this instead of:
        /*
            $(document).ready(function(){  });
        */
    });
</script>

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the <script/> tags

Below is a list of all the JavaScript Libraries Google CDN provides with the direct paths and google.load implementation:

jQuery

name: jquery
versions: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
load request: google.load("jquery", "1.3.2");
extras: uncompressed:true, e.g., google.load("jquery", "1.3.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

jQuery UI

name: jqueryui
versions: 1.5.2, 1.5.3, 1.6, 1.7.0, 1.7.1
load request: google.load("jqueryui", "1.7.1");
extras: uncompressed:true, e.g., google.load("jqueryui", "1.7.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js
note: This library depends on jquery. Before loading this module, you must load jquery. e.g.:
        google.load("jquery", "1.3.2");
        google.load("jqueryui", "1.7.1");

Prototype

name: prototype
versions: 1.6.0.2, 1.6.0.3
load request: google.load("prototype", "1.6.0.3");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js

script.aculo.us

name: scriptaculous
versions: 1.8.1, 1.8.2
load request: google.load("scriptaculous", "1.8.2");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js
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

name: mootools
versions: 1.11, 1.2.1, 1.2.2
load request: google.load("mootools", "1.2.2");
extras: uncompressed:true, e.g., google.load("mootools", "1.2.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
path(u): http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js<

Dojo

name: dojo
versions: 1.1.1, 1.2.0, 1.2.3, 1.3.0, 1.3.1
load request: google.load("dojo", "1.3.1");
extras: uncompressed:true, e.g., google.load("dojo", "1.3.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
path(u): http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js.uncompressed.js

SWFObject

name: swfobject
versions: 2.1
load request: google.load("swfobject", "2.1");
extras: uncompressed:true, e.g., google.load("swfobject", "2.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js
path(u): http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js

Yahoo! User Interface Library (YUI)

name: yui
versions: 2.6.0, 2.7.0
load request: load request: google.load("yui", "2.7.0");
extras: uncompressed:true, e.g., google.load("yui", "2.7.0", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js
path(u): http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js

Source: Google

Thanks for reading.

  • L

    looks like you took my advice and made the; thanks – it’s much more readable.

    you should turn off the comments if you delete them all anyways.

  • L

    > looks like you took my advice and made the

    i meant “made the corrections”

    your grammar is rubbing off on me :)

  • http://www.webmuch.com Aayush

    It was a comma or two and I didn’t approve your previous comment because it was extremely disrespectful.

  • jet

    Hello, great article.

    I have a question. What about GUnload() function? Since I read about the new google ajax API, I don’t know if it’s still convenient to use it.

    I’m starting a new proyect using google maps api, and I’d like to know the best way to work with this api.

    After spending lot of time collecting information, these are the best tips I’ve found:
    - use google ajax api
    - use jquery
    - load all the javascript libraries at the bottom of the page, before

    And this an example of my loader script:

    google.load(“maps”, “2″, {
    “language”: “es”,
    “other_params”: “sensor=false”
    });
    google.load(“jquery”, “1.3.2″);

    google.setOnLoadCallback(function(){
    if (GBrowserIsCompatible()) {
    var map = new GMap2($(“#map”).get(0));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
    });

    $(document.body).unload(function(){
    if (GBrowserIsCompatible()) {
    GUnload();
    }
    });

    What do you think?

    Thank you.

  • http://www.concrete-media.com Andrzej Michalski

    We’re wanting to make use of CDN’s in general, but does anyone have any advice on using https – will browsers moan that content is coming from different sources? Does the Google CDN support being accessed via https?
    Andrzej

  • Simon

    The author states he has never seen a web development blog host it on their own server, perhaps he should take a look at a source for this page…

    • http://www.webmuch.com Aayush

      hah I know what it looks like, but if you see closely, I haven’t used actually used jQuery anywhere, as you can see I haven’t really been active on this blog. If I actually had a jQ component I would switch to the CDN.

  • Pingback: jQuery – avantaje si un mic ghid | Chestii Internet [ Server, PHP, MySql, SEO, Joomla, Wordpress ]