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. Latency is the enemy
4. Round Trip Time
5. Reduce latency
6. Bandwidth vs. Latency
7. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
8. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
9. “…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
10. TCP Connection
11. TCP Connection SYN
12. TCP Connection SYN SYN ACK
13. TCP Connection SYN SYN ACK ACK
14. TCP Connection SYN SYN ACK ACK 50ms
15. TCP Connection SYN SYN ACK ACK 50ms 50ms
16. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms
17. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms 150ms
18. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms HTTP
19. HTTPS / TLS
20. HTTPS / TLS SYN ACK SYN
21. HTTPS / TLS SYN ACK SYN ACK / HELLO HELLO
22. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED
23. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP
24. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3
25. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3 100ms 100ms 100ms
26. Connections are costly
27. That’s just a single TCP connection
28. 284 assets 2000 ms start render 101 connections 8418 ms latency
29. “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
30. Latency problems in HTTP/1.1 are critical flaws
31. Serialization: a single asset at a time
32. TCP Connection html html style.css style.css
33. One request, one response
34. Developers are clever
35. Reduce requests with bundling
36. JS/CSS concatenation
37. Image sprites
38. Bypass 6 connections limit per domain
39. images1.cdn.com images2.cdn.com images3.cdn.com Domain sharding
40. Optimize critical rendering path
41. Inline CSS, images, JS
42. “Best Practices”
43. Clever Hacks
45. HTTP/2 reduces latency by fixing the flaws
46. SPDY
47. HTTP/2
48. Multiplexing: one connection per domain
49. No more bundling
50. No more sharding
51. Single domain
52. Server push: one request, many responses
53. TCP Connection html html style.css style.css
54. TCP Connection html html style.css
55. No more inlining
56. Prioritization
57. Important assets received first
58. HTTPS is required
59. “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
60. Gophertiles https://http2.golang.org/gophertiles
61. HTTP/1.1
62. HTTP/2
63. 12s
64. 1.7s
65. HTTP/2 is available… today!
66. Firefox 36 Chrome 41 (iOS too!) Opera 28 IE 11 (Windows 10) Edge Safari 8.1 (iOS 9/OSX 10.10)
67. Apache Nginx Nghttp2 https://nghttp2.org h2o https://calomel.org/h2o.html
68. WordPress ❤ HTTP/2
69. https://http2.wphttp.com
70. #core-http
71. HTTP/2 is a game changer
72. https://www.tollmanz.com/wcyyz2015 @tollmanz