CODEWITHSUNDEEP
javascriptcsspackagelibrariescdn
Sekhemty
Sekhemty

Reputation: 1532

How to choose a CDN to load JavaScript & CSS libraries

What kind of reasoning should I do in order to choose a specific Content Delivery Network (CDN) to load JavaScript and CSS libraries into my website development projects?

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

As an example, examples in Bootstrap documentation show BootstrapCDN and jsDelivr, while aos uses 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.

Upvotes: 17

Views: 13330

Answers (2)

Isaac Gregson
Isaac Gregson

Reputation: 2075

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

enter image description here

enter image description here

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.

enter image description here

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.

Upvotes: 16

chip
chip

Reputation: 411

If your use is pretty generic it’s likely that you won’t see a large performance benefit from one CDN to the other when comparing bigger names like cdnjs, jsDelivr, and unpkg. These three all use large CDN providers for the actual distribution of packages and have similar caching strategies.

Taking in to consideration the fact that some popular CDNs could already be cached by your users’ browser could be worth doing. If your users are focused in a specific market some providers may have an advantage based on their CDN provider - jsDeliver for instance uses Quantil as one of their CDN providers which has points of presence in China that could improve performance for that market.

These CDNs are very useful in projects that don’t use a JS preprocessor or bundler that can generate bundles from dependencies. Since you’re already building bundles you could also look in to a concept called code-splitting. This concept would split your bundles into smaller chunks and those chunks would only be loaded as-needed as your user navigates around the application. This would keep a common dependency management strategy (using package.json and your package manager) rather than mixing two schemes with requires and <script src=“...s.

If you’re using a bundler like Webpack or are building a web application using a front end framework this is possible with some minimal configuration and your bundler/framework of choice likely has a guide for implementing it.

Upvotes: 9

Related Questions