0
Eric Winter<br />eric@webicus.com<br />webicus internet services<br />Using Amazon CloudFront for Improved Site Response T...
Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations ...
The Jonas Brothers made me do it….<br />Content management web site<br />High number of (static) assets/page<br />Geograph...
Why<br />Improves site response time<br />Easy to use<br />Reduces response time variation <br />Cheap as dirt<br />Reliab...
Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations ...
“Amazon CloudFront is a web service for content delivery. It integrates with other Amazon Web Services to give developers ...
CloudFront is a CDN (content distribution network)<br />Tightly integrated with S3<br />CloudFront is not S3<br />S3 is de...
CloudFront moves your S3 content to the ‘edge’ geographically closer to your end user thereby reducing latency<br />SFO, V...
Heavy static content served by CloudFront edge server<br />Missing or expired content pulled from S3 <br />Content served ...
Original files go into an Amazon S3 bucket<br />I recommend naming the bucket something obvious like site.com and have it’...
Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations ...
Firefox (plugins)<br />S3Fox<br />Firebug<br />Pagespeed<br />Yslow<br />Asset references<br />Migration tools<br />Tools ...
Move content to S3<br />Create a distribution<br />Reference via CloudFront URL<br />Demo	<br />
Ideally simple API to interact with CDN<br />Seamlessly switch between local content and CDN<br />Environment sensitive<br...
CdnHelper – Helper Class <br />Private members<br />private $useLocal = FALSE;<br />    private $numHostsMin = 0;<br />   ...
To S3<br />S3Fox – very useful for quickly moving content to S3/Cloudfront<br />API/rails gems/capistrano – more stable wa...
Relatively high traffic site (8k unique visitors, 18k pageviews/week)<br />Dynamic PHP financial sector, mainly financial ...
Upcoming SlideShare
Loading in...5
×

Using Amazon CloudFront for Improved Response Time

4,133

Published on

A how to tutorial view of an Amazon CloudFront implementation on a medium sized website. The result post-implementation exceeded expectations.

Touches on CloudFront architecture, what tools were used and customized tools used to make using CloudFront easier in a PHP CMS website.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,133
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Using Amazon CloudFront for Improved Response Time"

  1. 1. Eric Winter<br />eric@webicus.com<br />webicus internet services<br />Using Amazon CloudFront for Improved Site Response Time<br />
  2. 2. Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations – interacting with CloudFront<br />Tools<br />Demo<br />Program using CloudFront<br />Results<br />Overview<br />
  3. 3. The Jonas Brothers made me do it….<br />Content management web site<br />High number of (static) assets/page<br />Geographically diverse users (but domestic only)<br />Download time generally slow, with high variance<br />Conclusion: Give it a try<br />Motivation <br />
  4. 4. Why<br />Improves site response time<br />Easy to use<br />Reduces response time variation <br />Cheap as dirt<br />Reliable<br />Especially worthwhile if you have<br />heavy content<br />a weak server<br />a geographically diverse audience<br />Why not<br />Yet another level of caching<br />Some implementation/maintenance costs<br />Overview<br />
  5. 5. Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations – interacting with CloudFront<br />Tools<br />Demo<br />Program using CloudFront<br />Results<br />Overview<br />
  6. 6. “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.”<br />Introduction to Amazon CloudFront<br />
  7. 7. CloudFront is a CDN (content distribution network)<br />Tightly integrated with S3<br />CloudFront is not S3<br />S3 is designed to easily store data <br />e.g. offsite backup<br />S3 is the backend/system of record for CloudFront<br />CloudFront is designed specifically to improve static content delivery <br />e.g. serving your home page images, css files, etc.<br />Serving large files<br />Initial thoughts on CloudFront<br />
  8. 8. CloudFront moves your S3 content to the ‘edge’ geographically closer to your end user thereby reducing latency<br />SFO, VA, NYC, Ireland, Hong Kong<br />Pull model<br />Content pulled to edge upon first request<br />Content expires in 24hrs (default)<br />Edge server not aware of origin server content changes.<br />Content is Closer to User<br />
  9. 9. Heavy static content served by CloudFront edge server<br />Missing or expired content pulled from S3 <br />Content served to disparate users<br />
  10. 10. Original files go into an Amazon S3 bucket<br />I recommend naming the bucket something obvious like site.com and have it’s structure track your site’s directory structure. <br />Create a “distribution” to register that bucket with Amazon CloudFront<br />For simplicity structure the bucket w/ the same ACL <br />Your static files are now available on CloudFront via the distribution’s domain name. <br />Create a CloudFront Distribution<br />
  11. 11. Motivation<br />Introduction to Amazon CloudFront<br />Basic architecture <br />How it works/how its used<br />Operations – interacting with CloudFront<br />Tools<br />Demo<br />Program using CloudFront<br />Results<br />Overview<br />
  12. 12. Firefox (plugins)<br />S3Fox<br />Firebug<br />Pagespeed<br />Yslow<br />Asset references<br />Migration tools<br />Tools for CloudFront<br />
  13. 13. Move content to S3<br />Create a distribution<br />Reference via CloudFront URL<br />Demo <br />
  14. 14. Ideally simple API to interact with CDN<br />Seamlessly switch between local content and CDN<br />Environment sensitive<br />Would like to develop with local assets<br />Would like to test with local and CDN (CloudFront) assets<br />May want multiple CNAMEs<br />static1.example.com<br />static2.example.com<br />Etc.<br />Using CloudFront in an App<br />
  15. 15. CdnHelper – Helper Class <br />Private members<br />private $useLocal = FALSE;<br /> private $numHostsMin = 0;<br /> private $numHostsMax = 3;<br /> private $sslHost = 'static%d.site.com';<br /> private $imgDir = 'images';<br /> private $jsDir = 'jscript';<br /> private $resourceDir = 'resources';<br /> private $cssDir = 'style';<br /> private $assetDir = NULL;<br /> private $forceTimestamp = TRUE;<br />public methods<br />Constructor (singleton)<br />ENV and CDN_FORCE<br />Each returns an URL<br />setUseLocal($bool);<br />image($assets, $options = array()) ;<br />js($assets, $inline = true) ;<br />css($assets) ;<br />resource($assets) ;<br />Usage:<br />$cdn= new CdnHelper;<br />$cdn->css(“style.css”);<br />
  16. 16. To S3<br />S3Fox – very useful for quickly moving content to S3/Cloudfront<br />API/rails gems/capistrano – more stable way of migrating content.<br />To CloudFront<br />CloudFront != S3 (sometimes)<br />CloudFront expires in 24hrs by default<br />CloudFront does not check S3 if asset is present on CF.<br />Create new files and deprecate old ones<br />Migrating New Content<br />
  17. 17. Relatively high traffic site (8k unique visitors, 18k pageviews/week)<br />Dynamic PHP financial sector, mainly financial charts <br />Page weight: 440k, 48 requests (lots of small images)<br />Verio managed server<br />Before <br />6-8 seconds for typical page<br />After<br />1.5-2.5 seconds (as measured by pingdom.com)<br />Example Site – 3.5 x faster<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×