Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP/2で 速くなるとき ならないとき

15,347 views

Published on

presented at YAPC::Okinawa 2018 ONNASON

Published in: Internet
  • Be the first to comment

HTTP/2で 速くなるとき ならないとき

  1. 1. HTTP/2 HTTP/2 Kazuho Oku Fastly
  2. 2. HTTP/2 • CDN Fastly • HTTP/2, TLS/1.3, QUIC – OSS HTTP H2O • IETF – : • Early Hints (RFC 8297) • Cache Digest for HTTP/2 ( )
  3. 3. HTTP/2 • HTTP/1.1 HTTP/2 ? – a) HTTP/1.1 – b) HTTP/2 – c) – d)
  4. 4. HTTP/2 : http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html
  5. 5. HTTP/2 HTTP/2
  6. 6. HTTP/2 : More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)
  7. 7. HTTP/2 : More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)
  8. 8. HTTP/2 Why?
  9. 9. HTTP/2 HTTP/1 client server request response response request
  10. 10. HTTP/2 … client server request response request response
  11. 11. HTTP/2 HTTP/2 client server requests
  12. 12. HTTP/2 HTTP/2 client server requests
  13. 13. HTTP/2 • RFC 7540 (2015/5) – Google SPDY • – – – – HTTP/2
  14. 14. HTTP/2
  15. 15. HTTP/2 HTTP/2 DOMContentLoaded server requests HTML JS, CSS Images
  16. 16. HTTP/2
  17. 17. HTTP/2 HTTP/2 with Push DOMContentLoaded server requests HTML JS, CSS Images
  18. 18. HTTP/2 …
  19. 19. HTTP/2 …
  20. 20. HTTP/2 • Hooman Beheshti – Velocity Conference 2016 – http://bit.ly/2FbQbZq
  21. 21. HTTP/2 Hooman Beheshti VP Technology HTTP/2: What no one’s telling you
  22. 22. HTTP/2 The perfect page
  23. 23. HTTP/2
  24. 24. HTTP/2
  25. 25. HTTP/2 Private WebpageTest 5Mbps/1Mbps; 40ms latency Chrome; h1 vs h2 ~270 runs each!!
  26. 26. HTTP/2
  27. 27. HTTP/2 Packet Loss!
  28. 28. HTTP/2
  29. 29. HTTP/2
  30. 30. HTTP/2
  31. 31. HTTP/2
  32. 32. HTTP/2
  33. 33. HTTP/2
  34. 34. HTTP/2 Firefox
  35. 35. HTTP/2
  36. 36. HTTP/2 Slow 3G: 780Kbps/330Kbps 200ms latency
  37. 37. HTTP/2 Firefox; Slow 3G: 780Kbps/330Kbps, 200ms latency
  38. 38. HTTP/2 Firefox; 5Mbps/1Mbps, 40ms latency
  39. 39. HTTP/2 5Mbps/1Mbps, 40ms latency
  40. 40. HTTP/2       0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms DocComplete h2 h2 h2 h2 h1 h1 h1 h1 Keeping score…
  41. 41. HTTP/2       0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms DocComplete h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1 h2 h1 h1 h1 h2 h1 Speed Index h2/h1 h2 h2 h2 h1 h1 h2 h2 Keeping score…
  42. 42. HTTP/2 Why?
  43. 43. HTTP/2
  44. 44. HTTP/2
  45. 45. HTTP/2
  46. 46. HTTP/2
  47. 47. HTTP/2
  48. 48. HTTP/2 • → H1 – = F( ) – H1 6 H2 1 • – H2
  49. 49. HTTP/2 Real pages
  50. 50. HTTP/2 Real pages •  8 pages (from 8 real sites) •  16 bandwidth/latency combinations –  Each with 0%, 0.5%, 1%, 2% PLR •  Firefox and Chrome, TLS only, collect all metrics •  300-400 runs with each combination
  51. 51. HTTP/2 Real pages •  8 pages (from 8 real sites) •  16 bandwidth/latency combinations –  Each with 0%, 0.5%, 1%, 2% PLR •  Firefox and Chrome, TLS only, collect all metrics •  300-400 runs with each combination
  52. 52. HTTP/2 Analysis •  3 Types of pages, # of resources h1àh2: –  ~75% or higher –  ~half –  ~25% or lower •  2 profiles (0%, 0.5%, 1%, 2% PLR): –  “Broadband”: 5Mbps/1Mbps/40ms –  “Slow 3G”: 780Kbps/330Kbps/200ms •  3 Metrics –  Document Complete –  DOM Content Loaded Start –  Speed Index
  53. 53. HTTP/2 Site1: Fastly customers page 130-135 requests to onload (~3MB) ~99 requests h1àh2 (2.5MB)
  54. 54. HTTP/2
  55. 55. HTTP/2 Site1; DocComplete; 5Mbps/1Mbps/40ms
  56. 56. HTTP/2 Site1; DCL; 5Mbps/1Mbps/40ms
  57. 57. HTTP/2 Site1; Speed Index; 5Mbps/1Mbps/40ms
  58. 58. HTTP/2 Site1; DocComplete; 780Kbps/330Kbps/200ms
  59. 59. HTTP/2 Site1; DCL; 780Kbps/330Kbps/200ms ***
  60. 60. HTTP/2 Site1; Speed Index; 780Kbps/330Kbps/200ms
  61. 61. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2
  62. 62. HTTP/2 Site2 90-100 requests to onload (~1.7MB) ~47 requests h1àh2 (1.2MB)
  63. 63. HTTP/2
  64. 64. HTTP/2 Site2; DocComplete; 5Mbps/1Mbps/40ms
  65. 65. HTTP/2 Site2; DCL; 5Mbps/1Mbps/40ms
  66. 66. HTTP/2 Site2; Speed Index; 5Mbps/1Mbps/40ms
  67. 67. HTTP/2 Site2; DocComplete; 780Kbps/330Kbps/200ms
  68. 68. HTTP/2 Site2; DCL; 780Kbps/330Kbps/200ms
  69. 69. HTTP/2 Site2; Speed Index; 780Kbps/330Kbps/200ms ***
  70. 70. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2       Site2 DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2
  71. 71. HTTP/2 Site3 176-212 requests to onload (~3.5MB) ~45-55 requests h1àh2 (2MB)
  72. 72. HTTP/2
  73. 73. HTTP/2 Site3; DocComplete; 5Mbps/1Mbps/40ms ***
  74. 74. HTTP/2 Site3; DCL; 5Mbps/1Mbps/40ms
  75. 75. HTTP/2 Site3; Speed Index; 5Mbps/1Mbps/40ms
  76. 76. HTTP/2 Site3; DocComplete; 780Kbps/330Kbps/200ms
  77. 77. HTTP/2 Site3; DCL; 780Kbps/330Kbps/200ms
  78. 78. HTTP/2 Site3; Speed Index; 780Kbps/330Kbps/200ms
  79. 79. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2       Site2 DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2       Site3 DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1
  80. 80. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  81. 81. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  82. 82. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  83. 83. HTTP/2 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  84. 84. HTTP/2 • 0% → H2 • 2% → H1 H2 – DOMContentLoaded • : • •
  85. 85. HTTP/2 PLR in the real world
  86. 86. HTTP/2
  87. 87. HTTP/2 H1 ?
  88. 88. HTTP/2 • QoS – → → – (PPPoE, , …) • QoS
  89. 89. HTTP/2 • H1 – ( ) – & (HoLB) • H2 – RTT ( ) – ( ) • – • H1/H2
  90. 90. HTTP/2 • HTTP/1.1 HTTP/2 ? – a) HTTP/1.1 – b) HTTP/2 – c) – d) • – –
  91. 91. HTTP/2
  92. 92. HTTP/2 https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
  93. 93. HTTP/2 https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
  94. 94. HTTP/2
  95. 95. HTTP/2 • • • webpagetest
  96. 96. HTTP/2 • JS • • • – : H2 ? Resource-Timing
  97. 97. HTTP/2 Resource-Timing: caniuse?
  98. 98. HTTP/2 • – ? – ? Resource-Timing
  99. 99. HTTP/2 • Resource-Timing • • Sever-Timing
  100. 100. HTTP/2 HTTP/1.1 200 OK Content-Encoding: chunked Content-Type: text/html; charset=utf-8 Trailer: Server-Timing Server-Timing: connect; dur=132, req; dur=0, process; dur=230 34e90 <!DOCTYPE html> <HTML> … </HTML> 0 Server-Timing: response; dur=11, total; dur=373 Server-Timing
  101. 101. HTTP/2 • HTTP/2 – RTT – H1 • • – webpagetest – Resource-Timing – Server-Timing
  102. 102. HTTP/2 Questions?

×