Lower your Amazon S3 Bill and also Improve Website Loading Time

This is a money-saving tip for web publishers who use Amazon S3 for hosting images and other static content like CSS, JavaScript files, etc.

Since Amazon S3 is a "pay as you use" storage service, your S3 bill is always directly proportional to the bandwidth that your sites consume.

How Browsers Interact with Amazon S3

When a visitor comes to your site the first time, the static images are downloaded from Amazon S3 servers and get saved inside his browser's cache.

Now if that same person visits your site again sometime in future, his browser will make another GET request to Amazon S3 asking for a fresh copy of the web images.

Since the images stored on Amazon S3 haven't changed since his last visit, Amazon servers will return a 304 Not Modified header response indicating that there's no need to download images again.

So far so good. That 304 response prevented the visitor's browser from downloading the same data again (thus saving you money) but there's another problem – Amazon S3 also charges you for every GET request so each time a browser asks Amazon if images have changed since last visit, that question itself adds to your bill even if the answer is "no".

How to Reduce Your Amazon S3 Bill

While the cost for GET requests is small (just 1¢ per 10,000 requests), they can quickly add-up if you have have a popular site or if your website design uses too many images. For instance, every page on http://atoz-networking.blogspot.com/ has about 25 static images served from S3.

To control this cost, you need a mechanism that will prevent browsers from sending the GET request if the file already exists in their cache. This can be easily done by setting appropriate Cache-Control and Expires headers at the time of uploading the files on to Amazon S3.

Cache-Control is like instructing the browser whether to make any requests to Amazon S3 or not before a given period. So if you set Cache-Control max-age=864000 for your S3 images, the web browsers will not request that file from S3 storage until the next 10 days (3600*24*10 sec).

Other than saving money, your site will also load relatively faster because the visitor's browser will reuse images, logos and other static files from the cache without making any new request to Amazon S3.

BitRhymes, developers of the popular Sketch Me app for MySpace, saw their Amazon S3 billdip by 40% after they implemented cached headers for images.

Implement Caching for Amazon S3 Files

To set the appropriate Cache-Control headers for files hosted on Amazon S3, you can either use the Bucket Explorer client (cost $50) or upload files manually via this PHP scriptwritten by Lalit Patel who is also the inspiration behind this article.

If you are worried about setting Cache headers for JavaScript and CSS files as they may change frequently (especially when you are in the midst of a site re-design), Lalit shares a very simple workaround – just append a version number after the file name like main.js?v=2&tag=labnol-20.

Before: <link href="http://files.labnol.org/main.css?v=2" ../>

After:  <link href="http://files.labnol.org/main.css?v=3" ../>

Change the version from 2 to 3 and visitors browser will make a fresh GET request to Amazon S3 for the latest version of the S3 file.

[Tutorial] Host Your Website on Amazon S3

Most web hosting companies charge you a fixed monthly fee and in return, they offer you a finite amount of storage space for hosting your web pages, images and other files.

It doesn’t really matter if you are hosting a simple website with 10 pages or a comprehensive product catalogue with thousands of pages – the amount you pay for hosting will be the same.

There’s also a limit on the amount of traffic (bandwidth quota) that your site can receive in a month. If you exceed that limit, the hosting provider is likely to suspend your site or you’ll be asked to upgrade to a different plan. On the other side, if your site receives only minimal traffic, you’ll still have to pay for the full bandwidth.

Amazon S3 vs Regular Web Hosting

Unlike web hosting companies, Amazon S3 follows a ‘pay for what you use’ model where you only have to pay for the exact amount of storage and bandwidth that your website is consuming in a month.

There’s another advantage - the Amazon S3 SLA guarantees a monthly uptime of at least 99.9% which, I doubt, is offered by any of the traditional web hosting companies.

And thanks to some recent enhancements, hosting your website on Amazon S3 is almost as easy as uploading your files to an FTP server. The only limitation is that Amazon S3 can only be used for hosting HTML websites and not dynamic sites like WordPress blogs.

How to host websites with Amazon S3

Step 1: Assuming that you already an Amazon.com account, log in to your Amazon S3 console. You may also use desktop-based S3 clients but to keep things simple, we’ll use the web client in this tutorial.

Step 2: Create a bucket here and give it a name which is the same as your website. For instance, if you are planning to host your website mybeautifulfamily.com with Amazon, create an S3 bucket with same name.

Step 3: Select the new bucket and click the Upload button to upload all the web pages, images, CSS and other static files from your desktop to your Amazon S3 bucket. Click ‘Set Permissions,’ select ‘Make Everything Public’ and start the upload process.

Step 4: Now that your files have been uploaded, right-click the bucket name and choose Properties. Switch to the Websites tab, enable the websites feature and set your index.html file as the index document. Save the changes.

That’s it. Here's a recap of all the above steps in the form of a video screencast:










Map Amazon S3 to your own Web Domain

There’s one last step. Your website is now hosted on Amazon S3 but it has a confusing web address (akaEndpoint) which looks something like this:

mybeautifulfamily.com.s3-website-us-east-1.amazonaws.com

Since we want people to find our site at mybeautifulfamily.com and not through the above address, we need to map the Amazon bucket address to our sweet web domain.

That’s also simple – log in to your domain hosting service and create a new CNAME Record for your domain. Set the value of this CNAME record as the Endpoint provided by Amazon S3 and save your changes. The DNS changes might take a while to propagate across the web and once that happens, your new site can be accessed from anywhere.

The Cost of Hosting Websites with Amazon S3

According to some rough calculations, if you have a 20-page website that takes about 10 MB of storage space and your site gets 200 visitors per day, the monthly hosting bill with Amazon S3 should be around $5 per month.

Not exactly cheap but the site’s uptime will be close to 100% and it won’t crash even if you make it to the front page of CNN.com.

Also see: "How to Lower your Amazon S3 Bill"