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

Read More

Thursday, March 26, 2015

Some Useful Web Development Tools

In course of working and learning, we all discover some useful tools that just make life easier. But the net is a big place. And usual venues of information sharing - meeting at conferences and swapping tidbits doesn't happen all the time. So am trying to write down a list of webdev tools, and other general tools that I found useful.

There is a lot of choice out there for most tools. So I have included the one we use, and a few others that we evaluated. To begin with,

General Resources
Web Frameworks
  • Django: This is probably redundant here, given that we have been talking of Django all the time. Basically, Python based web framework.
  • Ruby on Rails
CSS Frameworks
JavaScript Libraries
  • jQuery: Nifty JavaScript library that makes html document traversing, event handling and ajax simpler
  • YUI
JavaScript Frameworks
  • Backbone with Marionette: Backbone is awesome when you have a fairly interactive application. Helps you manage the client data display and event handling in a MVC fashion. Marionette is another library that makes backbone easier. Now, just to note, there are many more JavaScript Frameworks coming along. Back when we were evaluating, it was Backbone, Angular and Ember. But by the time I publish this post, this list will probably be outdated. :-)
  • AngularJS
  • Ember
  • Meteor
  • NodeJS
  • ReactJS
Code Editors
Okaym. We are a Vi shop. But for what its worth, there are these awesome 
Module Loaders
Won't make a recommendation here since we are not yet convinced that out choice is working for us yet :) But you have Module Loader Comparison + Pros / Cons to help out
Build Tools
Know of an awesome tool? Leave a comment!

Read More