Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2 101

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
November 20, 2015

HTTP/2 101

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

November 20, 2015
Tweet

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