presented at YAPC::Okinawa 2018 ONNASON

1. HTTP/2
HTTP/2
Kazuho Oku
Fastly

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. HTTP/2
• HTTP/1.1 HTTP/2 ?
– a) HTTP/1.1
– b) HTTP/2
– c)
– d)

4. HTTP/2
: http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

5. HTTP/2
HTTP/2

6. HTTP/2
: More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)

7. HTTP/2
: More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)

8. HTTP/2
Why?

9. HTTP/2
HTTP/1
client server
request
response
response
request

10. HTTP/2
…
client server
request
response
request
response

11. HTTP/2
HTTP/2
client server
requests

12. HTTP/2
HTTP/2
client server
requests

13. HTTP/2
• RFC 7540 (2015/5)
– Google SPDY
•
–
–
–
–
HTTP/2

14. HTTP/2

15. HTTP/2
HTTP/2
DOMContentLoaded
server
requests
HTML
JS, CSS
Images

16. HTTP/2

17. HTTP/2
HTTP/2 with Push
DOMContentLoaded
server
requests
HTML
JS, CSS
Images

18. HTTP/2
…

19. HTTP/2
…

20. HTTP/2
• Hooman Beheshti
– Velocity Conference 2016
– http://bit.ly/2FbQbZq

21. HTTP/2
Hooman Beheshti
VP Technology
HTTP/2:
What no one’s telling you

22. HTTP/2
The perfect page

23. HTTP/2

24. HTTP/2

25. HTTP/2
Private WebpageTest
5Mbps/1Mbps; 40ms latency
Chrome; h1 vs h2
~270 runs each!!

26. HTTP/2

27. HTTP/2
Packet Loss!

28. HTTP/2

29. HTTP/2

30. HTTP/2

31. HTTP/2

32. HTTP/2

33. HTTP/2

34. HTTP/2
Firefox

35. HTTP/2

36. HTTP/2
Slow 3G:
780Kbps/330Kbps
200ms latency

37. HTTP/2
Firefox; Slow 3G: 780Kbps/330Kbps, 200ms latency

38. HTTP/2
Firefox; 5Mbps/1Mbps, 40ms latency

39. HTTP/2
5Mbps/1Mbps, 40ms latency

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. 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. HTTP/2
Why?

43. HTTP/2

44. HTTP/2

45. HTTP/2

46. HTTP/2

47. HTTP/2

48. HTTP/2
• → H1
– = F( )
– H1 6 H2 1
•
– H2

49. HTTP/2
Real pages

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. 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. 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. HTTP/2
Site1: Fastly customers page
130-135 requests to onload (~3MB)
~99 requests h1àh2 (2.5MB)

54. HTTP/2

55. HTTP/2
Site1; DocComplete; 5Mbps/1Mbps/40ms

56. HTTP/2
Site1; DCL; 5Mbps/1Mbps/40ms

57. HTTP/2
Site1; Speed Index; 5Mbps/1Mbps/40ms

58. HTTP/2
Site1; DocComplete; 780Kbps/330Kbps/200ms

59. HTTP/2
Site1; DCL; 780Kbps/330Kbps/200ms
***

60. HTTP/2
Site1; Speed Index; 780Kbps/330Kbps/200ms

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. HTTP/2
Site2
90-100 requests to onload (~1.7MB)
~47 requests h1àh2 (1.2MB)

63. HTTP/2

64. HTTP/2
Site2; DocComplete; 5Mbps/1Mbps/40ms

65. HTTP/2
Site2; DCL; 5Mbps/1Mbps/40ms

66. HTTP/2
Site2; Speed Index; 5Mbps/1Mbps/40ms

67. HTTP/2
Site2; DocComplete; 780Kbps/330Kbps/200ms

68. HTTP/2
Site2; DCL; 780Kbps/330Kbps/200ms

69. HTTP/2
Site2; Speed Index; 780Kbps/330Kbps/200ms
***

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. HTTP/2
Site3
176-212 requests to onload (~3.5MB)
~45-55 requests h1àh2 (2MB)

72. HTTP/2

73. HTTP/2
Site3; DocComplete; 5Mbps/1Mbps/40ms
***

74. HTTP/2
Site3; DCL; 5Mbps/1Mbps/40ms

75. HTTP/2
Site3; Speed Index; 5Mbps/1Mbps/40ms

76. HTTP/2
Site3; DocComplete; 780Kbps/330Kbps/200ms

77. HTTP/2
Site3; DCL; 780Kbps/330Kbps/200ms

78. HTTP/2
Site3; Speed Index; 780Kbps/330Kbps/200ms

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. 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. 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. 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. 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. HTTP/2
• 0% → H2
• 2% → H1 H2
– DOMContentLoaded
• :
•
•

85. HTTP/2
PLR in the real world

86. HTTP/2

87. HTTP/2
H1 ?

88. HTTP/2
• QoS
– → →
– (PPPoE, , …)
•
QoS

89. HTTP/2
• H1
– ( )
– & (HoLB)
• H2
– RTT ( )
– ( )
•
–
•
H1/H2

90. HTTP/2
• HTTP/1.1 HTTP/2 ?
– a) HTTP/1.1
– b) HTTP/2
– c)
– d)
•
–
–

91. HTTP/2

92. HTTP/2
https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

93. HTTP/2
https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

94. HTTP/2

95. HTTP/2
•
•
•
webpagetest

96. HTTP/2
• JS
•
•
•
– : H2 ?
Resource-Timing

97. HTTP/2
Resource-Timing: caniuse?

98. HTTP/2
•
– ?
– ?
Resource-Timing

99. HTTP/2
• Resource-Timing
•
•
Sever-Timing

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. HTTP/2
• HTTP/2
– RTT
– H1
•
•
– webpagetest
– Resource-Timing
– Server-Timing

102. HTTP/2
Questions?