Tuesday, July 28, 2009

Offloading ALL JS Files To Google

If you didn’t know it already, Google provides an API which you can use to call Javascript libraries hosted on their server for you to use on your website.  Google currently provides the following Javascript Libraries from their server:

Now, you might ask why would you want to let Google host your Javascript files instead of yourself.  To let make you have a better idea of what Google’s AJAX Library API is about, you’re recommended to watch this video:

Let me provide you with some rock solid reasons why you need to let Google host your files.

Google’s CDN Is Faster Than Your Host

No matter how good your web hosting package is, it just cannot beat Google’s CDN (Content Distribution Network).  Google runs many servers and has servers in many countries which mirror data across the globe.  When downloading static data from Google, the underlying architecture automatically detects the geographically closest server and download the files from there.  This simple action drastically reduces the time needed for your files to download.  Using a CDN is recommended by Yahoo! Exceptional Performance Rules.


Increases Number Of Parallel Downloads

According to the HTLM 1.1 specification, which most modern browsers obey, only two parallel downloads can be done from a single hostname.  Therefore if you use Google for your hosting, you maximize your parallel download performance, since you will have another hostname (google.com) serving files.

Better Caching

Now, suppose many persons are using Google’s AJAX Library API to power their websites, and you are using it too.  If your visitors come to visit your website after visiting another website using Google’s AJAX Library API, then the Javascript file will still be in your cache and if it has not been changed, your visitors’ browsers might not even need to download the file(s).

Save Bandwidth

Finally, you also get to save some of your bandwidth, thus saving you money.  If you are on a budget hosting plan, then this might be helpful in cutting down costs and relieving your server of stress.

Calling The AJAX Library On Your Website

To insert the AJAX Library in your website, you have 2 ways of calling it.  Either you use the google.load() approach which goes this way:

Then you have the more direct way of calling the library, using the following piece of code:

Now, the above method, using the Google AJAX Library API, enables you call javascript libraries which are already present on Google servers.  Now what do you to host custom code snippets for your website on Google?  It’s equally as easy.  Just get yourself a Google Code Account, by clicking the Create A New Project, link.

After that follow the instructions to create a new Google Code Project.  You will have to fill in a form like this one:

Then you will be presented with your new project’s homepage, which will look like this:

Then you can upload any Javascript files by click the “Downloads” tab and clicking on the “New Downloads” link.  You will be presented with a new screen from which you can upload your Javascript file:

After the upload is completed, you will be redirected to the project homepage, where you will see your newly uploaded file:

To use the file in your website development, just copy the link of the file by right-clicking on it and copying the link location.  Then when including it in your webpage, the code will look similar to this:

If you view the source of this webpage, you will see the file in use there.  You might ask where you would be using this.  Let me give you an example.  If you are on blogger and want to use some fancy javascript effect, then you can host the javascript file on Google Code and link to it from your blogger blog easily.  This gives you a reliable and free hosting solution for your javascript files and other static files.

That’s it.  If you like this article, feel free to share it and if you’ve got to say something, just drop a comment below!

No comments:

Post a Comment