aws webcast - using amazon cloudfront-accelerate your static, dynamic, interactive content

© 2013 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified or distributed in whole or in part without the express consent of Amazon.com, Inc.

Using Amazon CloudFront to Accelerate Your

Static, Dynamic, and Interactive Content

Nihar Bihani, Senior Product Manager - Amazon CloudFront


Why Performance Matters?

• Performance translates to … • Higher Page Views

• Better Customer Experience

• Higher Conversion Rates



Great Amount Of Time and Money Spent Improving Back-

End Infrastructure Performance



80% of User’s Perceived Latency Comes From Front-End


How do we Improve Performance ?

A Typical Web Application Has …

• Static or Re-Usable Content

• High TTLs

• Low TTLs (Customized Content)

• Dynamic or Interactive Content

• Zero TTL


Static or Re-Usable Content

Can be cached (High TTLs or Low TTLs)


Typical Architecture


Dynamic or Interactive Content

Cannot be cached - BUT affects 100% of your viewers!


Why Not…?


Customers Say…

I don’t see the value - each request is unique and must go back to the origin web server.

AND/OR

I see the value, but my current CDN charges premium rates for dynamic content acceleration, with many additional fees.

AND/OR

Configuring a CDN for dynamic content acceleration requires expensive professional services and is not self-service.


How Can Amazon CloudFront Help?

TCP/IP optimizations

Keep-Alive Connections

SSL Offload

POST/PUT

Latency Based Routing

Low prices, same as static content delivery!


Unique or Re-Usable Contents?


STATIC or RE-USABLE

Content that does not change for a given period of time.

t0 t1


DYNAMIC OR INTERACTIVE

Content that changes as soon as it gets created.

t0 t1


Example


Example Index.jsp (Dynamic)

Images (static)


. Sec


Page Load Time?

. Sec


Improving Web Application Performance

Accelerating Static Content

Accelerating Dynamic Content


Understanding Waterfall Graph

DNS Lookup

TCP Connection

Time To First Byte

Content Download


Understanding Waterfall Graph

Index.jsp


Optimizing

Static Content


Optimizing Static Content

Index.jsp


Optimizing Static Content With Caching

• Can be distributed go more than one user

• State of the object doesn't change for: sec, min, hours,..

• Caching is a way to serve static content to more than one user


Caching

origin

edge

location

User Request A


Caching

origin

edge

location

Get Image

User Request A


Caching

origin

edge

location

Get Image

Get Image

User Request A


Caching

origin

edge

location

Get Image

Get Image

Image

User Request A


Caching

origin

edge

location

Get Image

Get Image

Image

Image

User Request A


Caching

origin

edge

location

User Request B

Get Image


Caching

origin

edge

location Get Image Image

User Request B



Brings content closer to your users



Improves the experience and performance



Offloads your infrastructure


Before Caching Static Content = 1.46sec


After Caching Static Content = 770ms


Are We Done?


NOT SO FAST


Waterfall Graph

Index.jsp


CACHE AS MUCH AS YOU CAN


How? I’m caching

all my images, CSS and JS


Steps To Find Cachable Content

1. Collect web (w3c) logs from your web-tier

2. Run a report on your logs (EMR, RDS or redshift)

3. Identify top N URLs


Report Example


Content With Query Strings

Re-usable?

110 /factor/create_image?name=book1&size=10x10


Content With Query Strings

• CloudFront Can Cache Content With Query Strings

• Every Unique Query-string Combination Is A New

Object In Cloudfront’s Cache


API Calls

Re-usable?

100 /api/GetBooks?category=math


API Calls

Re-usable?

80 /api/GetBooks?top=10


What If we Change our time unit?


Caching For Smaller Time Units

• Goal: Find content that can be cached for any given period of

time

• Hours

• Minutes

• Seconds

• CloudFront can cache content for any period of time


Caching For Smaller Time Units

• Imagine Your Have a Read Heavy API Gets Hit 100 Or 1000 RPS

• Offload Your Web-tier From Handling 1000 RPS

