When you want to use jQuery on your web site, you must allow the browser to access the jQuery core file. Depending on what all you are using as far as jQuery, you may also need the files for jQuery UI functions and or jQuery UI style sheets.

The question is whether it is best to download these file to your own hosting server and link to these locally sourced files or whether to link to external sites such as Google's Hosted Libraries. There are pros and cons to each way of linking to these jQuery files.

In this article we will discuss the PROS and CONS of linking to your locally sourced jQuery files or linking to an external source.

 

Linking to internal jQuery files: Pros and Cons

If you have internally hosted jQuery files, you will have a line like this in the <head> section of your web site.

<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>

What this is doing is looking for the jQuery file from the files within your own domain. There is no http://, so it is not going back out to the web to find these files.

Pros

Known source: You can be sure that the files are there and available

File Version Control: You can control what version of the jQuery core file you are using if there are conflicts in your code with later or earlier versions

Cons

Slower downloads: the jQuery core file can be quite large and slow down the loading speed for your page

Your site's hosting server speed: you are relying on the speed of your host to serve these files to the visitor's browser. If you are on discount shared hosting, this can be rather slow.

 

Linking to external sources for jQuery files: Pros and Cons

You can link to external sources for your jQuery core and other jQuery files. Your browser just loads them up and uses them for implementing your script. One of the best places to get these files is from the Google Hosted Library. At this link, you can find snippets of code to put into your <head> section.

If you have external sources for your jQuery files, you will see a line like this in your <head> section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

OR

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.11.1");

google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>

This line of script is instructing the browser to fetch the file from the googleapis.com site.

Pros:

Google's Server Speed: Google's servers are very likely much faster than your hosting company's

Physical Location: Google's CDN, Content Delivery Network, servers are located throughout the world, so there is a much faster download speed for you web page.

Increase Parallelism: The browser being used may limit the number of files that can be requested simultaneously from one connection, Having these jQuery files coming from another connection can allow the external files to be download simultaneously to you own web page files.

File Caching: File caching in your browser may well already have the Google source of the jQuery files loaded in its cache. This means that it won't need to download the file when your site comes up, saving time. Even if the file came from a different Google server, there is something known as "cross-site caching" that sees this file as from the same source.

Controlling which jQuery version: Google's Developer Library has numerous versions of the jQuery core files to which you can choose from, if there is some specific version that you require.

It is free: linking to Google's library is free. If you are using another provider, there may be a cost involved.

Cons:

Relying on external sources: You are relying on someone else to have these files and provide them to your visitor's browser. Google is a pretty reliable source and since there are multiple servers, you likely can trust Google's sources. If you are using other external networks for your jQuery files, they may not have the reliability or speed.

 

Other things to note about using Google's Hosted Libraries:

Ways to load the jQuery core file

You can access the jQuery core file from Google using one of two methods. You can have the <script> tag that loads it directly

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

OR you can use the google.load() method as shown below:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.11.1");

google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>

The second way requires linking to the jsapi web page then running the google.load() funtion and then the google.setOnLoadCallbacd() funtion.

There is some argument as to which is the better method. The second method may download the file faster, but then there are more functions to perform. The result is pretty much eual as far as page load speed.

 

http://, https:// or simply //

If you look at the <script> examples provided on the Google Hosted Library site, you will see this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

You will notice that there is no http: or https: protocol preceding the URL.

Using it this way, with no http: or https: will prevent the conflict between possible SSL protected or non-protected servers.

NOTE: having this link with no http: protocol may not load the necessary files if you are testing your script on your own computer.