How to choose a CDN to load Javascript & CSS libraries?

Question

What kind of reasoning should I do in order to choose a specific CDN to load Javascript & CSS libraries into my website development projects?

I see that there are some options (i.e. BootstrapCDN, cdnjs, unpkg, jsDelivr and possibly others) but I don't understand when sould I use one over the others.

As an example, examples in Bootstrap documentation show BootstrapCDN and jsDelivr, while aos's docs use unpkg, and so on.

The first thing that comes into my mind is that there could be differences in how fast they are and how much they are used (so, if I use the one with the largest market share, I will be more likely to have my users already have the libraries in their browser's cache), but I'm not sure it this is just being nitpicky or if these reasonings are legitimate.

Also, once I pick a CDN to load a script, are there valid reasons to always use the same for other scripts as well?

---

I usually use npm to download scripts into my dev environment and pack them in a single bundle; but there are times when I want to keep one or more of those scripts non bundled (i.e. they are used on a single page and I don't want to load them everywhere); in this situation, using a CDN is probably better than loading them locally, hence my question.

Answer 1

Three things to add (in addition to what chip points out):

1. Check to see what type of compression the CDN uses (by looking for the content-encoding header. The preferred option here is generally br (for Brotli). If the CDN is not using Brotli they're likely using gzip. This has direct impact on the payload size, though Brotli is not always smaller than Gzip (see below example).
2. Check the cache-control header (the longer it's set for the better, generally).
3. Be careful of performance impacts resulting from using specific CDN features.

Example

Compare the same version of jQuery served by jQuery's CDN, jsDelivr, and cdnjs.

via jQuery's CDN (url)

compression: gzip
size: 31.0 kB
cache-control: max-age=315360000

via jsdelivr (url)

compression: brotli
size: 32.2 kB
cache-control: public, max-age=31536000, s-maxage=31536000, immutable

via cdnjs (url)

compression: brotli 
size: 28.4 kB
cache-control: public, max-age=30672000

---

IMPORTANT: Be careful about how CDN features might impact cache-control headers (in a way that would degrade performance for your users). For example, Jsdelivr has a feature that allows one to leave off the exact version string (so that you can always get the latest patch version, for example) (view their features page). If using this on the same minor version of jQuery as above, here are the results:

via jsdelivr, with "latest patch version" feature (url)

compression: brotli
size: 32.2 kB
cache-control: public, max-age=604800, s-maxage=43200

The important difference here is the cache-control value, where the exact version gets a max-age of 1 year, while the other gets a max-age value of 7 days.

---

Also: Another area where CDN features may impact performance is whether they use multiple underlying CDNs or not. If so, the benefit is redundancy at the expense of possible improved loading in parallel. If not, the benefit is improved loading in parallel at the expense of no cross-platform redundancy. Here's more on this.