From Fast To SPDY

93
From Fast to SPDY Ido Safruti, Mike Belshe,

description

This talk was given with Ido Safruti of Cotendo on June 15, 2011 in Santa Clara. Ido did most of the work.

Transcript of From Fast To SPDY

Page 1: From Fast To SPDY

From Fast to SPDY

Ido Safruti,

Mike Belshe,

Page 2: From Fast To SPDY

SPDY

Page 3: From Fast To SPDY

SPDYee

Page 4: From Fast To SPDY

Agenda

Challenges of HTTP/1.1 SPDY Some data, and results How we tune today What’s next

Page 5: From Fast To SPDY

rfc2616: HTTP/1.1

drafted:1998 released June 1999

Page 6: From Fast To SPDY

What else was there in 1998

Page 7: From Fast To SPDY

What else was there in 1998

Page 8: From Fast To SPDY

What else was there in 1998

Page 9: From Fast To SPDY

What else was there in 1998

Page 10: From Fast To SPDY

What else was there in 1998

Page 11: From Fast To SPDY

What else was there in 1998

Page 12: From Fast To SPDY

What else was there in 1998

http://web.archive.org/web/19980425182703/http://geocities.com/

Page 13: From Fast To SPDY

What else was there in 1998

4/25/1998no external scripts or css files20 images, ~65KB entire page

http://web.archive.org/web/19980425182703/http://geocities.com/

Page 14: From Fast To SPDY

Did They Plan for That!?

Page 15: From Fast To SPDY

HTTP/1.1 Compression Headers Poor connection management Only one request can be done at a time (Half duplex) Particularly important on high latency links (mobile) short lived connections

security - optional

Page 16: From Fast To SPDY

Compression

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 17: From Fast To SPDY

CompressionOptionalOnly for response body

~99% of browsers support

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 18: From Fast To SPDY

CompressionOptionalOnly for response body

~99% of browsers support Particularly important on small pipes (mobile)

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 19: From Fast To SPDY

CompressionOptionalOnly for response body

~99% of browsers support Particularly important on small pipes (mobile)

15%-30% of responses not compressed for no good reason!*

for SSL even worse

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 20: From Fast To SPDY

CompressionOptionalOnly for response body

~99% of browsers support Particularly important on small pipes (mobile)

15%-30% of responses not compressed for no good reason!*

for SSL even worse no request compression

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 21: From Fast To SPDY

CompressionOptionalOnly for response body

~99% of browsers support Particularly important on small pipes (mobile)

15%-30% of responses not compressed for no good reason!*

for SSL even worse no request compressionno header compression

* http://code.google.com/speed/articles/web-metrics.html + Cotendo measurements

Page 22: From Fast To SPDY

Headers Redundant Repeat on EVERY request/response Can’t compress

User-agent Cookies

Page 23: From Fast To SPDY

HTTP Connection - under the hood

Client Server

Page 24: From Fast To SPDY

HTTP Connection - under the hood

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

Page 25: From Fast To SPDY

HTTP Connection - under the hood

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

Page 26: From Fast To SPDY

HTTP Connection - under the hood

Request/Response = 0.5 RTT

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

Page 27: From Fast To SPDY

HTTP Connection - under the hood

Request/Response = 0.5 RTT

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

}

Page 28: From Fast To SPDY

HTTP Connection - under the hood

Request/Response = 0.5 RTT

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

}}

Page 29: From Fast To SPDY

HTTP Connection - under the hood

Request/Response = 0.5 RTT

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Client Server

}}

Spun additional connections

Page 30: From Fast To SPDY

HTTP Connection - under the hood

Request/Response = 0.5 RTT

TCP Connect + Request = 1.5 RTTTCP Connect + SSL Connect + Request = 3.5 RTT

Slow Start - 30KB ~ 4 RTT (vs. 1 RTT warm)

Client Server

Spun additional connections

Page 31: From Fast To SPDY

Global

US

Mobile - US

Mobile - EU

BW Mbps

1.9

5.1

1.1

~2

User Data: average bandwidth

Source: State of the Internet, Q4 2010http://www.akamai.com/stateoftheinternet/

User Data: average RTT

Broadband

Coast-to-Coast

3G device-GW

RTT ms

30

100

80-200

“Lost” Capacity on each RTT

