Tuesday, April 28, 2015

Site Performance: CDN vs Local Hosting

In a few posts here, we will explore how to improve the site performance and scale.

To begin with one of the easiest performance boost to page loads is to source your standard libraries from CDN whenever possible instead of sourcing them from your server.

A CDN, Content Delivery Network, is a set of servers spread across the globe that host content and have an optimized algorithm to serve the content efficiently. So most of your standard libraries like jQuery should be loaded from CDN.

The advantages of using CDN for your standard scripts are:
  1. Better Caching: No matter how optimized your site is, the user will have to download the library once at least. But, if you use a popular CDN, and if your user has already visited another site that referenced the same library, the library has already been downloaded into the browser's cache. So it will not be downloaded again. This creates a cool cross-site caching effect. 
  2. Lower Load and More Parallelizing: Browsers typically limit number of simultaneous connections from one server. Loading libraries from a CDN server means one less connection to your server for that library. This translated to lower loads to your server, but more importantly, it also frees up the connections that this library load would have used to loading your actual content.
  3. Decreased Latency: CDNs are typically optimized to serve content efficiently based on location. Meaning that the content will be served from the CDN server that can serve it the fastest. You will have to invest fairly well in infra to achieve that kind of optimization.
The main CDN providers are cdnjs and Google CDN, along with Microsoft for ASP. Google CDN is the most widely deployed. However, cdnjs has some libraries that Google does not provide. 

Using CDN is simple. Just direct your script statement to load from Google instead of loading from your server copy.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>

Notice that we use https. Many CDNS also accept just // and then translate that to http or https depending on what your site uses. However, by using https, you can ensure that no one can get in between you and Google and tamper the libraries. So even if your site is un-encrypted http, use https while loading the CDN libraries.

And finally, you may yet want the browser to go to your local server copy in case your CDN is unavailable. While chances of CDNs being unavailable are low, you may hit unfortunate events like library moving behind a paywall, changing its URL location, and such. So it is prudent to have a fallback. To do that just add a check to see if the library was loaded, and if not, load yours.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script> 
if (!window.jQuery) 
    document.write('<script src="/path/to/local/jqueryui/1.8.18/jquery-ui.min.js"><\/script>');

Make sure you don't write </script> anywhere within the <script> element as it will close the HTML and cause the script to fail. So notice that we escaped it using a backslash <\/script> in the closing script element of the documentWrite


  1. Your website is really cool and this is a great inspiring article.

  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
    Really very informative post you shared here. Kindly keep blogging.
    If anyone wants to become a Front end developer learn from Javascript Online Training from India .
    or learn thru JavaScript Online Training from India.
    Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai