Since October I have immersed myself in understanding what Clouds and Content Distribution Networks (CDNs) can do for Web Application developers. Many of the people I know have deployed or are looking to applications on a Cloud infrastructure this year.  Just yesterday, I was talking to a company that I know and they are moving from a hosted ruby service to Azamon looking to make scaling out their service simpler.

The area that is of the biggest interest to me personally is, “how does using a Cloud affect Website optimization?” (That’s the focus of rockstarapps.com tools.) Starting out I was assumed that using Cloud infrastructure or a CDN was only for sites like ESPN.com or CNN.com. How could I, one person and no budget be able to leverage these technologies? Taking this question and breaking it down into several more manageable questions, I try to provide you with the information needed to get started using it in your own projects.

  • Isn’t using a CDN going to be expensive?
  • How easy will it be to get up to speed and use the technology effectively?
  • How can using a CDN like CloudFront improve a sites performance?

Isn’t using a CDN going to be expensive?

The answer is simple. N0, but it depends on how many page views you get, the number of resources that are within each page and the size of each resource. See, most CDNs charge on the following way:

  1. Cost of Request * the number of requests.
  2. Cost per GB * bandwidth
  3. In Amazon the origination of the request changes the price of the resource. See my CloudFront bill from last month below.

Here is my CloudFront bill for last month:

United States
$0.170 per GB – first 10 TB / month data transfer out (includes consumption tax) 0.404 GB 0.07
$0.010 per 10,000 GET Requests (includes consumption tax) 9,528 Requests 0.01
0.08
European Union
$0.170 per GB – first 10 TB / month data transfer out (includes consumption tax) 0.116 GB 0.02
$0.012 per 10,000 GET Requests (includes consumption tax) 10,793 Requests 0.01
0.03
Japan
$0.221 per GB – first 10 TB / month data transfer out (includes consumption tax) 0.010 GB 0.01
$0.013 per 10,000 GET Requests (includes consumption tax) 907 Requests 0.01
0.02
Hong Kong
$0.210 per GB – first 10 TB / month data transfer out (includes consumption tax 0.022 GB 0.01
$0.012 per 10,000 GET Requests (includes consumption tax 1,868 Requests 0.01
0.02
View Usage Report 0.15

This is just for my site which has been getting about 200+ visitors a day and about 3.5 page views for each visit.  15 cents for a month, not too bad and throw in the fact I got a $25 gift certificate for participating in Amazon’s Startup Challenge, I will able host my static resources using CloudFront for the next three years.

If you want to figure out how much hosting of your resources will cost using CloudFront, check out Amazon’s calculator.  Click here to calculate your price.

How easy will it be to get up to speed and use the technology effectively?

I was pleasantly surprised that getting up to speed with a CDN is fairly a straight forward process.  Upcoming a plug – You will need to find a tool that works well interacting with S3 and CloudFront – RockstarApps’ tools may be what you need. Behind the scheme of a CDN there are many complicated things going on to distribute resources, keep them fresh and making sure each resource is loaded from the closest server to the user.

What do you need to do?

Normally on a Website the static resources are loaded from the same server as the dynamic content.

<html>
<head>
<script src=”my.js”></script>
</head>
….

In the code above, the browser loads the Webpage from http://localhost, then the JavaScript file “my.js” will be loaded from the same server (http://localhost/my.js).  In order to utilize a CDN for the JavaScript, you will need to change the URL for the JavaScript file to be the location of the resource in the CDN.

<html>
<head>
<script src=”http://cdn.rockstarapps.com/js/my.js”></script>
</head>
….

Each resource that is deployed into the CDN will need its URL changed.  The exception to this are URL’s within a CSS file that is loaded from the CDN. This is because the resources are loaded relative to the CSS file.

Walk through of using Amazon’s CloudFront CDN:

Step one – sign up for a Amazon WebServices Account, click here to sign up.  You will be required to provide a credit card but everything is paid based on usage and there is no setup charge.

Step two – Sign up for both CloudFront and S3, you will need both of these services in order to host your resources. Amazon requires users to sign up for each service separately.

Step three – Create an S3 bucket – You will need to provide a globally unique name for the bucket, your best bet is to use your domain name as as prefix and a descriptor as a postfix. The images below shows the S3 buckets I have deployed into S3.  The Eclipse view is part of RockstarApps’ Amazon WS tools, click here to read more.

Step four – Upload your resources into the bucket. The S3 view below shows how the resources are organized.  S3 works very much a file system; the buckets being the drives and the resources are organized in directories and files.

Note: when resources are initially uploaded, their privilege is set so that they can’t be read by the public.  You will need to change their privilege to read only for everyone. If you don’t change the privilege you will get an access to denied error when loading the resource.

To test out the resources were uploaded properly, you can use a URL like the following. Substituting your bucket name and resource location. If you are using the RockstarApps tool select the resource and hit the Earth icon in the toolbar.  This will bring up an editor show the status of the resource from it various possible access URLs.

http://rockstarapps.com.joomla.s3.amazonaws.com/resources/templates/mocha/css/mocha.all.css

Step Five – Create a CloudFront Distribution. This is where you connect your resources in S3 to a CDN.  When the initial distribution is created it is given a unique but ugly name.

Step Six – Assign a CNAME to the CloudFront distribution, this will allow you to use a name similar to cdn.rockstarapps.com verse dtksrkctuzfa.cloudfront.net

  • Part A – Tell CloudFront what the domain name will be.  Using the RockstarApps tools you can do this from the “Create Distribution” dialog or by modifying the properties of the distribution after it is created.
  •  Part two – configure the CNAME entry in your domain settings.  I use GoDaddy for my host… What… they have a good product and great SuperBowl Commercials.
    Update 2.11.2009: My site is running really slow, unless it is fixed quickly, I will reverse my GoDaddy has a good product.

That’s it, the CNAME configuration is the last step. Once this is configured you will be able to load the resources using the configured sub domain, in my case it will be cdn.rockstarapps.com

How can using a CDN like CloudFront affect a sites performance?

A Websites performance gets worse the farther the user is away from the server.  This is why developers never seem to have performance problems when they are running the application from http://localhost. But when the site is rolled out into production people have a bad experience. This is due to the fact that server is in Texas and the user is in Germany and there is a great distance the bytes need to travel and through many devices.

Just looking ping timing of www.rockstarapps.com (90ms) vs. cdn.rockstarapps.com (18ms) that is a 80% reduction in just the ping time.

Combine this a tracerout for each domain www.rockstarapps.com has 19 hops vs. 11 hops for cdn.rockstarapps.com a 43% reduction in hops.

Add in a layer of resource optimization (Concatenation and Compression) and you will be able to deploy a highly optimal site that gets that “A” in YSlow!

Summary:

Amazon’s CloudFront isn’t the only CDN out there, you can checkout LimeLight and Akamai plus others. My effort so far has been around Amazon, but you can investigate the others.  The big boys have been using CDNs for a long time and finally it is simple and cheap enough for site like RockstarApps.com and most likely yours to start using these technologies for your own projects.

I know my site gets about half of its traffic from outside of the US which means that the use of the CDN really makes the site more user friendly.  Companies like Keynote can give you analytical assement of how your site is performing in various parts of the world. Keynote provides a tool called Kite that is good to get started testing out your Websites performance.

Bob (Buffone)
Optimizing the Web