-
I have seen many answers in SO regarding using Google’s CDN to load jQuery instead of
loading it from the local server. In essence I understand this is the issue related with decreased latency, better caching. But I want to know the technical answer, perhaps an example mentioning why it is even an issue to just load a 30KB file. We see nowadays websites with rich multimedia features which do significant download from server, so in such light does this file size make any difference? -
Also there are huge concerns regarding using such “heavy weight” library if all you are using is just a fraction of subset of features? And if you are going to use at all, it is recommended to use compressed version (30+ KB) instead of the uncompressed one(200+ KB)? I also know the usual answers to it, perhaps if someone can shed more insight to it?
My both questions mentioned above are essentially trying to raise the same issue. I would be very grateful for answers that can provide the perspective to it rather than usual answers in SO?
As you know, it’s all about performance!
If you are work on a large project, which covers modern UI concepts, maybe you will have bunch of different JavaScript libraries hosted on your server.
As you may know, browsers are limited to maximum of few (see ‘connections per hostname’ column) HTTP requests to specific host.
Let’s say you have a site that needs to load a lot JavaScript libraries, and if they are minified, they are between 20-50KB each.
So, simply math: 10 libraries * 40KB = 400KB!
And it’s very important to keep in mind that:
- Access to particular resource (image, stylesheet, etc) is a separate
HTTP request. - There are still people who do not have very good internet
connection or they are connected to public WiFi networks that are
used by many people.
So I think in this case using of CDN (not only for jQuery, and whenever is possible) make sense because:
-
Increase parallel downloading overcoming the limitation of browsers.
-
Since CDN is used by a lot of sites nowаdays, there is a really big
chance to have already cached version of the resource. - It ensures that the user will get geographically close response.
And this point is valid both for your questions:
- It reduces the amount of bandwidth used by your server (it may be a problem sometimes)
But there is something very important, which is ignored by many developers. They are using CDN to get latest version of a library, that is completely wrong! When new version is released, although in most cases, new functionality is added, there are cases when existing functionality can be removed (ex. function becomes deprecated) or modified!
So, it’s a really good practice always to set a specific version of needed resource when you are using CDN.
2
As you know, it’s all about simplicity!
No matter if you’re creating a large-scale web application which would be used by thousands of users every second, or a tiny little website used by you and maybe a few of your friends:
-
You may:
- Go to JQuery website.
- Verify that you already have the newest version.
- If not, download it.
- Copy it to the development directory.
- Maybe set the permissions and attributes related to deployment.
- Add the link to the file in your master page.
- Verify that it works.
-
Or you can:
- Ad the link to the CDN’s JQuery file in your master page.
- Verify that it works.
Using CDN is just easier and faster, without even considering an eventual and hypothetical performance impact. You add a link and it works. Simple as that.
What issues do you have to consider? The only one I know is that if you have to support both HTTP and HTTPS, the links are strange and look like that: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
(notice the missing prefix). It seems that it is causing problems with some very old, very crappy browsers. If you need to ensure support for every browser created since 1990, make sure to search a bit more about this issue before using the CDN for JQuery.
Besides the points mentioned, it also reduces load on your webserver, especially if you don’t have a proxy, so also static files are delivered via Apache or any other heavyload webserver.
Which again speeds up the performance of your website, even for other users.
AND another point!
As shown in some performance talks about Javascript, many browsers will basically stop loading anything while they are loading and running a Javascript file – essentially, they can’t be sure if this script will change the way future objects are loaded, or especially the way future scripts are run. So, while a number of images could be downloaded at once, script files tend to block execution, and so their load time is especially important. (Note this is not the case when the newer HTML tag async
is specified)