Best way to link to jQuery files

Question

Is it better, in terms of site performance/speed, to link out to jquery, like this:

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

or to put the files on the server and link to them from there instead, like this:

<script src="js/jquery-1.9.1.js"></script>

[It's actually a good idea to do both](http://stackoverflow.com/questions/14654918/html5-boilerplate-and-jquery) -- the CDN is probably faster, but a local backup is useful in case the CDN is down for some reason. Just be sure you [link to the specific version on the CDN](http://stackoverflow.com/questions/12608242/latest-jquery-version-on-googles-cdn/12608285#12608285) for optimal benefit to your visitors. — Blazemonger, Sep 09 '13 at 16:10
If I had to hazard a guess I would say the local server side. Would be quicker for the server to access imo. — MitulP91, Sep 09 '13 at 16:11

score 7 · Accepted Answer · answered Sep 09 '13 at 16:12

It depends who has the faster server, right? :)

There are a few advantages with code.jquery.com:

It's very common. Users are likely to already have that file cached if they've been to another site that uses that file.
It's probably geographically load balanced. It could load faster for users who are far away from your web server.

PlantTheIdea · Answer 2 · 2013-09-09T16:22:20.257

As someone else mentioned, a local fallback is always a good idea, but you should also set the IE vs non-IE versions appropriately. Something simple like this should do the trick:

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js""></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!--<![endif]-->

<script>
    if (!window.jQuery) {
        document.write('<script src="/path/to/your/jquery"><\/script>');
    }
</script>

The first part is the conditional if for jQuery built with workarounds for older IE vs the faster, more efficient jQuery 2.0 version. This uses the Google CDN since that has both http and https versions, whereas code.jquery.com only has http. If https is not a concern, though, the code.jquery.com CDN is usually faster.

The second piece is checking if window.jQuery was created, and if not, use the local version.

The benefit to using a CDN version vs local version is just speed. Not only is their server bandwidth likely much (MUCH) larger than yours, most browsers have accessed that version before and have it stored in cache so the browser doesn't need to redownload it.

You have a typo on the first script tag, you double quoted it. Other than that, I'm using the exact same code :) — Ryan Casas, Aug 10 '15 at 15:34

score 1 · Answer 3 · answered Sep 09 '13 at 16:17

The best way to attach jQuery (or any library that google cdn is sharing) is:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

This code links jQuery from CDN (this way is better because user could ALREADY HAVE this jQuery ver. in browser cache). After that code checks is jQuery successfully loaded (maybe CDN was down or something...) and if it's not it attaches the local version of jQuery lib to your page.

This code is used in html5 boilerplate.

score 0 · Answer 4 · answered Sep 09 '13 at 16:12

Generally speaking, using a CDN (such as code.jquery.com) will be able to deliver the files to your users quicker than your own servers - that's what they exist for!

You may also want to consider using a copy on your own server as a fallback if for any reason the CDN fails.

score 0 · Answer 5 · answered Sep 09 '13 at 16:14

In the first case you are referring to library through a remote URL while in second case it's locally available on the server.

So it depends on many factors. Finally its about how far your end user is from the jquery url. User could be closer to your host or jquery host as well. Also it will depend on which one is serving the request most efficiently.

score -1 · Answer 6 · answered Sep 09 '13 at 16:19

-1

i prefer using googleapis:

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

here is why.

answered Sep 09 '13 at 16:19

Ahmad Anas

113
8

Best way to link to jQuery files

6 Answers6

Linked