CODEWITHSUNDEEP
performancejquery-uigoogle-cdn
sam
sam

Reputation: 10064

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

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?

Upvotes: 10

Views: 455

Answers (4)

Amit
Amit

Reputation: 46323

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.

Upvotes: 4

user5352366
user5352366

Reputation:

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.

Upvotes: 0

Ken Palmer
Ken Palmer

Reputation: 2445

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."

Upvotes: 2

Hemant Aggarwal
Hemant Aggarwal

Reputation: 849

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.

Upvotes: 2

Related Questions