In the last decade, Google has given us a lot of amazing free services, and web developers haven’t been left out of the party. For a while now, Google has been hosting popular JavaScript libraries on their CDN (content delivery network) and letting any website make use of them for free. On face, you might not think that having Google host one JavaScript file for you would make any difference to you or your users at all.
The Benefits:
It turns out, there’s actually a number of good reasons to let Google host JQuery and other commonly used javascript libraries for you. The first is caching. If your users have been to another site that references JQuery from Google, they will already have it cached on their system and won’t need to download it again, meaning that your website will load faster then. You also benefit from the fact that Google’s CDN can probably serve content a lot faster than your webhost. Google can serve the JQuery script to your users from dozens of different servers around the web and send it from whichever server is closest to your user.
Finally, you benefit that since your users are downloading the JQuery library from Google, they’re not downloading it from you. Most people don’t ever hit their bandwidth limitations from their web hosts, but if you have a content heavy site, saving 30 KB worth of bandwidth per visitor can add up pretty quickly.
How to do it:
There are actually two different ways to reference JQuery, MooTools, Scriptaculous, Prototype and other libraries from Google. Google has a a JavaScript AJAX libraries API that you can use which will dynamically load your library of choice. This method is supposed to be faster than doing a direct reference, but some have reported that it can cause problems.
Here’s how to do it the way Google suggests:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"><!--
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
// --></script>
Alternatively, you can do a good old fashioned script reference:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>