Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying SPDY and HTTP/2

Demystifying SPDY and HTTP/2

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

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

October 29, 2015
Tweet

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
  9. None
  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
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  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

  27. None
  28. None
  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

  33. None
  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
  36. None
  37. From HPBN

  38. None
  39. None
  40. None
  41. 6 connections

  42. HTTP Head-of-line Blocking A single slow response blocks all requests

    behind it.
  43. None
  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

  48. None
  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
  83. None
  84. Data From Google @jonathanklein jkle.in/amsterdam time from first request byte

    to the onload event
  85. None
  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
  97. None
  98. Implementation

  99. Webservers @jonathanklein jkle.in/amsterdam https://istlsfastyet.com/

  100. None
  101. None
  102. None
  103. None
  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

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

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