Use google hosted jQuery-ui or self host custom download of jQuery UI?

Question

I'm working on a site where we are using the slide function from jquery-ui.

The Google-hosted minified version of jquery-ui weighs 63KB - this is for the whole library. The custom download of just the slide function weighs 14KB.

Obviously if a user has cached the Google hosted version its a no-brainer, but if they haven't it will take longer to load as I could just lump the custom jquery-ui slide function inside of my main.js file.

I guess it comes down to how many other sites using jquery-ui (if this was just for the normal jquery the above would be a no-brainer as loads of sites use jquery, but I'm a bit unsure as per the usage of jquery-ui)...

I can't work out what's the best thing to do in the above scenario?

Coffeecolored

I'm not an expert on this subject, but interesting question. My gut tells me to go with the google CDN. Even though the file is bigger, it's possible it will still download faster because of the availability and reliability of google servers throughout the world. And another point as you already mentioned, a user may already have the google cdn version of jquery-ui cached. Here is a link I found and read before commenting that had some useful information. 3 reasons why you should let google host jquery for you – Sexist

To be honest, the difference in speed between loading 63 kBytes via Google CDN and 14 kBytes from your website is almost negligile. If I were you i would be asking myself if keeping up the correct version of jQuery UI is easier with Google or your own website, but definitely not whether 63 kB from Google will load faster than 13 kB from your website. – Chest

Answer 1

I'd say if the custom selective build is that small, both absolutely and relatively, there's a good reasons to choose that path.

Loading a JavaScript resource has several implications, in the following order of events:

1. Loading: Request / response communication or, in case of a cache hit - fetching. Keep in mind that CDN or not, the communication only affects the first page. If your site is built in a traditional "full page request" style (as opposed to SPA's and the likes), this literally becomes a non-issue.
2. Parsing: The JS engine needs to parse the entire resource.
3. Executing: The JS engine executes the entire resource. That means that any initialization / loading code is executed, even if that's initialization for features that aren't used in the hosting page.
4. Memory usage: The memory usage depends on the entire resource. That includes static objects as well as function (which are also objects).

With that in mind, having a smaller resource is advantageous in ways beyond simple loading. More so, a request for such a small resource is negligible in terms of communication. You wouldn't even think twice about it had it been a mini version of the company logo somewhere on the bottom of the screen where nobody even notices.

As a side note and potential optimization, if your site serves any proprietary library, or a group of less common libraries, you can bundle all of these together, including the jQuery UI subset, and your users will only have a single request, again making this advantageous.

Intuitivism

I'd go with this answer, and add that using a CDN can only have a possible advantage on the first page load; after that, the resource is cached and loaded from disk, no matter which site it came from. – Splatter

Answer 2

Go with the Google hosted version

1. It is likely that the user would have recently visited a website that loads jQuery-UI hosted on Google servers.
2. It will take load off from your server and make other elements load faster.
3. Browsers load a fixed number of resources from one domain. Loading the jQuery-UI from Google servers will make sure it is downloaded concurrently with other resource that reside on your servers.

Ladylove

Answer 3

The Yahoo developer network recommends using a CDN. Their full reasons are posted here. https://developer.yahoo.com/performance/rules.html

This quote from their site really seals it in my mind. "Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective."

Halfwitted

Answer 4

I am not an expert but my two cents are these anyway. With a CDN you can be sure that there is reduced latency, plus as mentioned, user is most likely to have picked it up from some other website hosted by googleAlso the thing I always care about, save bandwidth.

Also