HTTP/2 and You

You may have missed it; the biggest update to the HTTP protocol in over 15 years was finalized this year. The long awaited HTTP/2 update is finally here and you can take advantage of it now, but what does this change mean for you, a builder of the web? In my talk, I will break down the important aspects of the new HTTP/2 protocol, how it differs from HTTP/1.1, and ways in which you can take advantage of the HTTP/2 performance improvements today. Whether you realize it or not, HTTP/2 will affect your life in the near future and I will help you understand what it all means.

Transcript

1. HTTP/2 and You Zack Tollman @tollmanz
2. I am going to say latency a lot
4. Round Trip Time
5. Increase Bandwidth
7. Reduce latency
8. Bandwidth vs. Latency
9. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
10. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
11. “However, decreasing RTT, regardless of current bandwidth always helps make web browsing faster.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
12. TCP Connection
13. TCP Connection SYN
14. TCP Connection SYN SYN ACK
15. TCP Connection SYN SYN ACK ACK
16. TCP Connection SYN SYN ACK ACK 50ms
17. TCP Connection SYN SYN ACK ACK 50ms 50ms
18. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms
19. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms 150ms
20. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms HTTP
21. HTTPS / TLS
22. HTTPS / TLS SYN ACK SYN
23. HTTPS / TLS SYN ACK SYN ACK / HELLO HELLO
24. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED
25. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP
26. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3
27. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3 100ms 100ms 100ms
28. Connections are costly
29. That’s just a single TCP connection
30. Six connections per domain
31. 284 assets 2000 ms start render 101 connections 8418 ms latency
32. “To speed up the Internet at large, we should look for more ways to bring down RTT.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
33. Latency problems in HTTP/1.1 are critical flaws
34. Serialization: a single asset at a time
35. TCP Connection html html style.css style.css
36. One request, one response
37. TCP Connection html html style.css style.css
38. Developers are clever
39. Reduce requests with bundling
40. JS/CSS concatenation
41. Image sprites
42. Bypass 6 connections limit per domain
43. images1.cdn.com images2.cdn.com images3.cdn.com Domain sharding
44. Optimize critical rendering path
45. Inline CSS, images, JS
46. “Best Practices”
47. Clever Hacks
49. HTTP/2 reduces latency by fixing the problems
50. SPDY
51. Multiplexing: one connection per domain
52. No more bundling
53. No more sharding
54. Single domain
55. Server push: one request, many responses
56. TCP Connection html html style.css style.css
57. TCP Connection html html style.css
58. No more inlining
59. Prioritization
60. Important assets received first
61. HTTPS is required… kinda
62. “HTTP/2 is (or will be soon) supported by all of the ‘major’ browsers, and if you want them to use it with your Web site, you’ll need to have HTTPS URLs” — Mark Nottingham https://www.mnot.net/blog/2015/06/15/http2_implementation_status
63. Gophertiles https://http2.golang.org/gophertiles
64. HTTP/1.1
65. HTTP/2
66. 12s
67. 1.7s
68. HTTP/2 is available… today!
69. Firefox 36 Chrome 41 (iOS too!) Opera 28 IE 11 (Windows 10) Edge Safari 8.1 (iOS 9/OSX 10.10)
70. Apache: mod_h2 Nginx: Q4
71. Nghttp2 https://nghttp2.org https://www.tollmanz.com/http2-nghttp2-nginx-tls/ h2o https://calomel.org/h2o.html
72. tollmanz.com/wcbos2015 @tollmanz