Improve Page Load Time with Amazon CloudFront

Faster site → happier users

Faster site → more site usage

Faster site → lower hardware cost

Faster site → better google ranking

Polyvore is a image-heavy site

7000 images served per second (peak)240M images served per day40TB images served per month

Polyvore is a global site

Global user baseAt the speed of light, round trip from Europe to California takes more than 100 msOur images load slowly for international users.

CDN: Geologically distributed caches

We can't speed up light.

But we can shorten the distance.

User connects to the nearest server (the edge server)

Lower latencyFaster downloadMore reliable connection

More servers serving data

Increases bandwidth by eliminating central server bottleneck.

Amazon CloudFront

Amazon's CDN offeringSelf-served, no sales peoplePay as you goAPINo contract

Setup CloudFront

Set up an origin server

An origin server stores the definite version of your objects.Could be an Amazon S3 bucket or your own web server

Create a distribution

A distribution specifies the location of your origin server.A distribution has a unique CloudFront domain name, e.g. d2zdxp93p38w2g.cloudfront.net

Create a distributionIn the AWS managing console:

Serve objects under the distribution domain

http://d2zdxp93p38w2g.cloudfront.net/images/logo.jpg

→ www.polyvore.com/images/logo.jpg

Use CNAMEsOptional, but recommendedSet it up in the distribution and your DNS

Why use CNAMEs

No more cumbersome CloudFront domain

More flexibility to change CDN provider

Cache controlObjects expire in 24 hours by default.Set your own cache control headers to override the default. e.g.

Expires: Mon, 12 Apr 2021 00:26:56 GMT Cache-Control: max-age=31536000

Minimum expiration time you can set is one hour.

Object invalidationRemoves an object from cache before it expires.Useful when updating an object.Call the InvalidationBatch function in the API

Reporting tools

Amazon doesn't provide much.

Download access logs and roll your own analysis.

Does it really help?

Compare performance

Single image file download time:156 ms vs 478 ms

Measured by Pingdom, through their global server network.

Compare performance

Page load time improvements:

Compare performance

Slower in some countries, mostly countries with low traffic.

Overall 11% improvement in page load time.

How we measure itUse Javascript to measure page load time and beacon it back

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

Should I use CloudFront?

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.

What determines hit rate?

Access pattern to your objects1 object accessed 10M times → good10M objects accessed 1 time each → bad

How much space is allocated on edge serversObject eviction: when edge servers are short on space, objects may get removed before they expire.Amazon doesn't share specific stats about eviction.

So what's our hit rate?Amazon doesn't provide this stats. We determined it's around 85% by analyzing CloudFront's access logs and our own.

Bonus material Akamai vs CloudFront

Akamai: bigger, faster, and cheaper?

More edge servers.Competitive price

Akamai performance test

Twice as fast in single file testLive traffic test non-conclusiveWorking with Akamai to diagnoseWe'll post updates

Questions & follow-ups

hujn@polyvore.com