When To Use Public JavaScript Libraries

Public JavaScript CDNs are servers maintained by large entities that serve popular libraries to users around the world. These CDNs use a geographically distributed architecture to deliver static assets from servers closest to users. As a result, they’re usually a lot more efficient than serving it from your own origin server.

However, the truth is that there are only a handful of situations when it’s better to use a public CDN instead of your own site to serve Javascript, and I’ll explain why below.

It’s Best if the JavaScript is Never Downloaded!

The best-case scenario is if the visitor already has the necessary JavaScript cached in their browser, and never has to download it in the first place. This saves a DNS lookup, and the connection to the remote server, the download itself, etc.

Particularly if It’s Render Blocking – like jQuery

jQuery is such a widely used library, that it’s best to load it first in your site – even if it’s “render-blocking”. There are simply too many plugins in WordPress that rely on jQuery for it to not be available to any inline script. As a result, most WordPress sites load jQuery in render-blocking mode, which slows things down as the browser is unable to paint the page till it’s finished.

So imagine how great it would be if the jQuery was already present on the visitor’s computer! This is why public CDNs are useful. If the visitor has already downloaded that particular file from the CDN on another computer, then they won’t have to download it again.

The Downside of CDNs – Domain Lookup

Whenever you add a resource from a new domain to your website, you introduce a delay for the DNS lookup. Ideally, these are supposed to be extremely fast, but in reality, it’s not always the case. Especially when we’re talking about visitors from areas where the Internet might not be as fast as we’d like it to be.

However, if a visitor as already resolved the name of a public CDN library in the past, it will cache that result and won’t have to resolve it again.

The Benefit and Downside of Cloudflare

This is a big reason to host your webpage resources on as few IPs as possible. If you use a reverse proxy like Cloudflare, then you have the best of all worlds. A single domain lookup, and the powerful architecture of Cloudflare to serve static JavaScript from all over the world!

Unfortunately, this also means that your visitor will always have to download jQuery, since they’ve never seen that URL before.

Use ONLY Popular Libraries

When choosing a public library, we want to maximize the chances that a visitor has:

1. Already downloaded SOMETHING from it before (to avoid the extra DNS lookup)
2. Already downloaded the SPECIFIC JavaScript version required by your site

Because of the above two, it’s pretty futile to use public JavaScript CDNs that aren’t well-known.

Google’s Libraries are the ONLY One that Fit the Bill

To test this out, I used the Chrome Cache View tool to examine which files I’ve cached for the past six months. As you can see, the jQuery version used by WordPress was already downloaded onto my computer from Google:

This means that every subsequent request for this file from every other website would have a load time of “0”.

Note that most sites serve this jQuery from their own domain – including NameHero as shown here:

Now if we had loaded our jQuery from Google’s servers, this download would have been unnecessary. Here’s a tutorial on how to correctly serve your jQuery from Google’s servers instead of from your own.

As mentioned in an earlier article, site speed is an art rather than a science. It requires a whole bunch of tradeoffs between usability, speed, and stability. Hopefully, this tutorial will help you find the right solution for loading JavaScript on your site with the least impact on load times!