Tuesday, November 26, 2013

Pageload optimization using jQuery CDN

First thing first : What is CDN?

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet.



What it does?

The goal of a CDN is to serve content to end-users with high availability and high performance.
A CDN caches static resources in distributed servers across a region or worldwide, thereby bringing resources closer to users and reducing round trip time.

Main problem a CDN solve is latency. The amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.). Latency depends largely on how far away the user is from the server, and it’s compounded by the number of resources a web page contains.


Lets come to the topic : Which are the popular jQuery CDN?

There are 3 popular jQuery CDNs.
1. Google.

<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

2. Microsoft

<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

3. jQuery.

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


How it optimize the page load?

It reduces the load from your server.
It saves bandwidth. jQuery framework will load faster from these CDN.
The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.


How to load jQuery locally when CDN fails?

Given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.


Related Posts Plugin for WordPress, Blogger...

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: