Demystifying SPDY and HTTP/2

A talk given at Velocity Amsterdam 2015 - jkle.in/amsterdam

Transcript

1. Demystifying SPDY and HTTP/2 Jonathan Klein @jonathanklein October 29th, 2015
2. Slides, Links jkle.in/amsterdam
3. H/2 == HTTP/2
4. Figures from this book
5. About Me @jonathanklein jkle.in/amsterdam
6. About Me !Director of Engineering at Attend @jonathanklein jkle.in/amsterdam
7. About Me !Director of Engineering at Attend !Formerly a performance engineer at Etsy @jonathanklein jkle.in/amsterdam
8. About Me !Director of Engineering at Attend !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group @jonathanklein jkle.in/amsterdam
10. SPDY Experimental protocol developed at Google
11. SPDY Experimental protocol developed at Google H/2 Official second major version of HTTP, based on SPDY
12. SPDY’s Future, H/2 Status @jonathanklein jkle.in/amsterdam
13. SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFC @jonathanklein jkle.in/amsterdam
14. SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFC !Chrome removing SPDY support in 2016 @jonathanklein jkle.in/amsterdam
22. TCP/IP Network Model
23. TCP/IP Network Model
24. TCP/IP Network Model
25. TCP Three Way Handshake Time From HPBN
26. TCP Three Way Handshake Time From HPBN
29. 5,555 km one way
30. 5,555 km one way Speed of Light = 300,000 km / sec
31. 5,555 km one way Speed of Light = 300,000 km / sec Assumed RTT = 37ms
32. Actual RTT ~ 76ms
34. From HPBN
35. 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/amsterdam
37. From HPBN
41. 6 connections
42. HTTP Head-of-line Blocking A single slow response blocks all requests behind it.
44. TCP/IP Network Model
45. From HPBN HTTP Head-of-line Blocking
46. 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/amsterdam
47. 6 connections
49. Workarounds and Downsides @jonathanklein jkle.in/amsterdam
50. Workarounds and Downsides !Multiple TCP Connections @jonathanklein jkle.in/amsterdam
51. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization @jonathanklein jkle.in/amsterdam
52. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition @jonathanklein jkle.in/amsterdam
53. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding @jonathanklein jkle.in/amsterdam
54. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) @jonathanklein jkle.in/amsterdam
55. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) ! Implementation complexity @jonathanklein jkle.in/amsterdam
56. H/2 Multiplexing
57. H/2 Multiplexing @jonathanklein jkle.in/amsterdam From HPBN
58. H/2 Multiplexing !Interleave multiple requests/responses on the same connection @jonathanklein jkle.in/amsterdam From HPBN
59. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
60. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
61. Forget about… @jonathanklein jkle.in/amsterdam
62. Forget about… !Combining CSS and JS files @jonathanklein jkle.in/amsterdam
63. Forget about… !Combining CSS and JS files !Inlining small CSS/JS @jonathanklein jkle.in/amsterdam
64. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites @jonathanklein jkle.in/amsterdam
65. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs @jonathanklein jkle.in/amsterdam
66. Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/amsterdam
67. What About HTTP Headers?
68. 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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam
69. 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/amsterdam
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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam
71. 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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam
72. From HPBN HPACK
73. Why HPACK and not zlib? !CRIME attack ! zlib + encryption = session hijacking !HPACK: New, header specific compression algorithm @jonathanklein jkle.in/amsterdam
74. requests https://www.mnot.net/talks/http2-expectations/#/tsv
75. Request Prioritization and Server Push
76. Server Push @jonathanklein jkle.in/amsterdam
77. Server Push !Resources can be… @jonathanklein jkle.in/amsterdam
78. Server Push !Resources can be… ! Cached by client @jonathanklein jkle.in/amsterdam
79. Server Push !Resources can be… ! Cached by client ! Declined by client @jonathanklein jkle.in/amsterdam
80. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed @jonathanklein jkle.in/amsterdam
81. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server @jonathanklein jkle.in/amsterdam
82. Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server !Must obey same-origin policy @jonathanklein jkle.in/amsterdam
84. Data From Google @jonathanklein jkle.in/amsterdam time from first request byte to the onload event
86. H/1
87. H/2
88. Key Stats @jonathanklein jkle.in/amsterdam H/1 H/2 Difference Bytes 387KB 387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
89. What About HTTPS? Not required by spec, but Firefox and Chrome will require it
90. istlsfastyet.com
91. Criticism
92. Criticism @jonathanklein jkle.in/amsterdam
93. Criticism “It was rushed, we wanted more” @jonathanklein jkle.in/amsterdam
94. Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years @jonathanklein jkle.in/amsterdam
95. Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years “Why does it require TLS?” @jonathanklein jkle.in/amsterdam
96. 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/amsterdam
98. Implementation
99. Webservers @jonathanklein jkle.in/amsterdam https://istlsfastyet.com/
104. CDN Support @jonathanklein jkle.in/amsterdam https://istlsfastyet.com/
105. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
106. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
107. Combining CSS/JS Tradeoffs !Gzip compression ratio @jonathanklein jkle.in/amsterdam
109. Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O @jonathanklein jkle.in/amsterdam
110. Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O !Header overhead @jonathanklein jkle.in/amsterdam
111. Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O !Header overhead !Caching @jonathanklein jkle.in/amsterdam
112. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
113. 1. Domains ==> Same IP
114. 2. Wildcard TLS Certificate
116. Wrapping Up @jonathanklein jkle.in/amsterdam
117. Wrapping Up !H/2 is here @jonathanklein jkle.in/amsterdam
118. Wrapping Up !H/2 is here !H/2 is fast @jonathanklein jkle.in/amsterdam
119. Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported @jonathanklein jkle.in/amsterdam
120. Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported … go implement it! @jonathanklein jkle.in/amsterdam
121. Thanks! http://jkle.in/amsterdam @jonathanklein @jonathanklein jkle.in/amsterdam