A Complete Guide On Using Amazon S3 As a Content Delivery Network For Your Website

Over the past couple of weeks, I have been tweaking this blog’s design template for faster loading. From my experiments, I can certainly conclude one thing – Images, CSS, JavaScript and other static components can have a large impact on the overall loading time of your website.

Let’s quickly take an example:

 

From the screenshot on the right, you can see how the images used in various portions of this site takes a really good amount of time to download on the clients end. If you write a tutorial blog which involves a lot of step by step screenshots and media elements, rest assured images are one of the main culprits which is slowing down the loading time of your entire site.

Since you don’t have any control on the loading time of widgets, Facebook social plugins and other external elements, you should optimize images for faster loading and host the images and other static files of your blog on a content delivery network.

Regardless of whether you are on a shared hosting plan or have a VPS server, if you are not serving the static components from a really fast server, these images and static files will take ages to load on a slow connection. And since all these static components are called from each and every page, your entire site might respond slow when there is a rush of traffic or your web hosting service is facing server side issues.

Using Amazon Simple Storage Service as A Content Delivery Network – A Comparison

A few days back I moved all the images and core files of this site to Amazon S3 storage service. I chose Amazon S3 storage service over other hosting providers just to test whether using Amazon S3 as a content delivery network really improves the loading time in that sense. After comparing Amazon S3 with other hosting providers, I can confidently say that my decision was correct. The popularity of this low cost content delivery network is proved by the growth of Amazon S3 over these years.

Here is the load time comparison chart for some files that are used in my site’s design.

load-time-comparisions-amazons3-shared-server

This tutorial will walk you through all the steps required to host images of a website on Amazon S3 server and how you can use Amazon simple storage service as a content delivery network for your blog.

Things You Will Need

Before you go ahead, make sure you have all the following things ready at hand.

1. While signing up, Amazon won’t charge you any money but you will need to provide your credit card number on the sign up page. This is because Amazon would store this detail on your account and you will be automatically billed, depending upon how much bandwidth you use at the end of billing cycle.

2. Download all the files of your blog which you want to host on your Amazon S3 account. If you are using a content management system like WordPress, download all the images, CSS, JS and other scripts that are used in the design template or your theme. Note that there is no need to download all the core php files of your theme. These files should be on the server where your blog is hosted.

3. Install the Amazon S3 add-on for Firefox

Setting Up Your Amazon S3 Content Delivery Network

1. Once you have signed up for your Amazon S3 account and it is active, go to the AWS control panel and sign in with your account.

2. Everything in Amazon S3 works in “Buckets”. A “Bucket” is nothing but a container for storing your files, you can create as many buckets as required; there are no limitations as such.

create-bucket

3. To create your bucket, right click on the left pane and choose “Create Bucket”. Choose a very unique name like cdn.yourdomain.com and not something like “My Bucket”. This is because when your bucket is ready, you will need to use the URL of the bucket on the source of your site’s design, so choosing something that is associated with your domain is a plus point.

choosing-bucket-name

4.  For the region, select the location that is closest to the location from where your site receives maximum traffic. Then hit the “Create” button, you can always set up logging for Amazon S3 at a later time.

5. Now that your bucket is ready, you can upload files using the web uploader or use the Firefox add-on to upload images in bulk from the desktop.

6. Launch Firefox, go to Tools and select “S3 organizer”. You will be asked to enter your Amazon S3 access key and secret which can be found here.

7. After entering your account’s access key and secret, you will see the following interface

s3-bucket-firefox

8. Now you have to upload all the files from your computer to your Amazon S3 bucket. Simply drag the files and folders from your computer and drop it on the right pane, S3 for Firefox works just like any other FTP client like Filezilla.

set-up-cname-record-amazons3Note: You can not use desktop FTP clients like Filezilla or CuteFTP to connect to your Amazon S3 account.

9. While the files are uploading, open the Cpanel of your web hosting account and create a new CNAME record. If you can’t find the option to create a CNAME record, look for something as “simple DNS zone editor” or “MX entry”.

Enter the name as cdn.domain.com and set the value as cdn.domain.com.s3.amazonaws.com

Why this is done? The short answer is that you won’t have to remember or use the long URL of your Amazon S3 bucket. Instead, you can use the sweet customized and short version of the long Amazon S3 URL. As an example, if you upload a style.css to your Amazon S3 account’s bucket, it will have a URL as yourbucket.s3.amazonaws.com/style.css

Setting up this CNAME record will allow you to use yourbucket.yourdomain.com/style.css, which maps directly to the Amazon S3 address of your bucket.

10. If you don’t want search engines to crawl all the files that’s stored on your Amazon S3 bucket, create a simple text file and drop the following code:

User-agent:*
Disallow: /

Save this text file as Robots.txt and upload it to the root of your Amazon S3 bucket.

 

11. Once all the files have been uploaded, right click on the root directory (bucket) and select  “Edit ACL”. Then give “read” permissions to “Everyone” including authenticated users and remember to select the “Apply to subfolders” option. Then click “Ok”

editacl-amazons3-bucket

Important: It is important to set the ACL for all files and folders stored on your Amazon S3 account. By default, all files are private in nature so you have to change the ACL visibility to public so that any browser can render the file on the clients computer. If you forget to choose the ACL level, the files won’t be accessible at all from the browser. The same goes for any file or folder you upload in future, remember to edit it’s ACL properties and set the visibility to “Public” everyone.

Compare The Load Time Of A File Stored On Amazon S3 With A File Stored On your web Server

Now that you have successfully configured your Amazon S3 account, it would be a good idea to compare the load time of a sample file from different geographic locations.

To do this, go to Loads.in and test the load time of a file stored at your Amazon S3 account. Also test the load time of a copy of the same file that is stored on your web hosting account. In 99% of the cases, you will find that the file stored at Amazon S3 is loading way faster.

Amazon S3 Pricing

The only catch here is that the service is not entirely free and you have to pay a monthly amount, which depends how much bandwidth is used by the different files that are hosted on your Amazon S3 account.

There is no minimum fee, you pay for only what you use. You can either use Amazon S3 billing calculator to determine your monthly costs, or refer to the following pricing table:

First 1 TB /month $ 0.146 per GB
Next 49 TB /month $ 0k.125 per GB
Next 450 TB/month $ 0.110 per GB
Next 500 TB /month $ 0.095 per GB
Next 4000 TB /month $0. 080 per GB
Over 5000 Tb /month $0.055 per GB

* 1TB= 1000 GB

How much bandwidth will you consume in a month depends on how much traffic your websites has. In my case, the fee will be less than $1 a month, since I am hosting only the static files of this site’s theme on my Amazon S3 account. It would be better if you check the overall bandwidth usage of your site from Awstats logs found under the Cpanel of your web hosting account.

I checked the stats and found that the total bandwidth consumed by all images across the subdomain is 7 GB a month. Note that I am not hosting the individual images used in blog posts on Amazon S3 because a lot of scraper sites have hotlinked images of this blog earlier.

Now the important question is: how reliable Amazon S3 is and does it suffers downtimes frequently? The short answer is that Amazon S3 is highly reliable, affordable and trusted for their high quality service.

To give you a hint, Dropbox, Tumblr and Posterous store all the user files and images on Amazon S3 servers.

 

Don't miss the Free Book

101 websites for getting things done - an informative book which will make you more productive and efficient. Subscribe to get it for free.