HTTP/2 101

Chrome Dev Summit 2015
https://www.youtube.com/watch?v=r5oT_2ndjms

Transcript

2. HTTP2 101 Surma @surmair
3. TL;DR: SWITCH! HTTP/2 ≥ HTTP/1
4. TL;DR Performance If you invest, you can squeeze out lots of Δt
5. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1995 1997 2012 2015
6. HTTP/0.9
7. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015
8. HTTP/0.9 GET POST HEAD PUT DELETE LINK UNLINK HTTP/1.0
9. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015
11. HTTP/1.x Best Practices Write it, concatenate it, minify it, inline it, sprite it, shard it, vulcanize it, gzip it Workarounds Hacks
12. Flaw #1 HOL Blocking aka one-resource-at-a-time syndrome
13. http2.golang.org/gophertiles
15. h1 h2
16. Flaw #2 Meta Data GET /index.html User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef … POST /comment User-Agent: Mozilla/5.0… GET /logo.jpg User-Agent: Mozilla/5.0… GET /script.js User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef …
17. Flaw #2 Meta Data 200 OK Set-Cookie: … Content-Type: text/html Content-Encoding: gzip <compressed data> ?
18. History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015
19. Welcome to the glorious era of ✨HTTP/2✨ …but what is it?
20. HTTP/1.1 Upgrade to h2 ✨HTTP/2✨
21. ✨HTTP/2✨ TLS encrypted
22. ✨HTTP/2✨ Single TCP connection
23. ✨HTTP/2✨
24. ✨HTTP/2✨ Single TCP connection
25. HTTP/2 Concatenation Inlining Vulcanize Spriting
27. h1 h2
28. h1 h2
29. h2 h1
30. 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
31. ✨HTTP/2✨
32. HPACK Header compression specifically for HTTP
33. ✨HPACK✨ Header compression specifically for HTTP glorious
34. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
35. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)
36. ✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org 63 … … POST /something Host: www.example.org 3, Huffman(“/something”), 62
37. HPACK Sharding Multiple CDNs
38. But wait theres more… Squeeze out the last bits of performance
39. ✨PUSH✨ Can I interest you in some complementary resources to your resources?
40. ✨PUSH✨ GET /index.html /index.html /style.css /script.js GET /style.css GET /script.js
42. with push without push Don’t push mindlessly!
43. Still needed GZIP/Deflate First Render CDNs/DNS lookup Cache-Control
44. 47% of HTML 36% of CSS 26% of JS are still uncompressed without gzip with gzip bit.ly/uncompressed-resources
45. Now?
46. Now? (browsers)
47. Now? (servers) ✔ ✔ ✔
48. Now? (languages) bit.ly/http2implementations
49. bit.ly/http2implementations
50. Now? github.com/GoogleChrome/simplehttp2server (local dev) HTTP/2 & Push
53. Now! Your Production Environment
54. Now! (Tier 1) Put your static assets on a h2 CDN
55. Now! (Tier 1) 8.41s vs 1.84s over 3G
56. Now! (Tier 1) 10% less data 0.15% faster
57. Now! (Tier 2) h2 reverse proxy
58. Now! (Tier 3) h2
59. Future? Manifest for static hosters and CDNs manifest.json
60. { "index.html": { "/css/app.css": { "type": "style" }, ... }, "page.html": { "/css/page.css": { "type": "style" }, ... } }
61. $ http2-push-manifest -f index.html -f page.html
62. WebSockets – Maybe not a Thing Future?
63. Now? Yes Why? #PerfMatters How? JUST DO IT HTTP/2
64. Thank you! Surma @surmair