Improving performance by changing the rules from fast to SPDY

Post on 05-Dec-2014

1137 Views

Category:

Technology

2 Downloads

Preview:

Click to see full reader

DESCRIPTION

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.

Transcript

From Fast to SPDY

Ido Safruti,

Mike Belshe,

SPDY

SPDYee

Agenda

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

rfc2616: HTTP/1.1

drafted:1998 released June 1999

What else was there in 1998

What else was there in 1998

What else was there in 1998

What else was there in 1998

What else was there in 1998

What else was there in 1998

What else was there in 1998

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

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/

Did They Plan for That!?

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

Compression

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

CompressionOptionalOnly for response body

~99% of browsers support

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

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

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

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

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

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

User-agent Cookies

HTTP Connection - under the hood

Client Server

HTTP Connection - under the hood

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

Client Server

HTTP Connection - under the hood

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

Client Server

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

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

}

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

}}

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

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

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

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

Security is optional

Enters 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

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

Deployment Status

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

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

CDNs/Service providers: Cotendo

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

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...

Results

Yahoo! Homepage, over broadband network

Yahoo! homepageHTTP

BroadbandRTT = 20ms

Page Load: 1.23sec

Yahoo! homepageSPDY (via Cotendo)

BroadbandRTT = 20ms

Page Load: 1.21sec

-2%

Amazon.com Homepage, over 3G network

Page Load: 12.50sec

Amazon.com HomepageHTTP

3G, AT&TRTT = 200+ms

Amazon.com HomepageSPDY(via Cotendo)

3G AT&TRTT = 200+ms

Page Load: 6.26sec

-49%

HTTPS vs SPDY (Production)

Increasing Parallelism

Less is More - Conns, Bytes, Packets

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

Can't We Address Latency & Security Separately?

Can't We Address Latency & Security Separately?

No.

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%

How we tune today

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

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!

Firetruck

Domain Sharding

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

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

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

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

Cons: reduced cache efficiency Complicated

New Class of FEO

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!

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

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

Lossy compression is the way to go!

Billy Hoffman / Zoompf

AP Photo/John Bazemore

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

Lossy-Compression is Not for Everything

Progressive image compression

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

Client Server

Client Server

Get HTML

Client Server

Client Server

Get all objects

20%

Client Server

20%20% 20%20%

Client Server

80% 80%80% 80%80%

Summary

SPDY actually delivers!

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

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

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

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!

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.

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?

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?

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

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

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!

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

Ido Safruti, ido@cotendo.com

Mike Belshe, mbelshe@google.com

top related