Why to use Google hosted jQuery CDN?


What is Google CDN?

Google is sea of free services. Do you know that Google is also hosting jQuery libraries on its CDN(Content delivery network) and allows any website to use it for free. But why to use Google hosted jQuery CDN?

<script type="text/javascript" src="/js/jQuery.min.js"></script>

If you’re doing this on a public facing website, you are doing it wrong.

Instead, I urge you to use the Google AJAX Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.

Decreased Latency

A CDN — short for Content Delivery Network — distributes your static content across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network.

In the case of Google’s AJAX Libraries CDN, what this means is that any users not physically near your server will be able to download jQuery faster than if you force them to download it from your arbitrarily located server.

There are a handful of CDN services comparable to Google’s, but it’s hard to beat the price of free! This benefit alone could decide the issue, but there’s even more.

Increased parallelism

To avoid needlessly overloading servers, browsers limit the number of connections that can be made simultaneously. Depending on which browser, this limit may be as low as two connections per hostname.

Using the Google AJAX Libraries CDN eliminates one request to your site, allowing more of your local content to downloaded in parallel. It doesn’t make a gigantic difference for users with a six concurrent connection browser, but for those still running a browser that only allows two, the difference is noticeable.

Better caching

Potentially the greatest benefit of using the Google AJAX Libraries CDN is that your users may not need to download jQuery at all.

No matter how well optimized your site is, if you’re hosting jQuery locally then your users must download it at least once. Each of your users probably already has dozens of identical copies of jQuery in their browser’s cache, but those copies of jQuery are ignored when they visit your site.

However, when a browser sees references to CDN-hosted copies of jQuery, it understands that all of those references do refer to the exact same file. With all of these CDN references point to exactly the same URLs, the browser can trust that those files truly are identical and won’t waste time re-requesting the file if it’s already cached. Thus, the browser is able to use a single copy that’s cached on-disk, regardless of which site the CDN references appear on.

This creates a potent “cross-site caching” effect which all sites using the CDN benefit from. Since Google’s CDN serves the file with headers that attempt to cache the file for up to one year, this effect truly has amazing potential. With many thousands of the most trafficked sites on the Internet already using the Google CDN to serve jQuery, it’s quite possible that many of your users will never make a single HTTP request for jQuery when they visit sites using the CDN.

Even if someone visits hundreds of sites using the same Google hosted version of jQuery, they will only need download it once!

Advantage:

  • Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again.
  • Reduce Load: It reduces the load on your web server as it downloads from Google server’s.
  • Serves fast : You will be also benefitted from speed point of view. As Google has dozen’s of different servers around the web and it will download the jQuery from whichever server is closer to the user. Google’s CDN has a very low latency, it can serve a resource faster than your webserver can.
  • Parellel Downloading: As the js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

How to use it?

There are 2 ways to load from Google CDN.

Method 1

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

Method 2

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.7.1");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
// -->
</script>

What if Google CDN is down?

It is a good idea to use CDN but what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.

Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript 
  src='Scripts/jquery.1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.

Libraries Hosted on Google CDN:

AngularJS
snippet: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
site: http://angularjs.org
versions: 1.0.1
Chrome Frame
snippet: <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
site: https://developers.google.com/chrome/chrome-frame/
versions: 1.0.3, 1.0.2, 1.0.1, 1.0.0
Dojo
snippet: <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
site: http://dojotoolkit.org/
versions: 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.3, 1.2.0, 1.1.1
Ext Core
snippet: <script src="//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
site: http://www.sencha.com/products/extjs/
versions: 3.1.0, 3.0.0
jQuery
snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
site: http://jquery.com/
versions: 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
note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild.
jQuery UI
snippet: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
site: http://jquery.com/
versions: 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
note: This library depends on jquery. You must also load jquery before loading this module. Version 1.8.3 is not hosted due to its short life, and the alias 1.8.3 actually loads 1.8.4.
MooTools
snippet: <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
site: http://mootools.net/
versions: 1.4.5, 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.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1
Prototype
snippet: <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
site: http://prototypejs.org/
versions: 1.7.1.0, 1.7.0.0, 1.6.1.0, 1.6.0.3, 1.6.0.2
script.aculo.us
snippet: <script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
site: http://script.aculo.us/
versions: 1.9.0, 1.8.3, 1.8.2, 1.8.1
note: This library depends on Prototype. Before loading this module, you must load Prototype.
SWFObject
snippet: <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
site: http://code.google.com/p/swfobject/
versions: 2.2, 2.1
WebFont Loader
snippet: <script src="//ajax.googleapis.com/ajax/libs/webfont/1.0.28/webfont.js"></script>
site: https://developers.google.com/webfonts/docs/webfont_loader
versions: 1.0.28, 1.0.27, 1.0.26, 1.0.25, 1.0.24, 1.0.23, 1.0.22, 1.0.21
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s