Where do you include the jQuery library from? Google JSAPI? CDN?

Where do you include the jQuery library from? Google JSAPI? CDN?

There are a few ways to include jQuery and jQuery UI and I’m wondering what people are using?

Google JSAPI
jQuery’s site
your own site/server
another CDN

I have recently been using Google JSAPI, but have found that it takes a long time to setup an SSL connection or even only to resolve google.com. I have been using the following for Google:

I like the idea of using Google so it’s cached when visiting other sites and to save bandwidth from our server, but if it keeps being the slow portion of the site, I may change the include.
What do you use? Have you had any issues?
Edit: Just visited jQuery’s site and they use the following method:

Edit2: Here’s how I’ve been including jQuery without any problems for the last year:

The difference is the removal of http:. By removing this, you don’t need to worry about switching between http and https.

Solutions/Answers:

Solution 1:

Without a doubt I choose to have JQuery served by Google API servers. I didn’t go with the jsapi method since I don’t leverage any other Google API’s, however if that ever changed then I would consider it…

First: The Google api servers are distributed across the world instead of my single server location: Closer servers usually means faster response times for the visitor.

Related:  How to convert a comma separated string to an array?

Second: Many people choose to have JQuery hosted on Google, so when a visitor comes to my site they may already have the JQuery script in their local cache. Pre-cached content usually means faster load times for the visitor.

Third: My web hosting company charges me for the bandwidth used. No sense consuming 18k per user session if the visitor can get the same file elsewhere.

I understand that I place a portion of trust on Google to serve the correct script file, and to be online and available. Up to this point I haven’t been disappointed with using Google and will continue this configuration until it makes sense not to.

One thing worth pointing out… If you have a mixture of secure and insecure pages on your site you might want to dynamically change the Google source to avoid the usual warning you see when loading insecure content in a secure page:

Here’s what I came up with:

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

UPDATE 9/8/2010
Some suggestions have been made to reduce the complexity of the code by removing the HTTP and HTTPS and simply use the following syntax:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

In addition you could also change the url to reflect the jQuery major number if you wanted to make sure that the latest Major version of the jQuery libraries were loaded:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

Finally, if you don’t want to use Google and would prefer jQuery you could use the following source path (keep in mind that jQuery doesn’t support SSL connections):

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

Solution 2:

One reason you might want to host on an external server is to work around the browser limitations of concurent connections to particular server.

Related:  What is the best way to test for an empty string with jquery-out-of-the-box?

However, given that the jQuery file you are using will likely not change very often, the browser cache will kick in and make that point moot for the most part.

Second reason to host it on external server is to lower the traffic to your own server.

However, given the size of jQuery, chances are it will be a small part of your traffic. You should probably try to optimize your actual content.

Solution 3:

jQuery 1.3.1 min is only 18k in size. I don’t think that’s too much of a hit to ask on the initial page load. It’ll be cached after that. As a result, I host it myself.

Solution 4:

If you want to use Google, the direct link may be more responsive. Each library has the path listed for the direct file. This is the jQuery path

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Just reread your question, is there a reason your are using https? This is the script tag Google lists in their example

<script src="http://www.google.com/jsapi"></script>
<script>

Solution 5:

I wouldn’t want any public site that I developed to depend on any external site, and thus, I’d host jQuery myself.

Related:  Check if value exists in firebase DB

Are you willing to have an outage on your site when the other (Google, jquery.com, etc.) goes down? Less dependencies is the key.

Solution 6:

Pros: Host on Google has benefits

  • Probably faster (their servers are more optimised)
  • They handle the caching correctly – 1 year (we struggle to be allowed to make the changes to get the headers right on our servers)
  • Users who have already had a link to the Google-hosted version on another domain already have the file in their cache

Cons:

  • Some browsers may see it as XSS cross-domain and disallow the file.
  • Particularly users running the NoScript plugin for Firefox

I wonder if you can INCLUDE from Google, and then check the presence of some Global variable, or somesuch, and if absence load from your server?