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 Fluent 2015 - jkle.in/http2

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

April 21, 2015
Tweet

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
  10. None
  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
  16. None
  17. None
  18. None
  19. None
  20. None
  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

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

  32. None
  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
  35. None
  36. From HPBN

  37. None
  38. None
  39. None
  40. 6 connections

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

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

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

    to the onload event
  84. None
  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
  96. None
  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
  101. None
  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