US Broadband: 63.7KBUS Mobile: 27.5KBAverage obj size 8.1KBSource: HTTP Archive, 6/1/2011 data for Top 1,000http://httparchive.org

Page 32: From Fast To SPDY

http://desktopsecuritysoftwareguide.com/wp-content/uploads/2010/04/Padlock.jpg

Security is optional

Page 33: From Fast To SPDY

Enters SPDY!

Page 34: From Fast To SPDY

Requirements Avoid requiring the website author to change content

Allow for incremental changesPerforming "better" with content changes is okayPerforming "worse" without content changes is unacceptable

Perform always better, never worse than HTTP

Drop-in replacement from webapp's point of view Changing the web server/application server is inevitable and therefore

acceptable

Page 35: From Fast To SPDY

What is SPDY? Goal: Reduce Web Page Load time.

Multiplexing Better utilize client connections

Compression HTTP headers are excessive Uplink bandwidth is limited

Prioritization Today the browser holds back Priorities enable multiplexing

Encrypted & Authenticated Eavesdropping at the Cafe must be stopped

Server Push Websites do some of this today with data URLs

Page 36: From Fast To SPDY

Deployment Status

Page 37: From Fast To SPDY

Deployment Status Google Enabled for all Google SSL traffic On by default since Chrome 6

Page 38: From Fast To SPDY

Deployment Status Google Enabled for all Google SSL traffic On by default since Chrome 6

CDNs/Service providers: Cotendo

Page 39: From Fast To SPDY

Deployment Status Google Enabled for all Google SSL traffic On by default since Chrome 6

CDNs/Service providers: Cotendo

Server implementations: Strangeloop SPDY Proxy available Others: C++, Python, Ruby, Go

Page 40: From Fast To SPDY

Deployment Status Google Enabled for all Google SSL traffic On by default since Chrome 6

CDNs/Service providers: Cotendo

Server implementations: Strangeloop SPDY Proxy available Others: C++, Python, Ruby, Go

Client implementation Chrome Android coming...

Page 41: From Fast To SPDY

Results

Page 42: From Fast To SPDY

Yahoo! Homepage, over broadband network

Page 43: From Fast To SPDY

Yahoo! homepageHTTP

BroadbandRTT = 20ms

Page Load: 1.23sec

Page 44: From Fast To SPDY

Yahoo! homepageSPDY (via Cotendo)

BroadbandRTT = 20ms

Page Load: 1.21sec

-2%

Page 45: From Fast To SPDY

Amazon.com Homepage, over 3G network

Page 46: From Fast To SPDY

Page Load: 12.50sec

Amazon.com HomepageHTTP

3G, AT&TRTT = 200+ms

Page 47: From Fast To SPDY

Amazon.com HomepageSPDY(via Cotendo)

3G AT&TRTT = 200+ms

Page Load: 6.26sec

-49%

Page 48: From Fast To SPDY

HTTPS vs SPDY (Production)

Page 49: From Fast To SPDY

Increasing Parallelism

Page 50: From Fast To SPDY

Less is More - Conns, Bytes, Packets

Page 51: From Fast To SPDY

Not Too Shabby WebSockets docs.google.com has a "hanging get" for every doc open

how to scale beyond 6 connections per domain? docs[1-N].google.com

gets expensive, complicated, and is horribly inefficient

SPDY is easy, works great, efficient

Header compression mitigates the inefficiency of a hanging GET

Page 52: From Fast To SPDY

Can't We Address Latency & Security Separately?

Page 53: From Fast To SPDY

Can't We Address Latency & Security Separately?

No.

Page 54: From Fast To SPDY

Can't We Address Latency & Security Separately? If eavesdropping in the cafe is still possible in 2020 with trivial tools, we have

failed our users.

Security is not just for banks! Social/Mail/Content is a major target example: Comodo attack

Firesheep tools make sniffing easy

Major content providers want privacy Facebook opt-in Twitter opt-in Google working toward 100%

Page 55: From Fast To SPDY

How we tune today

Page 56: From Fast To SPDY

High Performance Web Sites1.Make fewer HTTP requests2.Use CDN

3.Add expires header

4.Gzip Components

5.Put stylesheets at the top

6.Put scripts at the bottom

7.Avoid CSS expressions

8.Make JS and CSS external

9.Reduce DNS lookups

10.Minify JS

11.Avoid redirects

