Script Libraries From Google

One of the disadvantages of many of the available script libraries is their huge size. Whenyour visitors first visit one of your pages that needs the script library the page takes significantly longer to load because of the script library and many of your visitors give up waiting and go elsewhere.

Google offer a solution to this problem for several of the more common script libraries including JQuery, prototype, and Dojo. Their solution is to use a copy of the script library that is hosted by Google rather than having your own copy. What this means is that your visitors only have the delay in loading one web page from any of the sites that is using the Goggle supplied copy of the library and that copy is then cached for use so that when they visit any other site that also uses it the library is already on their computer and they do not have the overhead of having to download it again.

The first step in setting up to use the Google copy of your chosen script library is to first check that Google have the library that you require.

Assuming that they do offer the library that you need the next step is to replace the script call in your page that loads that library with the following script tag:

Note that this doesn't say which script library that we are using. That's because their code is set up to dynamically load whichever script library versions that we ask for. All we need to do is to add a small piece of additional code before any of our JavaScript that references a specific script library in order to load that library. This id done using the google.load command specifying the library that you want as the first parameter and the version of that library as the second parameter. For example:

This is the most efficient method of attaching any script library into your page because you are not only maximising the chances that your visitor will already have the library cached but the google.load call dynamically loads the library from JavaScript which means that it can be downloaded simultaneously with other files that are needed by the page rather than the single threaded download that you get each time you request a new JavaScript file from a script tag in your HTML. This will give the appearance that the page loads faster even in those situations where the script library does need to be downloaded from the server rather than rerad from the cache.