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

Jonathan Klein

April 21, 2015
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. About Me !Formerly a performance engineer at Etsy !Started the

    Boston Web Perf Meetup Group @jonathanklein jkle.in/http2
  2. 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
  3. 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
  4. SPDY’s Future, H/2 Status !H/2 approved by the IETF for

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

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

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

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

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

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

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

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

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

    !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/http2
  17. 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
  18. 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
  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://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2
  20. 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
  21. Why HPACK and not zlib? !CRIME attack ! zlib +

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

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

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

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

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

  27. H/2

  28. Key Stats @jonathanklein jkle.in/http2 H/1 H/2 Difference Bytes 387KB 387KB

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

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

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

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

    supported @jonathanklein jkle.in/http2
  34. Wrapping Up !H/2 is here !H/2 is fast !H/2 is

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