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

Jonathan Klein

October 29, 2015
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

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

    engineer at Etsy @jonathanklein jkle.in/amsterdam
  2. 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. SPDY’s Future, H/2 Status !H/2 approved by the IETF for

    publication as standards-track RFC @jonathanklein jkle.in/amsterdam
  4. 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
  5. 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
  6. 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
  7. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition @jonathanklein jkle.in/amsterdam
  8. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding @jonathanklein jkle.in/amsterdam
  9. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) @jonathanklein jkle.in/amsterdam
  10. Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization

    ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) ! Implementation complexity @jonathanklein jkle.in/amsterdam
  11. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No

    more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
  12. H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No

    more head-of-line blocking! @jonathanklein jkle.in/amsterdam From HPBN
  13. Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites @jonathanklein jkle.in/amsterdam
  14. Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites !Using DataURIs @jonathanklein jkle.in/amsterdam
  15. Forget about… !Combining CSS and JS files !Inlining small CSS/JS

    !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/amsterdam
  16. 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
  17. 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
  18. 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
  19. 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
  20. Why HPACK and not zlib? !CRIME attack ! zlib +

    encryption = session hijacking !HPACK: New, header specific compression algorithm @jonathanklein jkle.in/amsterdam
  21. Server Push !Resources can be… ! Cached by client !

    Declined by client @jonathanklein jkle.in/amsterdam
  22. Server Push !Resources can be… ! Cached by client !

    Declined by client ! Multiplexed @jonathanklein jkle.in/amsterdam
  23. Server Push !Resources can be… ! Cached by client !

    Declined by client ! Multiplexed ! Prioritized by server @jonathanklein jkle.in/amsterdam
  24. Server Push !Resources can be… ! Cached by client !

    Declined by client ! Multiplexed ! Prioritized by server !Must obey same-origin policy @jonathanklein jkle.in/amsterdam
  25. H/1

  26. H/2

  27. Key Stats @jonathanklein jkle.in/amsterdam H/1 H/2 Difference Bytes 387KB 387KB

    - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
  28. Criticism “It was rushed, we wanted more” - Something good

    now > something perfect in 5 years @jonathanklein jkle.in/amsterdam
  29. Criticism “It was rushed, we wanted more” - Something good

    now > something perfect in 5 years “Why does it require TLS?” @jonathanklein jkle.in/amsterdam
  30. 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
  31. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to

    Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
  32. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to

    Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
  33. Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/amsterdam Okay to

    Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content
  34. Wrapping Up !H/2 is here !H/2 is fast !H/2 is

    supported @jonathanklein jkle.in/amsterdam
  35. Wrapping Up !H/2 is here !H/2 is fast !H/2 is

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