3 CDN URL to load jQuery into Web Page from Google, Microsoft

jQuery is one of the most popular and powerful JavaScript libraries, but in order to use it, you need to load into your web page using standard HTML <script> tag. Based on whether your web page is public accessible or for an organization, you can either choose to load the jQuery library from local file system, bundled inside your web application or you can directly download using one of the content delivery network (CDN) e.g. Google or Microsoft CDN. Choosing CDN to download jQuery can offer a performance benefit because there servers are spread across the globe. This also offer an advantage that if visitor of your site has already downloaded a copy of jQuery from the same CDN, then it won't have to be re-downloaded.  By the way if you want to bundle jQuery into your web application or want to load it from local file system, you can always download latest version of jQuery from jQuery site at http://jquery.com. Installing jQuery required this library to be placed inside your web application and using the HTML <script> tag to include it into your pages e.g. <script type="text/JavaScript" src="scripts/jquery-1.10.2.js"></script>

The jQuery site offers compressed and uncompressed copies of jQuery files, uncompressed file is good for development and debugging, but can slow down page loading if used in production. Compressed file saves bandwidth and improves performance in production

In this article, I am sharing couple of CDN URLs from where you can directly load jQuery files into your web page, this includes popular Google CDN, jQuery CDN and Microsoft CDN.

List of URL to include jQuery library into web page

Ladoing jQuery from Google and Microsoft CDN URLHere is the list of couple of content delivery network, which provides jQuery hosting. You can use any of these URL to include or reference jQuery library into your page. As I said CDN networks improves loading of jQuery files by offering local hubs, as well as, since they are popular, it might be possible that your visitor has already downloaded jQuery from requested CDN. In first case it helps to load jQuery faster from closest server, while in second case it can leverage already downloaded version of jQuery, which means more faster response time. Here are three most popular content delivery network URLs for loading jQuery library in your web pages.

1. Google CDN URL to download jQuery
http:////ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js is the Google CDN url to download jQuery version 1.10.1, you just need to include that into src attribute of HTML <script> tag as shown below:

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>

One of the worth noting thing is jquery.min.js, which is actual jQuery library, .min version is a compressed production version, which is without debug information to reduce size of jQuery, so that it can be loaded faster.

2. jQuery's CDN to download jQuery files
To use the jQuery CDN, just reference the jQuery library directly from http://code.jquery.com in the script tag, as shown below :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

This will download jQuery version 1.10.1, but you are free to download earlier jQuery version including jQuery 1.4 or jQuery 1.6. visit http://code.jquery.com to see all available files.

3) Microsoft's CDN to load jQuery JavaScript library
Microsoft CDN also host some of the most popular third party JavaScript libraries, including various version of jQuery.  You can use following URL to reference jQuery directly inside src attribute of <script> tag.

jQuery version 1.10.0              : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js
jQuery version 2.0.0            : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js

Where to include jQuery - Head or Body

You can include <script type="JavaScript" src="/scripts/jquery.min.js"> 
in either <head> or at the bottom of the page, just before the </body> tag. Former way of loading JavaScript library is older and later is a newer way to do the same, only difference is performance. By loading jQuery at the bottom of page, you let page gets loaded and rendered ,and doesn't wait for jQuery or any other JavaScript library to be loaded. By the way with modern browser, this performance difference is negligible.

<!DOCTYPE html>
    <title>jQuery Tutorials</title>
        <!-- Your HTML structures -->
        <!-- including jQuery from local resource -->
    <script src='scripts/jquery.min.js'></script>

By the way if you have  put all your jQuery code inside another JavaScript file, than make sure you put it after jQuery.


Here are the three popular CDN URL to include jQuery library version 1.9.0 directly into your web page :

jQuery CDN URL           : http://code.jquery.com/jquery-1.9.1.min.js

That's all on this list of URL to download or include jQuery files into web page. I have shared mainly two ways of referencing jQuery files, from local file system of your web application, or directly downloading from one of the popular CDN network e.g. Google CDN. We have also seen benefit of including compressed version of jQuery file and using CDN network for hosting jQuery. Finally, we learned benefit of putting <script> tag at bottom of <body> tag instead of <head>, mainly faster loading of web page.

Further Reading
jQuery Fundamentals By Dan Wahlin
Advanced Techniques in JavaScript and jQuery By Kevin Murray
Head First jQuery and JavaScript

Other jQuery and JavaScript tutorials you may like to explore
  • Top 5 jQuery Books Every Web Developer Should Read? (see here)
  • How to get current URL Parameter using jQuery? (solution)
  • How to use multiple jQuery Date picker element in one HTML page? (answer)
  • 10 Examples of jQuery selectors for Web Developers (tutorial)
  • How to redirect web page using jQuery code? (answer)
  • 3 Ways to parse HTML using JSoup in Java? (solution)
  • How to reload/refresh a page using jQuery? (answer)
  • How to prevent double submission of POST data using JavaScript? (solution)
  • How to modify multiple elements in one go in jQuery? (example)
  • How to check and uncheck checkboxes using jQuery? (tutorial)


Marven James said...

What does this mean- We are unable to connect to the content delivery network (CDN) that delivers the video stream? and how can you fix it?
best cdn

Aaron Allston said...

The other difference between LAN and WAN, is the speed of the network. The maximum speed of a LAN can be 1000 megabits per second, while the speed of a WAN can go up to 150 megabits per second. This means the speed of a WAN, is one-tenth of the speed of a LAN. A WAN is usually slower because it has lower bandwidth.
ssl cdn

Aaron Allston said...

What is SSL?is this important to have it when u order web hosting?
level 3 cdn

Post a Comment