Know thy buzzwords: HTTP/2

Fullstack Conf 2017

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