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?

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.