Making decision: hosting of javascript libraries on external CDN or locally

The benefits of hosting common JavaScript libraries externally at JavaScript CDN are well known - i list them just in short: external hosting of JavaScript libraries

• reduces own server's traffic
• makes parallel loading possible

The first question is: where to host? Directly on library vendor's site? Or somewhere else? There are mainly two factors, which let us make a decision, where we host our JavaScript libraries:

• Speed
• Popularity

The second question is more general: whether to host externally? Or locally?
Lets look on some details, which help to choose an optimal public hosting of common JavaScript libraries.

tl;dr;

• If you doubtlessly want to host JavaScript libraries externally, host them at Google Hosted Libraries - so you get highest chance, that your visitors have them already in chance and don't need to download them again.
• If you doubt, host better your JavaScript libraries locally - visitors, who have JavaScript libraries in cache are very few, and the average visitor gets the data on fastest way.

Speed

About a speed: I've tested some JavaScript library CDN hosters from my location (Berlin, Germany):
Test library: JQuery 1.9.1 minified
Test engine: Chrome developer tools

Tested JavaScript CDN hosters:

• Google, ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js, 32,5 kB, 99 ms
• CloudFlare CDNJS, cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js, 32,7 kB, 229 ms
• JQuery, code.jquery.com/jquery-1.9.1.min.js, 37,6 kB, 51 ms
• JSdelivr, cdn.jsdelivr.net/jquery/1.9.1/jquery.min.js, 32,6 kB, 157 ms

This speed test has only limited validity - if you are interested, repeat this test from your location and with the JavaScript library, which you will really implement. I presume, that you know, that different hosters has not all possible JavaScript libraries, but only most used. If you plan to use any rare library, it will be rather hosted by library vendor.

Popularity

Why is the popularity a decision factor? In short:

Somebody visits a website, where JavaScript library is loaded externally from a popular hoster, and is implemented i. e. like this:

<script src="https://wellknown-cdn.com/libs/jquery/1.9.1/jquery.min.js"></script>

This JavaScript library will saved in the browser cache.

Then this person visits your website, where this JavaScript library is implemented on the same way. 

What happens? The visitor isn't forced to download this JavaScript library again: if it is in cache with the same implementing path, browser just takes it. In effect, this visitor get your website quicker to see.

What would happen, if you would load the same JavaScript library but from not so popular hoster, like

<script src="https://unknown-cdn.com/libs/jquery/1.9.1/jquery.min.js"></script>?

The visitor would come, and despite of having the same JavaScript library already cached, his browser would be forced to download it again. In effect: more traffic, more load time...Sad.

What JavaScript CDN is really popular?

Lets look into code of sites: who builds on what? I queried trends.builtwith.com to get insights about how many sites make use of different JavaScript CDNs:

Google Hosted Libraries, ajax.googleapis.com: 11,093,350 of 328,795,995, 3.4% of entire internet

Google Hosted JQuery, ajax.googleapis.com/ajax/libs/jquery: 9,854,625 of 328,795,995, 3% of entire internet

CloudFlare CDNJS, http://cdnjs.cloudflare.com: 724,072 of 328,795,995, 0.2% of entire internet

JQuery CDN, code.jquery.com: 3,383,060 of 328,795,995, 1% of entire internet

JSdelivr, cdn.jsdelivr.net: 118,729 of 328,795,995, <0.1% of entire internet

Conclusion? Popularity is relative. The most popular JavaScript CDN, Google Hosted Libraries, is implemented at 3,4%  sites of the whole internet. It is not much. Otherwise, it is implemented on ca. 40% of Top-10K websites, and ca. 30% of Top-100K websites, and those are websites like live.com, yelp.com etc.

Different lessons for different people

Lesson for doubtless

This lesson is for those, who has no doubt, JavaScript libraries should be always loaded externally. The lesson is, that the using of Google Hosted Libraries provides the highest possible chance, that visitors already have given JavaScript library in browser cache and aren't forced to load it again.

Lesson for somebody who doubts

The second lessons is for those, who isn't pretty sure, whether JavaScript libraries should be hosted externally or internally. Lets compare load time costs of loading a JavaScript library, if it is placed locally, or hosted externally:

To download a resource from external source, browser makes an extra HTTP request, then DNS lookup to resolve the name, and then it establishes a TCP connection, and, finally to download bits and bytes. In my understanding there are no need to make an extra HTTP request, DNS lookup and TCP connection, if the file is placed locally. Ergo, in general it takes less time to download the same data amount from local host, as from external source.

Indeed there are some visitors, who profits from hosting JavaScript libraries externally, because they have them already cached - but there are visitors of 4% website in internet. In my opinion if we optimize the load time of our website for an average visitor, we should be oriented on the mainstream. Ergo: the common solution should be to host JavaScript library locally, because in this case visitor get this data amount on fastest way.

But the final decision should be done on how you estimate your visitors:

• Are many of your visitors  visitors of Top-10K and Top-100K websites too? Then relate on it: host JavaScript libraries externally, so  most of your visitors can profit from their cache.
• Are your visitors have niche interests and visit niche sites? Then make your site as fast as possible for those, who will be forced to download JavaScript libraries: host them locally.