Load files from one CDN or multiple CDNS

Question

On a typical webpage I load the following, all from CDNs:

• jQuery
• Angular
• Bootstrap
• Icomoon
• a few Angular plugins

Is it better to load these from 1 CDN (if possible), or from different CDNs? Are there best practices for this, or does it not make a difference?

Answer 1

In terms of using one or multiple CDN, it wouldn't be an issue depending on how many components you are downloading from the same hostname, according to this article from Yahoo UI Team, HTTP/1.1 suggests that browsers should limit parallel downloads to two per hostname. Therefore, using multiple CDN sources, it is, different hostnames should be a good practice.

Maybe in case of using related components just to avoid accidentally version mismatch like angular and angular-router for example, you might want to use the same CDN, but, if the download per hostname increases it would create loading leaks the same way (at least for browsers that follows the spec suggestion).

Using a CDN is definitely a good practice to increase loading performance of your web site. However, you should consider using the more popular CDNs you can find, it would increase the chances you get a cached version of the files you are using from a different site that uses the same file, which would increase even more the loading performance of the website.

As @JeffPuckett pointed out in the comments, browsers have a higher limit of simultaneous download per server/proxy today's days:

Firefox 2:  2 Firefox 3+: 6 Opera 9.26: 4 Opera 12:   6 Safari 3:   4 Safari 5:   6 IE 7:       2 IE 8:       6 IE 10:      8 Chrome:     6 

Ref.: https://stackoverflow.com/a/985704/4488121