How to use Content Delivery Network (CDN) with a fallback mechanism

Content Delivery Network (CDN): CDNs have changed the web hosting scenarios significantly during the past few years by distributing the files & traffic across multiple servers instead of hosting a web application completely on 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:

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

2

The sample code would look like as shown below.

3

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!

4

Step 2:  The next step is to provide a fallback mechanism in case if the CDN is down.

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.

5

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 this will help someone in need…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s