graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Speed JavaScript Library Loading With Google APIs

By using Google’s CDN for serving JavaScript libraries like jQuery and jQuery UI, you can save more than 70% off their download time. This can make a huge difference in web page speed, since these libraries can easily be double or triple the size of everything else on the page combined.

In this gilded age of web development, JavaScript packages like Prototype, jQuery, YUI, Mootools and others bring a lot of speedy plug-and-play funnery to the front-end engineering table.

The downside of these libraries is, of course, is that they are libraries, and as anyone who goes to their local branch knows, there is a huge agglomeration of scary brown reference compendiums and high-brow 19th century literature before you get to Harry Potter and the graphic novel rack. We can’t magically pluck the comic adaptation of The Dark Knight from thin air; likewise, we can’t conjure sortable <li> elements and calendar inputs without a supporting infrastructure.

That means downloads. And not just your common 2k “Look at me I’m an alert!” script. These are industrial, high-protein, NASA-engineered gimcracks of code that can easily double or triple the size of a page.

For the sake of argument, jQuery and jQuery UI will be our guinea pigs. Minified, these two scripts still weigh a beefy 70.5 kb and 181.8 kb respectively. The total weight of the graphicpush.com homepage is 336.8 kb, and these two libraries account for about 75% of that. So considering the two massive hairballs the server is trying to plunger through the Interweb’s pipes every time you load my website, how do we make all the plumbing more efficient?

Take Advantage of Google’s CDN

Content delivery networks, or CDNs, are the Liquid Plumbr or the internet. And luckily for us, Google (and to a certain extent, Microsoft and Yahoo) provides an array of JavaScript libraries on their servers designed to be leeched by poor bastards like us that cannot afford HyperGlobalMegaCDNs like Akamai. Instead of hosting jquery.js and jquery-ui.js locally, simply use Google’s URIs:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

But what kind of speed gains does this give me? you ask. Answer: a lot. Let’s take a look at the following chart, rendered by Pingdom using my test page:

Load times for jQuery files

Using Google’s servers, I can send the two JS files to the browser in just over a second. With the files hosted on my own server, it’s almost 4.5 seconds. This is, on average, a 75% savings in speed. This is a prime-grade example of why using a CDN is an official recommendation from Yahoo’s (much recommended) best practices.

Why is Google’s CDN So Fast?

CDNs work well because they are specifically configured to deliver chunky chunks of bytes as efficiently as possible. Besides having a massive, global datacenter with a million servers, everything on Google has been optimized, specifically expiration headers and compression.

Expiration Headers

Expiration headers help make content cacheable for repeat visitors. And with static content like JavaScript, CSS, Flash and images largely staying the same over a long period of time, it makes sense to suggest to the browser that maybe it should just relax and hold onto these until next time instead of freaking out and reloading everything. Google’s header includes instructions to keep everything for a year:

Date: Wed, 21 Apr 2010 23:38:45 GMT
Expires: Thu, 21 Apr 2011 23:38:45 GMT

Gzip Compression

Gzip compression is where the real magic happens. Google also includes this bit in the header for each JS file it serves, which tells us their server is using gzip in its configuration:

Content-Encoding: gzip

If we run our speed.html file through WebSiteOptimization.com’s Web Page Analyzer, we discover the eye-opening value of gzip compression.

ScriptSizeReduction
Local jquery.js72174 
Google’s jquery.js2467866%
Local jquery-ui.js186173 
Google’s jquery-ui.js4614275%

Over the two files, we’re saving over 70% in pure byte mass, which makes sense, considering the dramatic load time difference detailed above. (To illustrate, the graphicpush.com homepage weighed well over 300 kb with uncompressed jQuery; it now arrives at a lean 150 kb. Not bad.)

The Bottom is Warm and Cozy

In following the spirit of progressive enhancement, it is also best practice to place all of these JS calls at the bottom of your HTML document. Since a browser has to stop everything and go have a cup of tea while a script does it’s thing, you might as well let it set the table before it heads off to muddle about in the kitchen. Steve Souders illustrates this concept brilliantly.

Resources/Links/Reinforcements

Good sites for testing your page:

Further reading:

, , , ,

commentary + criticism

Nathan Bowers

wrote the following on Sunday May 2, 2010

And we should also minify CSS and JS, gzip them, and set long expiry headers on files hosted from our own domain.