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

Know thy buzzwords: HTTP/2

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
July 13, 2017

Know thy buzzwords: HTTP/2

Fullstack Conf 2017

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

July 13, 2017
Tweet

Transcript

  1. @DasSurma Developer Advocate ✨HTTP/2✨ OMG so good

  2. TL;DR: SWITCH!

  3. HTTP/1.1 – Upgrade – HTTP/2.0 ✨HTTP/2✨

  4. caniuse.com

  5. None
  6. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997

    2012 2015
  7. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997

    2012 2015 bit.ly/surma-http2 Talk from CDS 2015
  8. Head-of-Line Blocking aka one-resource-at-a-time syndrome

  9. HTTP/1

  10. HTTP/1

  11. HTTP/1 200KB 4s

  12. ✨HTTP/2✨ Single TCP connection

  13. http2.golang.org/gophertiles

  14. h1 h2

  15. Concatenation Inlining Bundling Spriting ? More later

  16. Encryption

  17. None
  18. None
  19. ✨HTTP/2✨ TLS encrypted ? ?

  20. ✨HTTP/2✨ $0

  21. certbot.eff.org

  22. CDNs say bit.ly/surma-http2-performance-increase HTTP/2 is 20% faster (on avg)

  23. h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms

    6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com 26%
  24. HTTP/2 bit.ly/chromeblog-http2

  25. But how? Setup? Testing? bit.ly/surma-http2-setup

  26. What about local development?

  27. None
  28. None
  29. What did I not talk about yet?

  30. HPACK

  31. HTTP/2 Push

  32. RTT > Bandwidth

  33. index.html styles.css webfont.css webfont.woff <link> @import @font-face 14K 1.4K 800B

    12K Back-of-napkin math: Total data: 28.4K Data transfer time: 37ms # of RTTs: 4 Total time: 437ms
  34. None
  35. bit.ly/jake-push

  36. bit.ly/jake-push TL;DR: – Massive inconsistencies between browsers – Not pushing

    things that are already in the cache is a hard problem – Don’t even think about pushing anything but GET
  37. bit.ly/jake-push Alternatives – Inlining for first-paint-critical resources – <link rel=“preload”>

    for interactive-critical resources
  38. Onemore thing about bundling bit.ly/sergio-bundling

  39. TL;DR: SWITCH!

  40. @DasSurma Developer Advocate ✨HTTP/2✨ OMG so good