Free And Reliable jQuery CDN’s

Posted by Niall Doherty in jQuery

There are several large and reliable CDN’s which provide hosted copies of jQuery. Those listed below are free and available for public use.

Google Ajax API CDN

Implementation:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Click here for more implementation details.

Microsoft CDN

Implementation:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>

Click here for more implementation details.

jQuery.com CDN

Implementation:

<script src="//code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>

Click here for more implementation details.

Which jQuery CDN Should You Use: Google, Microsoft, or jQuery.com?

Posted by Niall Doherty in jQuery

There’s still no definite answer for this, but we can provide some information here that should help you make a more educated decision about which CDN you use to host your jQuery.

Which CDN is fastest?

Pingdom.com did a neat little analysis to figure this out, and it emerged that the jQuery.com CDN (aka Edgecast) delivers jQuery fastest on average, with the Microsoft CDN coming in second, and the Google CDN finishing third. In Europe, the Microsoft CDN delivered fastest of all.

Does this mean you should forget about using the Google CDN? Read on…

Which CDN is most widely used?

This is a big deal, since the more popular a particular CDN is, the more likely visitors will be to have the necessary jQuery file already cached when they land on your website. And if they do have it cached, then it doesn’t matter which CDN is the fastest since the file won’t even need to be retrieved in the first place.

So, which CDN is the most popular? According to this study, it’s Google by a landslide. Many popular sites rely on the Google CDN to serve up their jQuery, such as Break.com, FAIL Blog, Foursquare, Twitter, Posterous, SitePoint, Stack Overflow, Stanford.edu, and even the jQuery site itself (how’s that for a vote of confidence?).

What else am I pulling from a CDN?

Another factor to consider is what other jQuery files are on offer from each CDN. For example, if you want to use CDN hosted jQuery Templates or jQuery Validate, Google can’t help you, while Microsoft can. If you’re looking for CDN hosted jQuery Mobile, jQuery.com is your best bet.

A few links to help you out here:

Which CDN suffers the least outages?

All three jQuery CDN’s rarely suffer outages, and for most of us this isn’t even worth worrying about. If it is a big deal for you, unfortunately there’s no reliable data out there to determine which CDN is the most reliable in terms of uptime.

That said, if outages are a valid concern for you, check out this post: CDN Hosted jQuery with a Local Fall-Back Copy

How To Let Google Host jQuery For You

Posted by Niall Doherty in jQuery

If you need convincing that it’s a good idea to let Google or another Content Delivery Network (CDN) host your jQuery core files, click here for an explanation.

This post only deals with the how-to. We also have instructions for using jQuery hosted on Microsoft’s CDN and on the jQuery.com CDN.

Quick and easy:

Add the following code to the <head> section of your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

If you’re curious as to why there’s no http: as part of the src, it’s so you can use a single reference that works on both secure (https) and unsecure (http) pages. David Ward explains further here. Note that you will need to add the http: if you’re testing your code on a local drive.

For WordPress:

If you’re using WordPress as a content management system, a local copy of jQuery is automatically referenced from the <head> of each page. The file that actually plugs the relevant code in there is wp-includes/script-loader.php. Rather than edit that core file, you can tell WordPress to reference the jQuery core hosted on Google’s CDN by adding the following few lines to the functions.php file in your theme:

if ( !is_admin() ){
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1');
  wp_enqueue_script('jquery');
}

Note that with this method you cannot use the “no http:” trick as explained above. If you do, WordPress will treat the URL as relative and prepend the URL of your own site. If you are running a secure site with WordPress, use https instead of http in that functions.php snippet.

How To Let Microsoft Host jQuery For You

Posted by Niall Doherty in jQuery

If you need convincing that it’s a good idea to let Microsoft or another Content Delivery Network (CDN) host your jQuery core files, click here for an explanation.

This post only deals with the how-to. We also have instructions for using jQuery hosted on Google’s CDN and on the jQuery.com CDN.

Quick and easy:

Add the following code to the <head> section of your page:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>

If you’re curious as to why there’s no http: as part of the src, it’s so you can use a single reference that works on both secure (https) and unsecure (http) pages. David Ward explains further here. Note that you will need to add the http: if you’re testing your code on a local drive.

