Using Amazon CloudFront for Improved Response Time

Eric Winter
eric@webicus.com
webicus internet services
Using Amazon CloudFront for Improved Site Response Time

Motivation
Introduction to Amazon CloudFront
Basic architecture
How it works/how its used
Operations – interacting with CloudFront
Tools
Demo
Program using CloudFront
Results
Overview

The Jonas Brothers made me do it….
Content management web site
High number of (static) assets/page
Geographically diverse users (but domestic only)
Download time generally slow, with high variance
Conclusion: Give it a try
Motivation

Why
Improves site response time
Easy to use
Reduces response time variation
Cheap as dirt
Reliable
Especially worthwhile if you have
heavy content
a weak server
a geographically diverse audience
Why not
Yet another level of caching
Some implementation/maintenance costs
Overview

Motivation
Basic architecture
Tools
Demo
Results
Overview

“Amazon CloudFront is a web service for content delivery. It integrates with other Amazon Web Services to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no commitments.”

CloudFront is a CDN (content distribution network)
Tightly integrated with S3
CloudFront is not S3
S3 is designed to easily store data
e.g. offsite backup
S3 is the backend/system of record for CloudFront
CloudFront is designed specifically to improve static content delivery
e.g. serving your home page images, css files, etc.
Serving large files
Initial thoughts on CloudFront

CloudFront moves your S3 content to the ‘edge’ geographically closer to your end user thereby reducing latency
SFO, VA, NYC, Ireland, Hong Kong
Pull model
Content pulled to edge upon first request
Content expires in 24hrs (default)
Edge server not aware of origin server content changes.
Content is Closer to User

Heavy static content served by CloudFront edge server
Missing or expired content pulled from S3
Content served to disparate users

Original files go into an Amazon S3 bucket
I recommend naming the bucket something obvious like site.com and have it’s structure track your site’s directory structure.
Create a “distribution” to register that bucket with Amazon CloudFront
For simplicity structure the bucket w/ the same ACL
Your static files are now available on CloudFront via the distribution’s domain name.
Create a CloudFront Distribution

Motivation
Basic architecture
Tools
Demo
Results
Overview

Firefox (plugins)
S3Fox
Firebug
Pagespeed
Yslow
Asset references
Migration tools
Tools for CloudFront

Move content to S3
Create a distribution
Reference via CloudFront URL
Demo

Ideally simple API to interact with CDN
Seamlessly switch between local content and CDN
Environment sensitive
Would like to develop with local assets
Would like to test with local and CDN (CloudFront) assets
May want multiple CNAMEs
static1.example.com
static2.example.com
Etc.
Using CloudFront in an App

CdnHelper – Helper Class
Private members
private $useLocal = FALSE;
private $numHostsMin = 0;
private $numHostsMax = 3;
private $sslHost = 'static%d.site.com';
private $imgDir = 'images';
private $jsDir = 'jscript';
private $resourceDir = 'resources';
private $cssDir = 'style';
private $assetDir = NULL;
private $forceTimestamp = TRUE;
public methods
Constructor (singleton)
ENV and CDN_FORCE
Each returns an URL
setUseLocal($bool);
image($assets, $options = array()) ;
js($assets, $inline = true) ;
css($assets) ;
resource($assets) ;
Usage:
$cdn= new CdnHelper;
$cdn->css(“style.css”);

To S3
S3Fox – very useful for quickly moving content to S3/Cloudfront
API/rails gems/capistrano – more stable way of migrating content.
To CloudFront
CloudFront != S3 (sometimes)
CloudFront expires in 24hrs by default
CloudFront does not check S3 if asset is present on CF.
Create new files and deprecate old ones
Migrating New Content

Relatively high traffic site (8k unique visitors, 18k pageviews/week)
Dynamic PHP financial sector, mainly financial charts
Page weight: 440k, 48 requests (lots of small images)
Verio managed server
Before
6-8 seconds for typical page
After
1.5-2.5 seconds (as measured by pingdom.com)
Example Site – 3.5 x faster

Using Amazon CloudFront for Improved Response Time

by ehwinter on Sep 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

Using Amazon CloudFront for Improved Response Time — Presentation Transcript