jQuery is a fast, popular JavaScript Library that has really small footprint. jQuery makes document handling, event processing, animation, and Ajax interactions very easy and has a short learning curve. The cross browser compatibility and abondance of free plugins for jQuery makes it one of the most used javascript libraries on web.
Popularity of jQuery has been so high that many CDNs have already started pre-hosting its versions. Though CDN hosting may not be always affordable, you may be willing to consider them if its free of cost and high performance.
Are you still hosting your own version of jQuery on your websites? There are already four CDNs available that host the jQuery library free of charge for public use:
- Google’s AJAX API CDN
- Microsoft’s Ajax CDN
- The Official jQuery CDN
- CDN JS – This is a CDN that hosts a lot of uncommon js frameworks and plugins that are not hosted by above 3 CDNs
You may be concerned that the free CDN may not provide you a good up-time or it may not be available in all regions your site is accessed. In this post we are just going to mention a simple trick for utilizing these free CDN with a local fallback copy to ensure your site is fully functional in case of any failure from these CDN to deliver your required content.
Why Should You Use A CDN For JQuery?
I have personally preferred pick a low cost CDN or to create my own CDN using open source and free tools, however there are several reasons that convinced me to almost always use a public CDN for jQuery and other JavaScript frameworks. Typically all benefits of using a CDN are applicable in this situation with some extra benefits due to it being public.
Browser Can Do Limited Parallel Loading From One Site
Most modern browsers will be able to download 3 or 4 files at a time from any given site. If the user of your web page has already downloaded a copy of jQuery from the same CDN, browser will not download it again. If you are using a public CDN that gives browser free set of threads to load in parallel when your site content is loading.
Public CDN Is Even Better For Good Cache-Hit.
The typical advantage of any CDN comes when any static content to be served is available in their LRU (Least Recently Used) cache. The CDN caches any files that being accessed more frequently. In case of jQuery, you may already know that its pretty popular and many sites are already following this practice of using public CDN, that means there is higher chance that jQuery is served from a cache. For example, The Google CDN is being used to host jQuery for very high-traffic sites like Twitter, TwitPic, Stack Overflow and Foursquare.
Pre-Compressed Files Speed You Up Even More
Any CDN server can pre-compress the file in various high compression formats (like GZIP or DEFLATE). This reduces the time-to-download, On the other hand if you host it on your server and try to compress it, you may need to either do it on the fly or keep compressed version cached for smaller payload.
You Will Use Less Of Your Server Bandwidth
Any of these public CDNs are serving your javascript file. Just imagine a high volume on your server may add to a lot bandwidth cost for you. More you can use for free, the better.
Geography Advantage Of Speed
This is another typical CDN advantage, lets say some of your users are accessing your site from another country and you do not even have server in those countries. Using these public CDN will ensure your users files are download from the closest possible server available. Google and Microsoft have their CDN servers all over the world, so you may not need to worry much about users far from your server (at least for jQuery).
Some Conditions When You May Not Want To Use The CDN For JQuery?
There are a couple scenarios when you might not want to use jQuery from Google’s CDN:
Intranet Web Applications
When you are developing a web app where your server is hosted on the same network as the users. In this case, if you use public CDN hosted jQuery, you will end up making a call to the internet rather than your server on the local network. This may affect your organizations internet bandwidth and is also going to be slower.
When Your Users Do Not Have Internet Access
This may not be a very common scenario these days, however if you are developing a application that is used on a WAN/LAN but client computers on those network do not have internet access (may be due to security reasons) than you may want to stick to local hosted jQuery. In fact in this situation no CDN would be helpful.
How To Use jQuery
Now if you are convinced that we should use one of these CDN for jQuery than lets move on to the “How” part of it.
Using Protocol Independent URL
A relative URL without a scheme (http: or https:) is valid and really useful. I have found this best practice very handy during development, generally you may be developing a HTTPS site however you may want to use it on your development setup with http for faster development and setup. Using protocol independent URLs would allow you without changing anything on your code. Once your code is hosted on a HTTPS server the same code will work perfectly fine but will use HTTPS protocol. If you stick to protocol URLs than you may need to have separate configuration for production and non-production versions.
For example these are the protocol independent urls for all four popular CDNs with jQuery 2.0.0 version
//Google : <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script> //Microsoft : <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.js"></script> //Media Temple: <script src="//code.jquery.com/jquery-2.0.0.min.js"></script> //CDN JS: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
Have A Fallback
Any of these CDNs may fail. At times, these CDNs may not really be down, however due to network issues they may not be reachable. Having a local hosted fallback for your application is going to avoid any problems that may arrise due to a free CDN not being available.
To do this, you just need one simple addition below the script tag to include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script>window.jQuery||document.write('<script src="js/vendor/jquery-2.0.0.min.js"></script>')</script>
Thats it, this piece of code is going to make sure the local jQuery version is loaded in case the CDN fails.
Always Stick To A Specific Version Of JQuery
Loading a Specific version of jQuery will ensure your application behaves as expected. If you use the latest version URL from CDN if may not be compatible with the existing plugins and code on your site. Any jQuery version updates on your application should ideally be going thru development/testing lifecycle before start service on production.
Also, the latest version has a very short term caching duration ( max-age=3600) where as any specific versions get long-term caching (max-age=31536000). This means if you use latest version it is less likely to hit the cache as compared to the specific versions.
Prefer To Use Minified Version Of JQuery On Production
There are two different links for each of jQuery version, one is regular and other is minified (jquery.min.js). The functionality of these two files is same however the minified version is compressed for best use of network bandwidth.
You should use the compressed file of jQuery on production environment for best load time. The minified version is much smaller as compared to regular version.
I prefer to use regular version during development time since there may be some code you may need to debug and it will be more readable in regular version.
Other Stuff On These CDN For Free
The widespread adoption of jQuery is benefitting the small players as well. These free CDN companies are hosting many popular plugins of jQuery as well. I have already used jQueryUI, and few other plugins.
They are also hosting other famous JavaScript libraries like MooTools, ExtJS and many more. Feel free to explore feel their sites and see what you can use.
Summary
jQuery is used by thousands Web Developers & Web Designers since its an awesome library that empowers you accelerate web development. Hopefully this article was able to shed some light on how best you can use the jQuery and same some $$ for your business. Do you know of other best practices about using jQuery, dont forget to share in comments below.