Eric Winter

eric@webicus.com

webicus internet services

Using Amazon CloudFront for Improved Site Response Time

MotivationIntroduction to Amazon CloudFront

Basic architecture How it works/how its used

Operations – interacting with CloudFrontToolsDemoProgram using CloudFront

Results

Overview

The Jonas Brothers made me do it….

Content management web siteHigh number of (static) assets/pageGeographically diverse users (but domestic

only)Download time generally slow, with high

varianceConclusion: Give it a try

Motivation

Why Improves site response timeEasy to useReduces response time variation Cheap as dirtReliableEspecially worthwhile if you have

heavy contenta weak servera geographically diverse audience

Why notYet another level of cachingSome implementation/maintenance costs

Overview

MotivationIntroduction to Amazon CloudFront

Basic architecture How it works/how its used

Operations – interacting with CloudFrontToolsDemoProgram using CloudFront

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.”

Introduction to Amazon CloudFront

CloudFront is a CDN (content distribution network)

Tightly integrated with S3CloudFront is not S3

S3 is designed to easily store data e.g. offsite backupS3 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 latencySFO, VA, NYC, Ireland, Hong Kong

Pull modelContent pulled to edge upon first requestContent 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 bucketI 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 CloudFrontFor 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

MotivationIntroduction to Amazon CloudFront

Basic architecture How it works/how its used

Operations – interacting with CloudFrontToolsDemoProgram using CloudFront

Results

Overview

Firefox (plugins)S3FoxFirebugPagespeedYslow

Asset referencesMigration tools

Tools for CloudFront

Move content to S3Create a distributionReference via CloudFront URL

Demo

Ideally simple API to interact with CDNSeamlessly switch between local content and

CDNEnvironment sensitive

Would like to develop with local assetsWould like to test with local and CDN

(CloudFront) assetsMay want multiple CNAMEs

static1.example.comstatic2.example.comEtc.

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 S3S3Fox – very useful for quickly moving content

to S3/CloudfrontAPI/rails gems/capistrano – more stable way of

migrating content.To CloudFront

CloudFront != S3 (sometimes)CloudFront expires in 24hrs by defaultCloudFront 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

After1.5-2.5 seconds (as measured by pingdom.com)

Example Site – 3.5 x faster