HTTP/2 101

Transcript

1. None

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
10. None

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

14. None

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

26. None

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

41. None

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

51. None
52. None

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