• Offload Your Load-balancer: ELB Or Any Other LB

• Provision Less Capacity and Reduce Cost

1000 /api/GetBooks?top=10


Base Page (first HTML page)

Re-usable?

220 /index.jsp


Optimizing

Dynamic Content


Waterfall Graph

Index.jsp


Can Dynamic Content Be Optimized?

Dynamic content is NOT cachable

Content proxied by CDN to the origin and

back



user

request

origin

edge

location

Poke

Poke

Ok

Ok

Poke Poke

user

request



That adds latency?

How to optimize dynamic content?


How To Optimize Dynamic Contents?

Index.jsp


How To Optimize Dynamic Content?

DNS Lookup

TCP Connection

Time To First Byte

Content Download


How To Optimize Dynamic Delivery?

How??

How??

How??

How

Without

Caching??

Route 53

CloudFront Keep-

Alive Connections

CloudFront TCP/IP

Optimization

CloudFront Keep-

Alive Connections


After Caching/Before CloudFront Dynamic

Acceleration = 770ms


How To Improve DNS Time?

DNS Lookup

Index.jsp


With Amazon Route 53

Amazon

Route 53


Optimizing DNS Response Time

Route 53 is AWS’s authoritative DNS service

Designed to be fast, easy-to-use, and cost-effective

Low Latency DNS Resolution

Global network of DNS servers

Queries routed to the nearest DNS server


How To Improve

TCP Connection and Time to First Byte?

TCP Connection

Index.jsp


With Amazon CloudFront



TCP/IP Bottlenecks

• Dynamic content is small in size

• HTTP runs on TCP/IP

• TCP penalizes small size requests


TCP Handshake

• SYN, SYN-ACK, ACK and then data flows

• Handshake delay depends on client <-> server

latency


TCP Handshake

SYN

SYN-ACK

ACK

Data

TC

P H

an

dsh

ake


Your Users Today Without CloudFront

• Users get connected to your infrastructure directly

• Every user is a new connection

• More users = More TCP connections

• Not leveraging keep-alive connections


Today Without CloudFront

Region


Without Keep Alive Connections

• Puts load on your web-servers: Memory/CPU


Without Keep Alive Connections

• Load on your web-server increases the

Time to First Byte


• Help you avoid additional connections

• Fewer handshakes

• Improve TCP connection time



CloudFront Keep-Alive Connections

• Users get connected to CloudFront

• CloudFront opens keep-alive connection back to your web-tier

• CloudFront keeps the connection open

• Next request uses the existing keep-alive connection(s)


CloudFront Keep-Alive Connections

• More users More TCP connections

• Improve response time due to fewer TCP hand

shakes

• Offload your web-tier’s CPU/Memory


Region

Keep-Alive


Test CPU Util. %

Without CloudFront 20%

With CloudFront 6%


How To Improve Content Download Time?

Content Download

Index.jsp



TCP/IP Slow Start Optimization


TCP Slow Start

• Need to control the amount of data exchanged between two hosts

• Slow-start to avoid overwhelming the Internet


• CloudFront optimize slow-start

• Slow start impacts new connections, not the existing

ones

• CloudFront uses existing connections users can skip

slow-start

Slow Start Optimization With CloudFront


How To Optimize My SSL Connections?

Index.jsp



SSL Termination


SSL Optimization With CloudFront

• CloudFront has the ability to support SSL traffic

• Use a CloudFront cert or bring your own

• SSL traffic gets terminated at the closest CloudFront edge

location


SSL Optimization Patterns With CloudFront

Two Optimization Patterns:

1. Half Bridge SSL termination

2. Full Bridge SSL termination


Half Bridge SSL termination

Client Gets Connected To CloudFront

HTTPs


Half Bridge SSL termination

CloudFront Connects to Origin Via HTTP

HTTPs HTTP



Region

HTTP


Half Bridge SSL Termination Benefits

• Encrypted channel between user and CloudFront

• Termination of SSL closer to the user

HTTPs HTTP



• Better performance by leveraging HTTP connections to origin

