Why is it recommended loading jQuery or any other library from a CDN?

Question

Kind of self-explanatory question: Why is it recommended loading jQuery or any other library from a CDN?

Answer 1

Two main reasons as far as i know:

1 - It can speed delivery of the hosted files by providing a more proximate route to the client.

2 - It can provide caching benefits for commonly used files since the user may have already downloaded the file from the same cdn

Answer 2

• A CDN will be quicker than your server.
• Servers have maximum number of connections. Browsers restrict the number of simultaneous requests to a single domain. Off loading your libraries to CDN stops both of these.
• If everyone loads their jQuery library from Google's CDN, the resource will be shared between websites, and the same version of jQuery doesn't need to be loaded muliple times (from different servers).
• It's cheaper for you ;) - Save bandwidth!

Answer 3

There are many reasons, but here are a few that stand out:

1. Saves you bandwidth. For something that is not custom, why waste your site's bandwidth when you can rely on google, MS or yahoo to host it.
2. If a lot of sites use a hosted version, then the probability that the user's browser will have it cached already increases. This means one less download to visit your site.
3. The CDN may have a location more geographically appropraite for you users and be able to serve it up much faster.
4. Since the hosted version will be in a different domain, the bowser limitation of simultaneous downloads will be avoided.

Many people say that it is risky to rely on the CDN, as what happens if the CDN goes down. This is true, but most likely your site will be more likely to go down that the big guys. That being said, there are approaches that can be used to have a fallback to a version hosted on your site if the CDN does go down.

Answer 4

@Matt hit the nail on the head. In addition to a CDN, you can do a fallback to your local version of jQuery in case the CDN goes down. Example below:

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; -->
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>