How to load jQuery locally when CDN fails?

As per my last article What is a CDN?, we have seen that how using a CDN to delivery our CSS and Javascript we can speed up our page loading time.

Now let suppose in case CDN is down then our jQuery will not load and some of our website features will no longer work. So we need a way to load a local jQuery file if for some reason CDN jQuery fails to load.

Below given script code checks whether jQuery is loaded from Microsoft CDN or not, if not then it references the jQueryfile from your local folder.


<!DOCTYPE html>
<html>
<head>

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

<script type="text/javascript">

//If jQuery not loaded from CDN, then load from local folder
if (typeof jQuery == 'undefined') {
     document.write(unescape("%3Cscript src='jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); 
}

//Now, jQuery will be always available to use even if CDN fails
function test()
{
     alert($);
}

</script>

</head>
<body onload="test()">
<h1>Test page...</h1>
</body>
</html>

Programming is Easy…

Advertisements

What is a CDN?

“CDN- Content Delivery Network is a network of geographically dispersed servers which delivers cached content of a site like the images, CSS/JS files and other structural components from websites to end users based on the geographic location of the user.”

The goal of a CDN is to serve content to end-users with high availability and high performance.

Normally when a user comes to your website, they are redirected to your web host’s server. Your web host’s server which located at a central location let say in India. So every user on your website is accessing this one server to view your website. Now if you have high volume of traffic, then you can overload your server which leads to a slow loading site or even server crash. This is where a CDN comes in handy because it is a network of servers, but most importantly these servers are spread through out the world. When you use a CDN, your static content is cached and stored on all of these servers. Static content includes images, stylesheets (css files), javascripts, Flash, etc. Now when a user visits your site (original server), the CDN technology redirects them to the closest server to their location.

For example: If your main server is hosted in India, and someone from Durham, England tries to access it, then they will be redirected to the closest server which may be in London. This reduces latency and provides a faster loading of your website.

CDN

CDNs not only ensure a faster experience to your users, but they also help to prevent site crashes in the event of traffic surges – CDNs help to distribute bandwidth across multiple servers, instead of allowing one server to handle all traffic.

Why do I need a CDN? – 

The most important reason for using a CDN is to improve your user’s experience in terms of speed.

  • It increases the parallelism available –>Most browsers will only download 3 or 4 files at a time from any given site.
  • It increases the chance that there will be a cache-hit–> As more sites follow this practice, more users already have the file ready.
  • It ensures that the payload will be as small as possible–> Google can pre-compress the file in a wide array of formats (like GZIP or DEFLATE). This makes the time-to-download very small, because it is super compressed and it isn’t compressed on the fly.
  • It reduces the amount of bandwidth used by your server–>Google is basically offering free bandwidth.
  • It ensures that the user will get a geographically close response–> Google has servers all over the world, further decreasing the latency.

There are several scenarios when you might not want to use  CDN:-

  • When you are building an intranet application where the webserver is hosted on the same network as the clients.–> If you use CDN ,you will be making a call to the internet rather than a webserver on the local network. This increases bandwidth for your organization, and is slower.
  • When you want to run your application offline
  • When you need to customize it
  • etc…

Following are the three popular jQuery CDNs-

  1. Google
  2. Microsoft
  3. jQuery

Below is the code to load jQuery from all 3 CDNs.

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

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

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

For more info please visit- http://gtmetrix.com/why-use-a-cdn.html

Programming is Easy…