For WordPress:

If you’re using WordPress as a content management system, a local copy of jQuery is automatically referenced from the <head> of each page. The file that actually plugs the relevant code in there is wp-includes/script-loader.php. Rather than edit that core file, you can tell WordPress to reference the jQuery core hosted on Microsoft’s CDN by adding the following few lines to the functions.php file in your theme:

if ( !is_admin() ){
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.min.js"), false, '1.6.1');
  wp_enqueue_script('jquery');
}

Note that with this method you cannot use the “no http:” trick as explained above. If you do, WordPress will treat the URL as relative and prepend the URL of your own site. If you are running a secure site with WordPress, use https instead of http in that functions.php snippet.

How To Let jQuery.com Host jQuery For You

Posted by Niall Doherty in jQuery

If you need convincing that it’s a good idea to let jQuery.com or another Content Delivery Network (CDN) host your jQuery core files, click here for an explanation.

This post only deals with the how-to. We also have instructions for using jQuery hosted on Microsoft’s CDN and on Google’s CDN.

Quick and easy:

Add the following code to the <head> section of your page:

<script src="//code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>

If you’re curious as to why there’s no http: as part of the src, it’s so you can use a single reference that works on both secure (https) and unsecure (http) pages. David Ward explains further here. Note that you will need to add the http: if you’re testing your code on a local drive.

For WordPress:

If you’re using WordPress as a content management system, a local copy of jQuery is automatically referenced from the <head> of each page. The file that actually plugs the relevant code in there is wp-includes/script-loader.php. Rather than edit that core file, you can tell WordPress to reference the jQuery core hosted on the jQuery.com CDN by adding the following few lines to the functions.php file in your theme:

if ( !is_admin() ){
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://code.jquery.com/jquery-1.6.1.js"), false, '1.6.1');
  wp_enqueue_script('jquery');
}

Note that with this method you cannot use the “no http:” trick as explained above. If you do, WordPress will treat the URL as relative and prepend the URL of your own site. If you are running a secure site with WordPress, use https instead of http in that functions.php snippet.

How and Why: CDN Hosted jQuery with a Local Fall-Back Copy

Posted by Niall Doherty in jQuery

As explained here, there are several good reasons for using CDN hosted jQuery. But what about the downside?

Really, there isn’t much of one. The primary argument against using hosted CDN hosted jQuery is that the CDN might suffer an outage. Now granted, that’s very unlikely to happen with the likes of Google, Microsoft and jQuery.com, but it is possible nonetheless. If your site absolutely must have jQuery loaded and available at all times, having the essential files hosted elsewhere is a risk you might not be willing to take.

But never fear, there is a solution: You can have CDN hosted jQuery as your Plan A, and fall back to a local copy as your Plan B.

Here’s how

First, load in your CDN hosted jQuery file as normal. The example below uses the Google CDN (more detail here). See instructions for Microsoft’s CDN and the jQuery.com CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Next, right below that, in the <head> of your document, you should add the following JavaScript…

<script type="text/javascript">
  if (typeof jQuery === 'undefined') {
     var e = document.createElement('script');
     e.src = '/local/jquery-1.6.1.min.js';
     e.type='text/javascript';
     document.getElementsByTagName("head")[0].appendChild(e);
  }
</script>

After that, you can go ahead and add whatever other JavaScript you like.

A word of caution

Note that the above is a very basic fall-back method, and it has some limitations. For example, while the fall-back procedure is in process, your other JavaScript files with jQuery dependencies will go ahead and load regardless, no waiting. This may cause problems.

For more advanced and robust solutions, check out this post on happyworm.com.

Do You Need An API Key To Use Google’s jQuery CDN?

Posted by Niall Doherty in jQuery

Nope.

From our own testing, we’ve determined that you can run jQuery from the Google CDN without signing up for an API Key. You can use both the google.load method and the regular <script> method regardless of whether you have a key or not, although we recommend the latter method since it shaves a few milliseconds off your page load time.

google.load example:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the
  //  latest version matching that partial revision pattern
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.6.1).
  google.load("jquery", "1.6.1");
  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

Regular <script> example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

More detail on that last method via here.

So what’s the point of signing up for an API key?

To quote the Googlemeisters themselves:

The API key… allows us to contact you directly if we detect an issue with your site.

Might be worth signing up for the key if you want those alerts.

google.load example with API key:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the
  //  latest version matching that partial revision pattern
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.6.1).
  google.load("jquery", "1.6.1");
  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

Obviously, you’ll want to replace INSERT-YOUR-KEY with your own actual key, which you can get by signing up here.

Why Use CDN Hosted jQuery?

Posted by Niall Doherty in jQuery

Why should you even consider using CDN hosted jQuery? Well, one answer is that lots of big sites already do it. Just a sampling: Break.com, FAIL Blog, Foursquare, Twitter, Posterous, SitePoint, Stack Overflow, Stanford.edu, and the jQuery site itself. If it’s good enough for them, there’s a decent chance that CDN hosted jQuery will work for you, too.

But if you need a little more convincing than that, Dave Ward does a nice job explaining the advantages:

Decreased Latency

A CDN — short for Content Delivery Network — distributes your static content across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network…

Increased parallelism

To avoid needlessly overloading servers, browsers limit the number of connections that can be made simultaneously. Depending on which browser, this limit may be as low as two connections per hostname. Using the Google AJAX Libraries CDN eliminates one request to your site, allowing more of your local content to downloaded in parallel.

Better caching

Potentially the greatest (yet least mentioned) benefit of using the Google AJAX Libraries CDN is that your users may not need to download jQuery at all. No matter how aggressive your caching, if you’re hosting jQuery locally then your users must download it at least once. […] When a browser sees multiple subsequent requests for the same Google hosted version of jQuery, it understands that these requests are for the same file. Not only will Google’s servers return a 304 “Not Modified” response if the file is requested again, but also instructs the browser to cache the file for up to one year. This means that even if someone visits hundreds of sites using the same Google hosted version of jQuery, they will only have to download it once.

Learn how to use hosted jQuery from the following CDN’s:

How To Test If Your CDN Hosted jQuery Is Working

Posted by Niall Doherty in jQuery

So you’ve opted to let one of the big boys host your jQuery, but you want to make sure it’s working. Here’s a quick and easy way to do just that.

Pop the following code into the <head> of your document (note that we’re using the Google CDN below, see more options on this page):

<script src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
      		alert("HELLO");
   	});
</script>

Now load up that page and you should get a pop-up message saying HELLO. That means that everything is working correctly.

Troubleshooting

If you don’t get the pop-up, here are a few quick things to check:

  1. Make sure you have the correct sections in your HTML document, such as <head>, <body>, etc.
  2. Start eliminating elements until you’re left with only the essential code on the page. Get the basics working, then build your page back up, testing as you go.
  3. Try using jQuery instead of $ on line 3 above. This helps avoid conflicts with other JavaScript libraries you might have loading on the page.
  4. If you’re using Firefox, open the Firebug console and reload the page to see if any errors show up in your code.
  5. See if you can get a regular JavaScript alert working, without using jQuery. See an example here. If that doesn’t work, check that JavaScript is enabled in your browser.

What is a CDN?

Posted by Niall Doherty in jQuery

CDN is an acronym for Content Delivery Network or Content Distribution Network. The idea of a CDN is that you have identical copies of files located on different servers around the world. So instead of having all your website files hosted on a single US server, you’d have duplicates on several servers around the globe.

This comes in handy when, for example, someone far outside the US wants to access your files; instead of having to hop through multiple networks to make the request and receive a response, the user’s request can be routed to a server nearer to their physical location. Thus, less time spent waiting for the files.

Here’s an alternative explanation of a Content Delivery Network:

A CDN is a system of computers containing copies of data placed at various nodes of a network. When properly designed and implemented, a CDN can improve access to the data it caches by increasing access bandwidth and redundancy and reducing access latency. Data content types often cached in CDNs include web objects, downloadable objects (media files, software, documents), applications, live streaming media, and database queries. (source)

Read about the benefits of CDN hosted jQuery.