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.

WHAT
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.

WHY
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.
WHICH
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. 

HOW
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>');
</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



6 comments:

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

    ReplyDelete
  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

    ReplyDelete
  3. Thanks for the explanation!
    This was a very helpful resource on Web Hosting Services

    ReplyDelete
  4. Offshore Hosting simply means hosting on a server that is in a different country than you're located in. offshore VPS

    ReplyDelete
  5. cheap dedicated server hosting are an entrance for a website to the Web. Dedicated Servers form the bond between your network connection and the Web by storing your all content in varied formats that make your website and release them on the Web for visitors to view your website. We offer Netherlands Dedicated Server Hosting with reasonable installation and operation costs. Our dedicated server makes you build a fast and resilient environment within a few minutes.

    ReplyDelete
  6. Please let me know if you’re looking for a article writer for your site. You have some really great posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some material for your blog in exchange for a link back to mine. Please send me an email if interested. Thank you! https://onohosting.com/

    ReplyDelete