Is there a benefit to pack third-party JS & CSS libraries along with my project assets?

Question

I want to start using minifying tools such as Minify, Uglify or Closure to speed up the loading of my pages.

My project relies on several bulky libraries (jQuery, Bootstrap, ...).

I'm considering two options:

Option 1: use an official CDN

• Minify only my project files into one .css and one .js file
• Serve the (minified) major libraries from a renowned CDN

This would look like this:

<script src="(my cdn)/myproject.min.js"></script>
<script src="(official cdn)/jquery.min.js"></script>
<script src="(official cdn)/jquery-ui.min.js"></script>
<script src="(official cdn)/bootstrap.min.js"></script>

<link rel="stylesheet" href="(official cdn)/bootstrap.min.css"></link>
<link rel="stylesheet" href="(my cdn)/myproject.min.css"></link>

Pros:

• Visitors might already have a cached version of some of the libraries, served by the same official CDN from another website, thus avoiding redundant transfers.

Cons:

• If they don't, this approach will require several HTTP calls (even if they do actually, they will still make a request and get a 304 Not Modified), and this will increase the page load time.

Option 2: pack everything together

• Minify my project files + the source files of every library, into one single huge file.

This would look like this:

<script src="(my cdn)/myproject-and-libraries.min.js"></script>
<link rel="stylesheet" href="(my cdn)/myproject-and-libraries.min.css"></link>

Pros:

• Number of HTTP calls limited to the strict minimum.

Cons:

• Even if the user has already loaded the jQuery & Bootstrap code from another website, he will have to reload the whole stuff from mine.

Final note

In either case, I will serve the static files (only the ones compiled by myself) from my own CDN at AWS CloudFront, so the question is not about using a CDN or not, or which one is better.

The real question is: pack the third-party libraries with my own, or not?

Answer 1

It depends.

You should try packing everything together, measure the file size, and see how much space you save versus separate library files. You can at least then compare that saving against other factors.

How you balance HTTP requests vs. total bytes is pretty much up to you. If lots of your users are on mobile connections, additional HTTP requests might be of more concern, because of the extra latency you tend to get on mobile connections.

I think under both options in modern browsers, the HTTP requests will be made in parallel (even old browsers would make two HTTP requests at once per domain). Not sure about mobile browsers.

It's difficult to judge how many users are likely to have the library CDN version already cached when they first visit your site. I think I remember reading something that suggested it was fewer users than you might think (possibly some data from Yahoo, where about 25% of users had it cached), but I can't find the reference.

It's worth considering how often you're expecting the various files to change. If you update your own JavaScript every week or two, but keep your libraries and plugins on the same version for months/years, then it might well be worth keeping those files separate so that returning users don't have to re-download one big packed file just because you changed one line of your own JavaScript.

To be honest though, if you're already minifying, gzipping AND serving from CloudFront, then when people do download files from you, they're going to be coming down pretty damn quickly anyway. And after each user's first empty-cache visit to your site, your files will be cached too. Overall I don't think you'll see a big difference between these options.

One definite drawback of 3rd-party CDNs is that you have no power at all to fix them if they go wrong.