serving js libraries: better performance from google code or using asset packager?

Question

I am working on a rails application that uses big javascript libraries (e.g. jquery UI), and I also have a handful of my own javascript files. I'm using asset packager to package up my own javascript. I'm considering two ways of serving these files:

1. Link to the jQuery libraries from Google Code as described at http://code.google.com/apis/ajaxlibs/documentation/#jquery , and separately package up and serve my javascript files using asset packager.

2. Host the jquery libraries myself, and package them together with my own javascript as one big merged javascript file.

My hosting solution is of course not going to beat out Google's content delivery network, so at first I assumed that end users would experience faster page loads via option #1.

However, it also occured to me that if I serve them myself, users would only need to issue one request to get the merged javascript (as opposed to one for my merged javascript and another for the libraries served by google).

Which approach will provide the best end-user experience (presumably in the form of faster load times?)

Answer 1

I would say "it depends", but in most cases I'd go with Option #1 (Google hosting) for an internet facing site. For an intranet I'd host everything internally for a number of reasons, but that's outside the scope of your question it looks like.

There's a few things to consider overall:

• Your users aren't downloading the file except on forced refresh if it's cached correctly.
• Google has more servers than you :) lots more, and they're geo-located to best serve any given request, I would guess that your hosting from a single or few locations.
• The browser parallelizes downloads, even if it executes the script sequentially, so it'll download from you and google at the same time, increasing throughput.
• Other sites use google for hosting jQuery (you're on one now), if the user has been to any of those, they already have the file cached, meaning no request was made.

You can host all the files in one file, but you have to consider the weight of a few things with this:

• How large is that one file going to be, do you users need to download the entire thing again when you changed something in your script?
• Are the multiple requests (and DNS lookups) cheaper than the download time for that file
• Do you pay for bandwidth? :)

Depending on what percentage of the code is custom and how much is framework, Google's CDN can take a substantial part of your static js traffic off your server, leaving it available to serve and do other things (that's a huge benefit to a high traffic site), and when you change your script (much more common than a new framework release)...the client downloads only that, not the entire framework again.

Answer 2

The nice thing about Google is that because it is used by many websites, chances are that a user will have already viewed a site that used the google JS libraries, in which case, it would already be cached on their machine, and they might not need to download the file at all.

Personally, I would stick with using Google (via the google.load()) instead of trying to combine the files and load them from my own server. (You can also use google's loader to lazy-load the files, and only load them when you need them, rather than loading all your libraries and only using 1 of them.)