Feb 152013
 

This post is about one of the easiest optimizations that can be applied to a web site, and is applicable to most of them.

The jQuery and jQuery-UI libraries

jQuery is a javascript library used by a large number of web sites. This library offers cross-browser functionalilty for most of the programming needs of a dynamic web site.

In most cases, the CMS software used in a web site (for instance, a standalone WordPress blog) installs a local copy of the library. By inspecting the HTML code of any page on that site we can see a line including the library like this:

The same happens with the jQuery-UI library used to implement the user interface.

The Google CDN

The jQuery libraries are also available for free from the set of Google servers that conform the Google CDN (Content Delivery Network). The pages in a web site could be rewritten to download these libraries from the Google CDN. To do this, we just need to replace the HTML code above with:

Note: The sample code loads the 1.9.1 version of the library. Other versions are also available from the Google CDN if required.

As can be seen, the leading “http:” protocol is missing in the url in the src attribute above. Using this syntax, the link is also valid if the site uses the https protocol instead of http. The only drawback in this case is that these pages will not work if they are accessed locally with the “file:///” protocol, without a web server.

Advantages in using the Google CDN

There are three main advantages using this services:

Decreased latency

A CDN is a set of servers distributed in several locations. When a browser requests content from the CDN, it gets connected to the closest server in the network. The bandwith of the connection between the client and this server will be greater in most cases than the bandwith between the client and the server of the web site, and the download will be faster.

Increased parallelism

Browsers limit the number of concurrent connections established with a given server. In older browsers, the limit used to be of two simultaneous connections. In modern browsers the limits is normally of six connections. But the download of a single web page usually requires from about twenty to more than one hundred connections, download all the html, js, css, images and other components of the page.

Using the Google CDN to download the jQuery library, the page makes one connection less to our site, and more content can be downloaded in parallel.

Improved usage of the client cache

The main advantage of using the CDN is that a browser, even when accessing for the first time to a page of the site, may not need to download the jquery library at all: If the used has previously visited other web sites that also use the CDN to download it, a copy  of the library is already in the local disk cache of the browsers, and there is no need to download it again from the network.

Using the Google CDN in WordPress

The administrator of a standalone WordPress insstallation can install the Use Google Libraries plugin. This plugin makes all necessary changes to make use fo the Google CDN in the blog pages.

Dynamic loading of the library

If a <script> tag is used to load the library, the library functions can be invoked inside a $(document).ready function:

Instead of using the <script> tag, Google recommends to dynamically load the library with a call to the “google.load” function in the jsapi library. In this case, the code that makes calls to jQuery functions must be included inside a call to “google.sestOnLoadCallback()”:

References:

Google Hosted Libraries – Developer’s Guide

 Posted by at 8:15 am

 Leave a Reply

(required)

(required)