Top Banner
From Fast to SPDY Ido Safruti, Mike Belshe,
93

Improving performance by changing the rules from fast to SPDY

Dec 05, 2014

Download

Technology

Cotendo

SPDY was proposed by Google back in November 2009 to reduce the latency and load time of web pages. It was provided as part of the Chromium open-source project and is enabled in Chrome by default.

We at Cotendo took on the challenge, implemented the server side, and extended our proxies to support SPDY, providing SPDY to HTTP “translation”. Guess what? It really speeds things up. But like all new good things, there is still work to do. We will share insights from our implementation, optimization of SSL-based traffic and present performance data both from Google’s and our customers’ deployment.
What’s next?

We believe the introduction of SPDY as a new application layer presents a unique opportunity to rethink web design concepts and front-end-optimization (FEO) techniques. We will discuss some optimizations we developed and suggest some guidelines on how you can approach these new types of optimizations.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Improving performance by changing the rules   from fast to SPDY

From Fast to SPDY

Ido Safruti,

Mike Belshe,

Page 2: Improving performance by changing the rules   from fast to SPDY

SPDY

Page 3: Improving performance by changing the rules   from fast to SPDY

SPDYee

Page 4: Improving performance by changing the rules   from fast to SPDY

Agenda

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

Page 5: Improving performance by changing the rules   from fast to SPDY

rfc2616: HTTP/1.1

drafted:1998 released June 1999

Page 6: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 7: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 8: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 9: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 10: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 11: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

Page 12: Improving performance by changing the rules   from fast to SPDY

What else was there in 1998

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

Page 13: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Did They Plan for That!?

Page 15: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Compression

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

Page 17: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

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

User-agent Cookies

Page 23: Improving performance by changing the rules   from fast to SPDY

HTTP Connection - under the hood

Client Server

Page 24: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

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

Security is optional

Page 33: Improving performance by changing the rules   from fast to SPDY

Enters SPDY!

Page 34: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Deployment Status

Page 37: Improving performance by changing the rules   from fast to SPDY

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

Page 38: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Results

Page 42: Improving performance by changing the rules   from fast to SPDY

Yahoo! Homepage, over broadband network

Page 43: Improving performance by changing the rules   from fast to SPDY

Yahoo! homepageHTTP

BroadbandRTT = 20ms

Page Load: 1.23sec

Page 44: Improving performance by changing the rules   from fast to SPDY

Yahoo! homepageSPDY (via Cotendo)

BroadbandRTT = 20ms

Page Load: 1.21sec

-2%

Page 45: Improving performance by changing the rules   from fast to SPDY

Amazon.com Homepage, over 3G network

Page 46: Improving performance by changing the rules   from fast to SPDY

Page Load: 12.50sec

Amazon.com HomepageHTTP

3G, AT&TRTT = 200+ms

Page 47: Improving performance by changing the rules   from fast to SPDY

Amazon.com HomepageSPDY(via Cotendo)

3G AT&TRTT = 200+ms

Page Load: 6.26sec

-49%

Page 48: Improving performance by changing the rules   from fast to SPDY

HTTPS vs SPDY (Production)

Page 49: Improving performance by changing the rules   from fast to SPDY

Increasing Parallelism

Page 50: Improving performance by changing the rules   from fast to SPDY

Less is More - Conns, Bytes, Packets

Page 51: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Can't We Address Latency & Security Separately?

Page 53: Improving performance by changing the rules   from fast to SPDY

Can't We Address Latency & Security Separately?

No.

Page 54: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

How we tune today

Page 56: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Firetruck

Page 59: Improving performance by changing the rules   from fast to SPDY

Domain Sharding

Page 60: Improving performance by changing the rules   from fast to SPDY

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

Page 61: Improving performance by changing the rules   from fast to SPDY

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

Page 62: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

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

Cons: reduced cache efficiency Complicated

Page 64: Improving performance by changing the rules   from fast to SPDY

New Class of FEO

Page 65: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   from fast to SPDY

Lossy compression is the way to go!

Billy Hoffman / Zoompf

AP Photo/John Bazemore

Page 69: Improving performance by changing the rules   from fast to SPDY

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

Lossy-Compression is Not for Everything

Page 70: Improving performance by changing the rules   from fast to SPDY

Progressive image compression

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

Page 71: Improving performance by changing the rules   from fast to SPDY

Client Server

Page 72: Improving performance by changing the rules   from fast to SPDY

Client Server

Get HTML

Page 73: Improving performance by changing the rules   from fast to SPDY

Client Server

Page 74: Improving performance by changing the rules   from fast to SPDY

Client Server

Get all objects

Page 75: Improving performance by changing the rules   from fast to SPDY

20%

Client Server

20%20% 20%20%

Page 76: Improving performance by changing the rules   from fast to SPDY

Client Server

80% 80%80% 80%80%

Page 77: Improving performance by changing the rules   from fast to SPDY
Page 78: Improving performance by changing the rules   from fast to SPDY
Page 79: Improving performance by changing the rules   from fast to SPDY

Summary

Page 80: Improving performance by changing the rules   from fast to SPDY
Page 81: Improving performance by changing the rules   from fast to SPDY

SPDY actually delivers!

Page 82: Improving performance by changing the rules   from fast to SPDY

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

Page 83: Improving performance by changing the rules   from fast to SPDY

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

Page 84: Improving performance by changing the rules   from fast to SPDY

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

Page 85: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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: Improving performance by changing the rules   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