Improve Page Render Time with Amazon Cloudfront


Published on

Amazon's CloudFront provides a self-served CDN solution without a
contract. In this talk we will walk through the steps to set up
CloudFront. We will also talk about how we measure page render time
and take a look at how using CloudFront affects page render time for
Polyvore in different countries.

Slides from Polyvore Tech Talk #1

Published in: Technology
  • Be the first to comment

Improve Page Render Time with Amazon Cloudfront

  1. 1. Improve Page Load Time with Amazon CloudFront
  2. 2. Faster site → happier users
  3. 3. Faster site → more site usage
  4. 4. Faster site → lower hardware cost
  5. 5. Faster site → better google ranking
  6. 6. Polyvore is a image-heavy site 7000 images served per second (peak) 240M images served per day 40TB images served per month
  7. 7. Polyvore is a global site Global user base At the speed of light, round trip from Europe to California takes more than 100 ms Our images load slowly for international users.
  8. 8. CDN: Geologically distributed caches We cant speed up light. But we can shorten the distance.
  9. 9. User connects to the nearest server (the edge server) Lower latency Faster download More reliable connection
  10. 10. More servers serving dataIncreases bandwidth by eliminatingcentral server bottleneck.
  11. 11. Amazon CloudFront Amazons CDN offering Self-served, no sales people Pay as you go API No contract
  12. 12. Setup CloudFront
  13. 13. Set up an origin serverAn origin server stores thedefinite version of your objects.Could be an Amazon S3 bucketor your own web server
  14. 14. Create a distributionA distribution specifies the location ofyour origin server.A distribution has a unique CloudFrontdomain name, e.g.
  15. 15. Create a distributionIn the AWS managing console:
  16. 16. Serve objects under the distribution domain→
  17. 17. Use CNAMEsOptional, but recommendedSet it up in the distribution and your DNS
  18. 18. Why use CNAMEsNo more cumbersome CloudFront domainMore flexibility to change CDN provider
  19. 19. Cache controlObjects expire in 24 hours by default.Set your own cache control headers to overridethe default. e.g. Expires: Mon, 12 Apr 2021 00:26:56 GMT Cache-Control: max-age=31536000Minimum expiration time you can set is onehour.
  20. 20. Object invalidationRemoves an object from cache before itexpires.Useful when updating an object.Call the InvalidationBatch function in theAPI
  21. 21. Reporting toolsAmazon doesnt provide much.Download access logs and roll your ownanalysis.
  22. 22. Does it really help?
  23. 23. Compare performanceSingle image file download time:156 ms vs 478 msMeasured by Pingdom, through theirglobal server network.
  24. 24. Compare performancePage load time improvements:
  25. 25. Compare performanceSlower in some countries, mostly countrieswith low traffic.Overall 11% improvement in page load time.
  26. 26. How we measure itUse Javascript to measure page load time and beacon itback At the top of each page(function() { // record page start time var start = new Date().getTime(); window.onload = function() { // record page load time var _end = new Date().getTime(); // fetch the beacon and pass in (_end - _start) ... });};})(); Process our access log to gather the beaconed data. External resource files may throw the number off
  27. 27. Should I use CloudFront?
  28. 28. Cache hit rate dictates CDN performance A missing object needs to be retrieved from the origin server before it can be served, and it is more expensive than serving it from the origin server directly.
  29. 29. What determines hit rate? Access pattern to your objects 1 object accessed 10M times → good 10M objects accessed 1 time each → bad How much space is allocated on edge servers Object eviction: when edge servers are short on space, objects may get removed before they expire. Amazon doesnt share specific stats about eviction.
  30. 30. So whats our hit rate?Amazon doesnt provide this stats.We determined its around 85% byanalyzing CloudFronts access logsand our own.
  31. 31. Bonus materialAkamai vs CloudFront
  32. 32. Akamai: bigger, faster, and cheaper? More edge servers. Competitive price
  33. 33. Akamai performance testTwice as fast in single file testLive traffic test non-conclusiveWorking with Akamai to diagnoseWell post updates
  34. 34. Questions & follow-ups