How to use CDNs properly

Use HTTPS-Only URLs

Secure connections rely on all the content in a page being loaded over another secure connection. You can use protocol relative URLs, which will copy the protocol of the parent, or specify for all requests to be secure.

Throws a security warning on secure pages.

Fails when running over a local file connection.

Always negotiates a secure connection.

Load JavaScript Asynchronously

JavaScript not only has to be loaded before the page continues loading, but typically has to be executed before continuing as well. This can create massive waits, especially in pages with multiple libraries placed in the header. While a favorite recommendation has always been "move scripts to the footer", this means any external resources do not start downloading in parallel with the page.

Google Analytics, among others, solves this problem by placing a small inline script that then creates a script element that is downloaded without blocking the page. The small inline script itself does, of course, but is generally of little consequence.

While this continues to be used for single, stand-alone scripts, i.e. those with no dependencies, it does not function well with the larger libraries you page may rely on. For instance, using either the async or defer properties in conjuntion with your jQuery will cause an error if later scripts run before it is finished loading. These errors look something like $ is not defined or jquery is not defined.

It has historically been very difficult to start loading jQuery early,
without blocking the page, and while preserving and other scripts you encounter.

The issue arises from the fact that any inline or external scripts are run once loaded, whereas async or defer are only run once loaded or the whole page is ready, and there is no guarantee with any use of these that they will be run in order (defer is supposed to, but has several cases where it does not).

What we need then, with jQuery especially, is a way to start loading it early on, in the head preferably, and then "catch" any scripts that try to execute using jQuery functions, and hold them until it is ready. Then it should execute them in order, as it otherwise would have.

Fortunately, there is a solution that does just that, and it's name is jQl.

Doesn't work at all.

Blocks rest of page from loading.

Doesn't load until the page is done.

Loads from header, runs when ready.

jQl from Cerdic/jQl

Make Fewer Requests

One of the many reasons we like jsDelivr is because it provides a unique file combiner, which eradicates extraneous requests which, especially with smaller files, can add considerably latency (literally) to your page.

One Request for Every Library.

One Request for Multiple Libraries.

Have a Lower Latency

According to CDNperf, jsDelivr offers one of the lowest latencies of any CDN. Latency is the time a users computer takes to find a site, so a lower latency means starting to load sooner. Stay away from Yandex unless your sites users are local to it, and you should be fine.