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>
In this article, we will discuss how to link jQuery to the HTML page. There are two ways through which you can include the jQuery file in HTML code: Downloading the jQuery Library: In this method, we directly download the library through the website on our system. Basically, there are two versions to download:-
There are two ways through which you can include the jQuery file in HTML code: Downloading the jQuery Library: In this method, we directly download the library through the website on our system. Basically, there are two versions to download:- Production Version – It is a compressed version used mainly for your live website.
If you directly click the jQuery download link, on some web browsers, the download menu will not appear, but the contents of the jQuery file will appear. If you directly click the jQuery download link, on some web browsers, the download menu will not appear, but the contents of the jQuery file will appear.
For Local Installation, download jQuery library on your local machine and include it in your HTML code. The following are the steps: Go to the jQuery website to download the latest version available. Now put downloaded jquery-3.2.1.min.js file in a directory of your website, e.g. /jquery.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With