How To Use Content Delivery Network (CDN) With A Fallback Mechanism

Content Delivery Network (CDN)

CDNs have changed the web hosting scenarios significantly during past few years, by distributing the files & traffic across multiple servers instead of hosting a web application completely on a single server.

What type of files should be hosted on CDN

Typically static content like Videos, Images, Audio Clips, CC Files, JavaScript and so on.

Who all are CDN Service Providers

Major free CDN providers are Google, Microsoft & Yahoo.

Benefits of using CDNs

There are several reasons why a CDN could benefit your website and company.

1. Different domains
   Browsers limit the number of concurrent connections (file downloads) to a single domain. Most permit four active connections so the fifth download is blocked until one of the previous files has been fully retrieved. You can often see this limit in action when downloading many large files from the same site.
   
   CDN files are hosted on a different domain. In effect, a single CDN permits the browser to download a further four files at the same time.
   
   
2. Files may be pre-cached
   JQuery is ubiquitous on the web. There’s a high probability that someone visiting your pages has already visited a site using the Google CDN. Therefore, the file has already been cached by your browser and won’t need to be downloaded again.
   
   
3. High-capacity infrastructures
   You may have great hosting but I bet it doesn’t have the capacity or scalability offered by Google, Microsoft or Yahoo. The better CDNs offer higher availability, lower network latency and lower packet loss.
   
   
4. Distributed data centers
   If your main web server is based in Dallas, users from Europe or Asia must make a number of trans-continental electronic hops when they access your files. Many CDNs provide localized data centers which are closer to the user and result in faster downloads.
   
   
5. Built-in version control
   It’s usually possible to link to a specific version of a CSS file or JavaScript library. You can often request the “latest” version if required.
   
   
6. Usage analytics
   Many commercial CDNs provide file usage reports since they generally charge per byte. Those reports can supplement your own website analytics and, in some cases, may offer a better impression of video views and downloads.
   
   
7. Boosts performance and saves money
   A CDN can distribute the load, save bandwidth, boost performance and reduce your existing hosting costs — often for free.

I hope it is enough of the theory, now let’s see how to incorporate CDN in you code with a fallback mechanism to support offline execution scenarios.

In this demo we will make use of CDN provided by Google. It can be located at https://developers.google.com/speed/libraries/devguide as shown below,

The solution structure for our sample project would be as shown below. Notice the script folder which acts as the local resource provider in case CDN is not available.

The sample code would look like as shown below.

Now lets’ perform a two-step DNA Test for this code in order to get a good understanding with the actual implementation.

Step 1

Following code segment shows how to refer a resource from CDN. Notice that we don’t specify any protocol (http or https) for referring this resource. This is actually by design and let the browser to decide the protocol to refer the resource from CDN based on the protocol used for the page itself.

Quite Interesting!

Step 2

The next step is to provide a fallback mechanism in case the CDN is down.

The following code shows the fallback mechanism to handle the scenarios where CDN is not available (mostly for the offline scenarios). This code will get into action only when the CDN is not available due any reasons or the referred resource has been moved out of the CDN.

And, that’s it. We are done.

Though this is a small trick but is really a proven performance booster for jQuery based projects.

Hope you find it helpful.