Demystifying SPDY and HTTP/2

A talk given at Fluent 2015 - jkle.in/http2

Transcript

1. Demystifying SPDY and HTTP/2 Jonathan Klein @jonathanklein April 21, 2015
2. Slides, Links jkle.in/http2
3. H/2 == HTTP/2
4. Figures from this book
5. About Me @jonathanklein jkle.in/http2
6. About Me !Formerly a performance engineer at Etsy @jonathanklein jkle.in/http2
7. About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group @jonathanklein jkle.in/http2
8. About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group !Former CTO at a pre-product startup in Boston @jonathanklein jkle.in/http2
9. About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group !Former CTO at a pre-product startup in Boston !Planned on launching with HTTPS everywhere and H/2 support @jonathanklein jkle.in/http2
11. SPDY Experimental protocol developed at Google
12. SPDY Experimental protocol developed at Google H/2 Official second major version of HTTP, based on SPDY
13. SPDY’s Future, H/2 Status @jonathanklein jkle.in/http2
14. SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFCs @jonathanklein jkle.in/http2
15. SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFCs !Chrome removing SPDY support in 2016 @jonathanklein jkle.in/http2
21. TCP/IP Network Model
22. TCP/IP Network Model
23. TCP/IP Network Model
24. TCP Three Way Handshake Time From HPBN
25. TCP Three Way Handshake Time From HPBN
28. 2,696 miles one way
29. 2,696 miles one way Speed of Light = 186,000 miles / sec
30. 2,696 miles one way Speed of Light = 186,000 miles / sec Assumed RTT = 28ms
31. Actual RTT ~ 75ms
33. From HPBN
34. Congestion Collapse “This condition is stable. Once the saturation point has been reached, if the algorithm for selecting packets to be dropped is fair, the network will continue to operate in a degraded condition.” - RFC 896 @jonathanklein jkle.in/http2
36. From HPBN
40. 6 connections
41. HTTP Head-of-line Blocking A single slow response blocks all requests behind it.
43. TCP/IP Network Model
44. From HPBN HTTP Head-of-line Blocking
45. What About HTTP Pipelining? “…if the web browser is the primary delivery vehicle for your web application, then we can’t count on HTTP pipelining to help with performance.” - High Performance Browser Networking @jonathanklein jkle.in/http2
46. 6 connections
48. Workarounds and Downsides @jonathanklein jkle.in/http2
49. Workarounds and Downsides !Multiple TCP Connections @jonathanklein jkle.in/http2
50. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization @jonathanklein jkle.in/http2
51. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition @jonathanklein jkle.in/http2
52. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding @jonathanklein jkle.in/http2
53. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) @jonathanklein jkle.in/http2
54. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) ! Implementation complexity @jonathanklein jkle.in/http2
55. H/2 Multiplexing
56. H/2 Multiplexing @jonathanklein jkle.in/http2 From HPBN
57. H/2 Multiplexing !Interleave multiple requests/responses on the same connection @jonathanklein jkle.in/http2 From HPBN
58. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/http2 From HPBN
59. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/http2 From HPBN
60. Forget about… @jonathanklein jkle.in/http2
61. Forget about… !Combining CSS and JS files @jonathanklein jkle.in/http2
62. Forget about… !Combining CSS and JS files !Inlining small CSS/JS @jonathanklein jkle.in/http2
63. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites @jonathanklein jkle.in/http2
64. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs @jonathanklein jkle.in/http2
65. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/http2
66. What About HTTP Headers?
67. Request Headers GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2
68. Response Headers HTTP/1.1 200 OK Server: Apache Vary: Accept-Encoding Last-Modified: Thu, 02 Aug 2012 22:41:31 GMT Accept-Ranges: bytes Content-Encoding: gzip Content-Length: 33622 Content-Type: application/javascript Cache-Control: max-age=2236992 Expires: Thu, 30 Apr 2015 17:21:11 GMT Date: Sat, 04 Apr 2015 19:57:59 GMT Connection: keep-alive @jonathanklein jkle.in/http2
69. Request Headers GET /en/assets/1/eventprovider/1/lazyload_min_v3.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2
70. Request Headers GET /en/assets/1/eventprovider/1/lazyload_min_v3.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2
71. From HPBN HPACK
72. Why HPACK and not zlib? !CRIME attack ! zlib + encryption = session hijacking !HPACK: New, header specific compression algorithm @jonathanklein jkle.in/http2
73. requests https://www.mnot.net/talks/http2-expectations/#/tsv
74. Request Prioritization and Server Push
75. Server Push @jonathanklein jkle.in/http2
76. Server Push !Resources can be… @jonathanklein jkle.in/http2
77. Server Push !Resources can be… ! Cached by client @jonathanklein jkle.in/http2
78. Server Push !Resources can be… ! Cached by client ! Declined by client @jonathanklein jkle.in/http2
79. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed @jonathanklein jkle.in/http2
80. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server @jonathanklein jkle.in/http2
81. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server !Must obey same-origin policy @jonathanklein jkle.in/http2
83. Data From Google @jonathanklein jkle.in/http2 time from first request byte to the onload event
85. H/1
86. H/2
87. Key Stats @jonathanklein jkle.in/http2 H/1 H/2 Difference Bytes 387KB 387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
88. What About HTTPS? Not required by spec, but Firefox and Chrome will require it
89. istlsfastyet.com
90. Criticism
91. Criticism @jonathanklein jkle.in/http2
92. Criticism “It was rushed, we wanted more” @jonathanklein jkle.in/http2
93. Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years @jonathanklein jkle.in/http2
94. Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years “Why does it require TLS?” @jonathanklein jkle.in/http2
95. Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years “Why does it require TLS?” - The spec doesn’t, some browsers do @jonathanklein jkle.in/http2
97. Implementation
98. Webservers @jonathanklein jkle.in/http2 https://istlsfastyet.com/
99. CDN Support @jonathanklein jkle.in/http2 https://istlsfastyet.com/
100. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/http2 Okay to Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
102. Wrapping Up @jonathanklein jkle.in/http2
103. Wrapping Up !H/2 is here @jonathanklein jkle.in/http2
104. Wrapping Up !H/2 is here !H/2 is fast @jonathanklein jkle.in/http2
105. Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported @jonathanklein jkle.in/http2
106. Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported … go implement it! @jonathanklein jkle.in/http2
107. Thanks! http://jkle.in/http2 @jonathanklein @jonathanklein jkle.in/http2