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
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.
Date: Wed, 21 Apr 2010 23:38:45 GMT Expires: Thu, 21 Apr 2011 23:38:45 GMT
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:
If we run our speed.html file through WebSiteOptimization.com’s Web Page Analyzer, we discover the eye-opening value of gzip compression.
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.
Good sites for testing your page: