HTTP/2.0 101 Introduction

After 16 years a new version of the HTTP protocol has now been finalised and wide support in browsers and web servers is coming quickly. In this talk I'll explain how HTTP and browsers work in general and what you currently have to do to make your application as fast as possible. Based on this I'll show what HTTP/2.0 is all about, what it changes and how it can help your application's performance.

Transcript

1. HTTP/2.0
   101 Introduction
   @BastianHofmann
   

   View Slide

2. https://www.flickr.com/photos/duncan/3171592427/
   

   View Slide

3. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg
   

   View Slide

4. https://www.flickr.com/photos/neilsingapore/3567378586/
   

   View Slide

5. HTTP/0.9
   http://www.w3.org/Protocols/HTTP/
   AsImplemented.html
   1991
   

   View Slide

6. HTTP/1.0
   https://tools.ietf.org/html/rfc1945
   1996
   

   View Slide

7. HTTP/1.1
   http://tools.ietf.org/html/rfc2616
   1999
   

   View Slide

8. HTTP/1.1
   http://tools.ietf.org/html/rfc2616
   http://tools.ietf.org/html/rfc7230
   http://tools.ietf.org/html/rfc7231
   http://tools.ietf.org/html/rfc7232
   http://tools.ietf.org/html/rfc7235
   http://tools.ietf.org/html/rfc7234
   http://tools.ietf.org/html/rfc7233
   2014
   

   View Slide

9. https://www.flickr.com/photos/offshore/1433329174/
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Average page
    size
    

    View Slide

16. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
    

    View Slide

17. Average asset
    count
    

    View Slide

18. http://httparchive.org/trends.php
    

    View Slide

19. The internet gets
    slower and slower
    

    View Slide

20. https://www.flickr.com/photos/91026431@N05/8497636527/
    

    View Slide

21. Slow connections
    

    View Slide

22. High latency
    

    View Slide

23. https://flic.kr/p/KpBcj
    

    View Slide

24. It’s hard work to
    keep a page fast
    

    View Slide

25. View Slide

26. http://www.impressivewebs.com/importance-of-
    website-performance-sources/
    

    View Slide

27. HTTP was designed
    for „simple“ web
    pages
    

    View Slide

28. Lots of hacks
    around HTTP
    needed
    

    View Slide

29. It needs to get
    better
    

    View Slide

30. SPDY
    

    View Slide

31. HTTP/2
    http://tools.ietf.org/html/rfc7540
    http://tools.ietf.org/html/rfc7541
    2015
    

    View Slide

32. New possibilities
    for web
    applications
    

    View Slide

33. Increased
    performance
    

    View Slide

34. Old truths may
    not be valid
    anymore
    

    View Slide

35. HTTP in detail
    

    View Slide

36. HTTP/1.1 in detail
    

    View Slide

37. User enters URL
    

    View Slide

38. DNS lookup
    

    View Slide

39. TCP connection
    

    View Slide

40. TLS handshake
    

    View Slide

41. This already takes
    time
    

    View Slide

42. Finally: HTTP
    

    View Slide

43. HTTP request
    

    View Slide

44. GET / HTTP/1.1
    Host: www.researchgate.net
    

    View Slide

45. GET /home HTTP/1.1
    Host: www.researchgate.net
    pragma: no-cache
    dnt: 1
    accept-encoding: gzip, deflate, sdch
    accept-language: de-DE,de;q=0.8,en-
    US;q=0.6,en;q=0.4
    user-agent: Mozilla/5.0 (Macintosh; Intel Mac
    OS X 10_10_4) AppleWebKit/537.36 (KHTML, like
    Gecko) Chrome/46.0.2478.0 Safari/537.36
    accept: text/html,application/
    xhtml+xml,application/xml;q=0.9,image/webp,*/
    *;q=0.8
    cache-control: no-cache
    cookie: …
    

    View Slide

46. https://www.flickr.com/photos/40987321@N02/5580348753/
    

    View Slide

47. HTTP response
    

    View Slide

48. HTTP/1.1 200 OK
    Content-Type: text/plain
    Content
    

    View Slide

49. HTTP/1.1 200 OK
    Date: Sun, 16 Aug 2015 11:21:31 GMT
    Content-Type: text/html; charset=utf-8
    Transfer-Encoding: chunked
    Connection: keep-alive
    Cache-Control: must-revalidate, no-cache, no-
    store, post-check=0, pre-check=0, private
    X-Correlation-Id:...
    expires: Thu, 19 Nov 1981 08:52:00 GMT
    pragma: no-cache
    X-UA-Compatible: IE=Edge
    X-Frame-Options: SAMEORIGIN
    P3P: CP="..."
    X-Content-Type-Options: nosniff
    X-XSS-Protection: 1; mode=block
    Strict-Transport-Security: max-age=7200
    Content-Security-Policy: …
    Content-Encoding: gzip
    

    View Slide

50. HTTP/2
    

    View Slide

51. For the user it
    works the same
    

    View Slide

52. No changes in
    Headers,
    Semantics etc
    

    View Slide

53. Almost no changes
    in Headers,
    Semantics etc
    

    View Slide

54. Protocol (h2) is
    established during
    TLS handshake
    

    View Slide

55. :authority: www.researchgate.net
    :method: GET
    :path: /
    :scheme: https
    :status: 200
    Content-Type: text/plain
    Content
    

    View Slide

56. Changes on
    transport level
    

    View Slide

57. TLS only
    

    View Slide

58. Binary instead of
    textual
    

    View Slide

59. Multiple requests
    are multiplexed
    over one TCP
    connection
    

    View Slide

60. Server Push
    

    View Slide

61. Header
    compression
    

    View Slide

62. Let’s look into
    these in more
    detail
    

    View Slide

63. HTTP Response
    body
    

    View Slide

64. HTML response
    

    View Slide

65. DOM parsing
    

    View Slide

66. Rendering
    

    View Slide

67. View Slide

68. Asset fetching
    

    View Slide

69. Applying CSS
    

    View Slide

70. Executing JS
    

    View Slide

71. https://www.flickr.com/photos/hangdog/10991275/
    

    View Slide

72. Blocking HTML
    rendering
    

    View Slide

73. CSS triggers
    repaints
    

    View Slide

74. JS can manipulate
    the DOM
    

    View Slide

75. JS can access
    attributes set by
    CSS
    

    View Slide

76. Lots of assets
    

    View Slide

77. HTTP/1.1
    

    View Slide

78. Every request one
    TCP connection
    

    View Slide

79. Connection Keep
    Alive
    

    View Slide

80. Every request
    blocks one TCP
    connection
    

    View Slide

81. Easy, let’s just open
    a hundred TCP
    connections
    

    View Slide

82. Network
    congestion
    

    View Slide

83. Concurrent
    connection limits
    

    View Slide

84. http://www.browserscope.org/?category=network
    

    View Slide

85. Domain sharding
    

    View Slide

86. http://c5.rgstatic.net/profile.css
    http://c4.rgstatic.net/icon.png
    

    View Slide

87. Shards should be
    persistent
    

    View Slide

88. http://c5.rgstatic.net/profile.css
    http://c4.rgstatic.net/icon.png
    

    View Slide

89. Easy, let’s just use
    20 domain shards
    

    View Slide

90. Additional
    handshakes and
    connections
    

    View Slide

91. Network
    congestion
    

    View Slide

92. TCP Slow Start
    

    View Slide

93. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
    

    View Slide

94. Ideal number of
    shards
    

    View Slide

95. https://codeascraft.com/2014/02/19/reducing-
    domain-sharding/
    

    View Slide

96. One request is
    blocking one TCP
    Connection
    

    View Slide

97. A HTTP request is
    expensive
    

    View Slide

98. Smaller requests
    and responses
    

    View Slide

99. Content
    compression
    

    View Slide

100. HTTP/2
     

     View Slide

101. Header
     compression
     

     View Slide

102. Less roundtrips
     

     View Slide

103. Headers are
     received early
     (1st packet)
     

     View Slide

104. Less requests
     

     View Slide

105. Concatenation
     

     View Slide

106. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/javascript/
     combo/lib/yui3/array-extras/array-extras-min.js&lib/yui3/oop/oop-min.js&lib/
     yui3/attribute-core/attribute-core-min.js&lib/yui3/event-custom-base/event-
     custom-base-min.js&lib/yui3/event-custom-complex/event-custom-complex-
     min.js&lib/yui3/attribute-observable/attribute-observable-min.js&lib/yui3/
     attribute-extras/attribute-extras-min.js&lib/yui3/attribute-base/attribute-base-
     min.js&lib/yui3/attribute-complex/attribute-complex-min.js&lib/yui3/base-core/
     base-core-min.js&lib/yui3/base-observable/base-observable-min.js&lib/yui3/
     base-base/base-base-min.js&lib/yui3/pluginhost-base/pluginhost-base-min.js&lib/
     yui3/pluginhost-config/pluginhost-config-min.js&lib/yui3/base-pluginhost/base-
     pluginhost-min.js&lib/yui3/classnamemanager/classnamemanager-min.js&lib/
     yui3/dom-core/dom-core-min.js&lib/yui3/dom-base/dom-base-min.js&lib/yui3/
     selector-native/selector-native-min.js&lib/yui3/selector/selector-min.js&lib/yui3/
     node-core/node-core-min.js
     

     View Slide

107. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/
     mainbundle.js
     

     View Slide

108. Spritemaps
     

     View Slide

109. View Slide

110. How to bundle
     

     View Slide

111. Over fetching
     

     View Slide

112. 90% CSS unused
     

     View Slide

113. Under fetching
     

     View Slide

114. Cache
     invalidation
     

     View Slide

115. HTTP/2
     

     View Slide

116. Only 1
     connection
     

     View Slide

117. Fully multiplexed
     

     View Slide

118. https://www.nginx.com/blog/7-tips-for-faster-http2-
     performance/
     

     View Slide

119. No domain
     sharding needed
     

     View Slide

120. Low overhead for
     a request
     

     View Slide

121. No
     concatenation
     needed?
     

     View Slide

122. Less
     concatenation
     needed
     

     View Slide

123. https://medium.com/@asyncmax/the-right-way-to-
     bundle-your-assets-for-faster-sites-over-
     http-2-437c37efe3ff
     

     View Slide

124. Less unused
     content
     transported
     

     View Slide

125. Better cache hit
     ratio
     

     View Slide

126. More granular
     loading
     

     View Slide

127. Less
     development
     overhead
     

     View Slide

128. View Slide

129. https://www.flickr.com/photos/ksayer/5614813296/
     

     View Slide

130. Critical rendering
     path
     

     View Slide

131. What is visible?
     

     View Slide

132. View Slide

133. What is critical?
     

     View Slide

134. View Slide

135. Profile Publications Publication
     Publication
     Publication
     AboutMe
     LeftColumn Image
     Menu
     Institution
     

     View Slide

136. Profile Publications Publication
     Publication
     Publication
     AboutMe
     LeftColumn Image
     Menu
     Institution
     ONLY VISIBLE BELOW THE FOLD
     

     View Slide

137. Profile Publications Publication
     Publication
     Publication
     AboutMe
     LeftColumn Image
     Menu
     

     View Slide

138. Profile Publications Publication
     Publication
     Publication
     AboutMe
     LeftColumn Image
     Menu
     Institution
     LOAD ASYNC WITH JS
     

     View Slide

139. Inline critical
     assets
     

     View Slide

140. Either inline always
     

     View Slide

141. HTTP/1.1 200 OK
     Content-Type: text/html
     
     
     
     … your critical css
     
     
     
     content
     
     
     
     

     View Slide

142. Caching?
     

     View Slide

143. First request
     

     View Slide

144. HTTP/1.1 200 OK
     Content-Type: text/html
     
     
     
     … your critical css
     
     
     
     content
     load main.css async
     set cookie that other css was loaded
     
     
     

     View Slide

145. Subsequent request
     (if Cookie set)
     

     View Slide

146. HTTP/1.1 200 OK
     Content-Type: text/html
     
     
     
     // loaded from cache
     
     
     content
     
     
     

     View Slide

147. Flushing critical
     stuff early
     

     View Slide

148. Traditional
     approach
     

     View Slide

149. Browser Server
     GET css & js
     HTTP/1.1 200 OK
     Content-Type: text/html
     
     <br/>GET /foo.html<br/></head><body></body></html><br/>

     View Slide

150. HTTP supports
     streaming
     

     View Slide

151. Browser Server
     GET /foo.html
     
     

     View Slide

152. View Slide

153. Problems
     

     View Slide

154. Headers are
     already sent
     

     View Slide

155. Browser Server
     GET /foo.html
     
     

     View Slide

156. Sent headers can
     not be modified
     

     View Slide

157. Redirects
     

     View Slide

158. <br/>window.location = "...";<br/>
     

     View Slide

159. View Slide

160. Proxies, servers,
     load balancers
     may buffer
     content
     

     View Slide

161. Browsers may
     wait before
     starting to render
     HTML
     

     View Slide

162. HTTP/2
     

     View Slide

163. Server push
     

     View Slide

164. Prioritize critical
     assets
     

     View Slide

165. Browser Server
     Push CSS & JS
     :status: 200
     Content-Type: text/html
     
     <br/></head><body></body></html><br/>GET /foo.html<br/>

     View Slide

166. spdy.createServer(options, function(req, res) {
     // push JavaScript asset (/main.js) to the client
     res.push(
     '/main.js',
     {'content-type': 'application/javascript'},
     function(err, stream) {
     stream.end('alert("hello from push
     stream!")');
     }
     );
     // write main response body and terminate stream
     res.end(
     'Hello World! <br/>script>'<br/>);<br/>}).listen(443);<br/>https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/<br/>

     View Slide

167. Headers
     

     View Slide

168. https://httpd.apache.org/docs/2.4/howto/
     http2.html#push
     

     View Slide

169. Automated
     learning
     

     View Slide

170. Caching?
     

     View Slide

171. Great
     

     View Slide

172. When can I use
     it?
     

     View Slide

173. Browser support
     

     View Slide

174. http://caniuse.com/#feat=http2
     

     View Slide

175. Server support
     

     View Slide

176. Nginx
     https://www.nginx.com/blog/nginx-1-9-5/
     

     View Slide

177. https://httpd.apache.org/docs/2.4/mod/mod_http2.html
     Apache httpd
     

     View Slide

178. Who is using it
     already?
     

     View Slide

179. chrome://net-internals/#http2
     

     View Slide

180. Performance
     best practices will
     evolve
     

     View Slide

181. Activate HTTP/2
     

     View Slide

182. Monitor and test
     

     View Slide

183. Expect more
     frequent HTTP
     protocol
     iterations
     

     View Slide

184. Stay up to date
     

     View Slide

185. http://twitter.com/BastianHofmann
     http://lanyrd.com/people/BastianHofmann
     http://speakerdeck.com/u/bastianhofmann
     mail@bastianhofmann.de
     

     View Slide