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

    About Me !Director of Engineering at Attend !Formerly a performance

    engineer at Etsy @jonathanklein jkle.in/amsterdam
  2. 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
  3. 9.
  4. 13.

    SPDY’s Future, H/2 Status !H/2 approved by the IETF for

    publication as standards-track RFC @jonathanklein jkle.in/amsterdam
  5. 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
  6. 15.
  7. 16.
  8. 17.
  9. 18.
  10. 19.
  11. 20.
  12. 21.
  13. 27.
  14. 28.
  15. 31.
  16. 33.
  17. 34.
  18. 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
  19. 36.
  20. 37.
  21. 38.
  22. 39.
  23. 40.
  24. 43.
  25. 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
  26. 48.
  27. 52.

    Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition @jonathanklein jkle.in/amsterdam
  28. 53.

    Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding @jonathanklein jkle.in/amsterdam
  29. 54.

    Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) @jonathanklein jkle.in/amsterdam
  30. 55.

    Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) ! Implementation complexity @jonathanklein jkle.in/amsterdam
  31. 59.

    H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No

    more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
  32. 60.

    H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No

    more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
  33. 64.

    Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites @jonathanklein jkle.in/amsterdam
  34. 65.

    Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites !Using DataURIs @jonathanklein jkle.in/amsterdam
  35. 66.

    Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/amsterdam
  36. 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
  37. 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
  38. 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
  39. 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
  40. 73.

    Why HPACK and not zlib? !CRIME attack ! zlib +

    encryption = session hijacking !HPACK: New, header specific compression algorithm @jonathanklein jkle.in/amsterdam
  41. 79.

    Server Push !Resources can be… ! Cached by client !

    Declined by client @jonathanklein jkle.in/amsterdam
  42. 80.

    Server Push !Resources can be… ! Cached by client !

    Declined by client ! Multiplexed @jonathanklein jkle.in/amsterdam
  43. 81.

    Server Push !Resources can be… ! Cached by client !

    Declined by client ! Multiplexed ! Prioritized by server @jonathanklein jkle.in/amsterdam
  44. 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
  45. 83.
  46. 85.
  47. 86.

    H/1

  48. 87.

    H/2

  49. 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%
  50. 91.
  51. 94.

    Criticism “It was rushed, we wanted more” - Something good

    now > something perfect in 5 years @jonathanklein jkle.in/amsterdam
  52. 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
  53. 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
  54. 97.
  55. 100.
  56. 101.
  57. 102.
  58. 103.
  59. 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
  60. 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
  61. 108.
  62. 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
  63. 115.
  64. 119.

    Wrapping Up !H/2 is here !H/2 is fast !H/2 is

    supported @jonathanklein jkle.in/amsterdam
  65. 120.

    Wrapping Up !H/2 is here !H/2 is fast !H/2 is

    supported … go implement it! @jonathanklein jkle.in/amsterdam