Know thy buzzwords: HTTP/2

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