You Ain't SPDY

You package your assets. You use CSS sprites. You serve up everything with gzip compression. You obsess over Yslow recommendations. But you are still not SPDY.

Fundamental limitations in HTTP and TCP/IP still add up to 60% overhead to your site. Find out how to reclaim that lost bandwidth and increase the robustness of your sites at the same time.

Transcript

1. You Ain't SPDY Chris Strom (@eee_c) GoGaRuCo 2011-09-16
4. @spdybook @backbonerecipes w/ Nick Gauthier
6. SPDY is a replacement for HTTP
7. SPDY is backwards compatible with HTTP
8. SPDY still does HTTP-like things
9. SPDY is optimized for page load times
10. A Tale of Two Websites by httparchive.org
20. 38% of broadband users will close a site if it doesn't respond in 4 seconds
21. 38% of broadband users will close a site if it doesn't respond in 4 seconds (precision is the key to any good statistic)
22. = $$$
25. That's freaking crazy
26. Site #2...
31. took 4.2 seconds to load 469kB of data over 75 requests
32. took 4.2 seconds to load 469kB of data over 75 requests took ??? seconds to load 806kB of data over 83 requests
33. took 4.2 seconds to load 469kB of data over 75 requests took ??? seconds to load 806kB of data over 83 requests Average: 816kB of data over 83 requests
34. How does Amazon do it?
47. But wait! There's more...
62. Got all that?
63. HTTP Optimizations
64. !HTTP Optimizations
65. !HTTP Optimizations HTTP Workarounds
66. HTTP is antiquated
67. HTTP is antiquated HTTP has not been updated in 12 years
68. HTTP is antiquated HTTP has not been updated in 12 years HTTP is old
69. HTTP is antiquated HTTP has not been updated in 12 years HTTP is old HTTP is so old...
77. SPDY!
78. SPDY! It offers no new ideas!
79. +
80. Bandwidth Will Save US!
81. Bandwidth Will Save US! (won't it?)
82. Bandwidth Doesn't Matter
83. Bandwidth Doesn't Matter Beyond ~3mpbs, it make no difference on page load.
84. Bandwidth is for Downloading Ubuntu (not the Ubuntu download page)
85. SPDY is About Page Load Time It has other benefits, but its main goal is to decrease page load time
86. The Internet is built of tubes...
87. Data travels One Way thru HTTP Tubes (kinda like a stargate)
88. HTTP Tubes in Action
90. Problem Solved
91. Problem Solved ?
92. Brrr..! Connections Need to be Warmed thermometer indicating cold temperature
93. Warm Connections == Higher Bandwidth
100. Why Not Start the Tubes Warm? • Large congestion window (CWND) • CWND is initially 3 • 6 connections => we already have 18 initial CWND
101. Why Not Start the Tubes Warm? • Large congestion window (CWND) • CWND is initially 3 • 6 connections => we already have 18 initial CWND • Already subverting TCP/IP • Is subverting further a good idea? • Especially given data loss rates that we already see?
102. SPDY Tube...!
103. SPDY Conversations...!
104. SPDY • Built on SSL • Binary • Don't send redundant header information • Aggressively compress stuff • Use a single(!) tube ◦ Only pay the warm-up penalty once ◦ Just like downloading an Ubuntu ISO!!!
105. SPDY • SYN_STREAM • SYN_REPLY • RST_STREAM • SETTINGS • HEADERS • PING • GOAWAY • WINDOW_UPDATE • DATA
106. Current State of SPDY in Ruby In a word....
107. Current State of SPDY in Ruby In a word.... Ugh.
108. • An openssl-generated server key • The SPDY Gem • Edge-openssl for NPN (Next Protocol Negotiation) • Carson McDonald's NPN enabled fork of eventmachine* (in the tls-npn branch) — pull request #196 * https://github.com/carsonmcdonald/eventmachine
114. https://github.com/igrigorik/spdy/issues/2
115. If browsers had a single connection...
116. Closer to Real Browser Connections
117. Packaging/Compressing Responses
118. SPDY Server Push
119. SPDY Server Push Pushes data directly into the browser cache
120. Client Request (SYN_STREAM) +----------------------------------+ 80 02 00 01 |1| Version | 1 | +----------------------------------+ 02 00 00 38 | Flags (8) | Length (24 bits) | +----------------------------------+ 00 00 00 01 |X| Stream-ID (31bits) | +----------------------------------+ 00 00 00 00 |X|Associated-To-Stream-ID (31bits)| +----------------------------------+ 00 00 62 60 | Pri | Unused | | +------------------ | 64 60 06 05 | Name/value header block | 81 42 46 49 | ... | 49 41 b1 95 ....
121. Server Response (SYN_REPLY) +----------------------------------+ 80 02 00 02 |1| Version | 2 | +----------------------------------+ 00 00 00 a4 | Flags (8) | Length (24 bits) | +----------------------------------+ 00 00 00 01 |X| Stream-ID (31bits) | +----------------------------------+ 00 00 78 bb | Unused | | df a2 51 b2 +---------------- | 62 e0 64 e0 | Name/value header block | 42 c4 10 03 | ... | 57 76 6a 6a
122. Server Push (SYN_STREAM) +----------------------------------+ 80 02 00 01 |1| Version | 1 | +----------------------------------+ 02 00 00 51 | Flags (8) | Length (24 bits) | +----------------------------------+ 00 00 00 02 |X| Stream-ID (31bits) | +----------------------------------+ 00 00 00 01 |X|Associated-To-Stream-ID (31bits)| +----------------------------------+ 00 00 62 60 | Pri | Unused | | +------------------ | | Name/value header block | 23 c2 37 cc | ... | a0 40 52 c8 28 29 29 28
123. SPDY Server Push
124. SPDY Server Push
125. SPDY Server Push
126. SPDY Server Push
127. SPDY Server Push
128. Server Push #2 (SYN_STREAM) +----------------------------------+ 80 02 00 01 |1| Version | 1 | +----------------------------------+ 02 00 01 5b | Flags (8) | Length (24 bits) | +----------------------------------+ 00 00 00 04 |X| Stream-ID (31bits) | +----------------------------------+ 00 00 00 01 |X|Associated-To-Stream-ID (31bits)| +----------------------------------+ 00 00 62 60 | Pri | Unused | | +------------------ | | Name/value header block | 23 c2 37 cc | ... | a0 40 52 c8 28 29 29 28
129. SPDY Server Push
130. SPDY Server Push
131. SPDY Server Push
132. SPDY Server Push
133. SPDY Server Push
142. took 11.4 seconds to load 806kB of data over 83 requests
143. Thanks! Chris Strom (@eee_c) spdybook.com Coupon: gogaruco2011 (free!) Coming soon! Recipes with Backbone(.js) recipeswithbackbone.com