12.Remove duplicate scripts

13.Configure Etags

14.Make Ajax cacheable

15.Sharding domains

Page 57: From Fast To SPDY

High Performance Web Sites1.Make fewer HTTP requests2.Use CDN

3.Add expires header

4.Gzip Components5.Put stylesheets at the top6.Put scripts at the bottom7.Avoid CSS expressions

8.Make JS and CSS external

9.Reduce DNS lookups10.Minify JS11.Avoid redirects

12.Remove duplicate scripts

13.Configure Etags

14.Make Ajax cacheable

15.Sharding domains

Due To HTTP Limitations!

Page 58: From Fast To SPDY

Firetruck

Page 59: From Fast To SPDY

Domain Sharding

Page 60: From Fast To SPDY

Domain Sharding Pros: Parallelism in HTTP Cookieless domains for static content

Page 61: From Fast To SPDY

Domain Sharding Pros: Parallelism in HTTP Cookieless domains for static content

Page 62: From Fast To SPDY

Domain Sharding Pros: Parallelism in HTTP Cookieless domains for static content

Cons: DNS time Connection establishment overhead TCP slowstart / warmup SSL

maintaining many connections user cache Prevents browser optimizations

Page 63: From Fast To SPDY

Reduce number of requests Inlining Spriting Data URLs Combining javascripts and CSS files

Cons: reduced cache efficiency Complicated

Page 64: From Fast To SPDY

New Class of FEO

Page 65: From Fast To SPDY

Rethink your optimizations

As rules change, your need to re-evaluate your best practices 13 years is a long time! start at the beginning...

But also presents many new opportunities Delivery priorities Smart Push Simple web code Automate!

Page 66: From Fast To SPDY

Image Compression

HTML6.5

Scripts13.0

Stylesheets3.5

Images55.0

Other7.0 HTML

32

Scripts119

Stylesheets25

Images415

Other99

Number of Requests Transfer Size in KB

Source: http://httparchive.org/trends.php?s=Top1000

Page 67: From Fast To SPDY

In mobile even stronger!

HTML42

Scripts80

Stilesheets20

Images228

Other6

HTML4

Scripts7

Stilesheets2

Images31

Other2

Number of Requests Transfer Size in KB

Source: http://mobile.httparchive.org/trends.php?s=Top1000

Page 68: From Fast To SPDY

Lossy compression is the way to go!

Billy Hoffman / Zoompf

AP Photo/John Bazemore

Page 69: From Fast To SPDY

http://www.flickr.com/photos/tracy_olson/61056391/

Lossy-Compression is Not for Everything

Page 70: From Fast To SPDY

Progressive image compression

http://images.sixrevisions.com/2010/12/01-02_baseline_vs_progressive.jpg

Page 71: From Fast To SPDY

Client Server

Page 72: From Fast To SPDY

Client Server

Get HTML

Page 73: From Fast To SPDY

Client Server

Page 74: From Fast To SPDY

Client Server

Get all objects

Page 75: From Fast To SPDY

20%

Client Server

20%20% 20%20%

Page 76: From Fast To SPDY

Client Server

80% 80%80% 80%80%

Page 77: From Fast To SPDY
Page 78: From Fast To SPDY
Page 79: From Fast To SPDY

Summary

Page 80: From Fast To SPDY
Page 81: From Fast To SPDY

SPDY actually delivers!

Page 82: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases

Page 83: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Page 84: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Page 85: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible!

Page 86: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed.

Page 87: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed. What’s next?

Page 88: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed. What’s next?

Page 89: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed. What’s next?

Opens the door to implement new class of optimizations

Page 90: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed. What’s next?

Opens the door to implement new class of optimizations

Page 91: From Fast To SPDY

SPDY actually delivers! but we are still in the early phases participate and be part of the solution

Rules CAN be broken. Changes are possible! HTTP is built into the internet architecture, it can’t be changed. What’s next?

Opens the door to implement new class of optimizations

Get engaged NOW!

Page 92: From Fast To SPDY

Measurement - Proving us Right No 3rd party tools (yet)!

Chrome developer tools not good for large scale data...

w3c Web Performance tools - Navigation Timing Supported on IE9, and Chrome 11+ http://w3c-test.org/webperf/specs/NavigationTiming/

Site metrics: Google Analytics