• Origin offload by terminating SSL at CloudFront

HTTP



• Taking advantage of CloudFront keep-alive connections

• All TCP/IP optimizations apply

Keep

Alive


Full Bridge SSL Termination

Client Gets Connected To CloudFront Via HTTPs

HTTPs


Full Bridge SSL Termination

CloudFront Connects to Origin Via HTTPs

HTTPs HTTPs



Region

HTTPs


Full Bridge SSL Termination Benefits

• End-to-end encrypted channel

• Termination of SSL closer to the user

HTTPs HTTPS



• Taking advantage of CloudFront keep-alive connections

• All TCP/IP optimizations apply

Keep

Alive


How To Optimize PUT/POST?

Index.jsp



PUT/POST Verb Optimization


PUT/POST Optimization With CloudFront

• CloudFront supports upload verbs: PUT, POST,

DELETE, OPTIONS, PATCH

• Data won’t get cached

• CloudFront proxies data to origin



• Dynamic content optimizations apply:

• Keep-alive connections

• TCP slow start optimization

• Close proximity connection termination



Optimizing form POSTs

Optimizing AJAX POST requests

Optimizing content upload

• Uploading to S3


After CloudFront Dynamic Content

Optimization = 555ms


. Sec


How To Improve Content Download Time

Even More?

Content Download

Index.jsp


With Amazon Route53

Latency Based Routing


Latency Based Routing (LBR)

Run multiple stacks of your application in

different EC2 regions around the world

Create LBR records using the Route 53 API

or Console

• Tag each destination end-point to the EC2

region that it’s in

• End-points can either be EC2 instances,

Elastic IPs or ELBs

111


Latency Based Routing (LBR)

Route 53 will route end users to the

end-point that provides the lowest

latency

112


LBR Benefits

Better performance than running in a single region

Improved reliability relative to running in a single region

Easier implementation than traditional DNS solutions

Much lower prices than traditional DNS solutions

113


CloudFront And Route53

Use CloudFront for dynamic content acceleration

Host your origin at multiple AWS locations (or

datacenters)

• US

• Europe


CloudFront And Route53

Create DNS records in Route53 for each location

Let Route 53 do the magic


Route 53 Latency Based Routing

Route 53 measures the latency between CloudFront and

all configured origins

R53 resolves origin’s hostname to the closest location

Reduce content download time

Content Download

Index.jsp


Lower Latency With CloudFront and Route53


To Summarize…

• Cache Everything You Can – Static and Re-Usable Content

• CloudFront can help speed-up your Dynamic Content, including

uploads

• SSL Termination at the edge helps offload origin infrastructure

• Route 53 Latency Based Routing to improve performance further

• CloudFront is easy-to-use and pricing for Static and Dynamic

content is the SAME!


Customer Story: Low TTLs


Customer Story: Query Strings


Customer Story: Cookies


Customer Story: POST/PUT

“We are excited to use CloudFront's new POST,

PUT, PATCH, and DELETE capabilities to

accelerate our RESTful APIs on Amazon EC2. With

these new HTTP methods we can now take

advantage of CloudFront’s global footprint and

optimized connections back to our origin servers in

AWS. Routing our customers’ API requests via a

CloudFront edge location near them will help

improve their experience by minimizing packet loss

and upload latency. This will help provide a

streamlined experience for our customers.”

- Ilan Rabinovitch, Tech Lead, Site Reliability Engineering


Customer Story: Custom SSL


AWS re:Invent (November 12-15, 2013)

ARC309 Dynamic Content Acceleration - Lightning Fast

Web Apps with Amazon CloudFront and Amazon Route53

MED305 On-demand and Live Streaming with Amazon

CloudFront in the Post-PC World

SVC203 Cache is King – Scale Your Application while

Improving Performance and Lowering Costs

aws webcast - using amazon cloudfront-accelerate your static, dynamic, interactive content

Technology

express consent of ama

dynamic content acceleration

static content delivery

performance matters

dynamicimages static

reusable contents

amazon cloudfront help

page load time