HTTP/2.0 101 Introduction

After 16 years a new version of the HTTP protocol has now been finalized 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. View Slide

3. View Slide

4. View Slide

5. Questions? Ask
   

   View Slide

6. http://speakerdeck.com/u/bastianhofmann
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 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

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

    View Slide

15. View Slide

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

    View Slide

17. Average page
    size
    

    View Slide

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

    View Slide

19. Average asset
    count
    

    View Slide

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

    View Slide

21. The internet gets
    slower and slower
    

    View Slide

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

    View Slide

23. Slow connections
    

    View Slide

24. High latency
    

    View Slide

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

    View Slide

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

    View Slide

27. Lots of hacks
    around HTTP
    needed
    

    View Slide

28. It needs to get
    better
    

    View Slide

29. SPDY
    

    View Slide

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

    View Slide

31. New possibilities
    for web
    applications
    

    View Slide

32. Increased
    performance
    

    View Slide

33. Old truths may
    not be valid
    anymore
    

    View Slide

34. HTTP/1.1 in detail
    

    View Slide

35. User enters URL
    

    View Slide

36. DNS lookup
    

    View Slide

37. TCP connection
    

    View Slide

38. TLS handshake
    

    View Slide

39. This already takes
    time
    

    View Slide

40. Finally: HTTP
    

    View Slide

41. HTTP request
    

    View Slide

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

    View Slide

43. 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

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

    View Slide

45. HTTP response
    

    View Slide

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

    View Slide

47. 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

48. HTTP/2
    

    View Slide

49. For the user it
    works the same
    

    View Slide

50. No changes in
    Headers,
    Semantics etc
    

    View Slide

51. Almost no changes
    in Headers,
    Semantics etc
    

    View Slide

52. Protocol (h2) is
    established during
    TLS handshake
    

    View Slide

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

    View Slide

54. Changes on
    transport level
    

    View Slide

55. TLS only
    

    View Slide

56. Binary instead of
    textual
    

    View Slide

57. Multiple requests
    are multiplexed
    over one TCP
    connection
    

    View Slide

58. Server Push
    

    View Slide

59. Header
    compression
    

    View Slide

60. Smaller requests
    and responses
    

    View Slide

61. Less roundtrips
    

    View Slide

62. Headers are
    received early
    (1st packet)
    

    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
    

    View Slide

74. JS
    

    View Slide

75. CSS triggers
    repaints
    

    View Slide

76. JS can manipulate
    the DOM
    

    View Slide

77. JS can access
    attributes set by
    CSS
    

    View Slide

78. HTTP/1.1 200 OK
    Content-Type: text/html
    
    
    
    
    
    
    <br/>// some JS<br/>
    
    
    

    View Slide

79. 
    

    View Slide

80. Lots of assets
    

    View Slide

81. HTTP/1.1
    

    View Slide

82. Every request one
    TCP connection
    

    View Slide

83. Connection Keep
    Alive
    

    View Slide

84. Every request
    blocks one TCP
    connection
    

    View Slide

85. Network
    congestion
    

    View Slide

86. Concurrent
    connection limits
    

    View Slide

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

    View Slide

88. Domain sharding
    

    View Slide

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

    View Slide

90. Shards should be
    persistent
    

    View Slide

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

    View Slide

92. Additional
    handshakes and
    connections
    

    View Slide

93. Network
    congestion
    

    View Slide

94. TCP Slow Start
    

    View Slide

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

    View Slide

96. Ideal number of
    shards
    

    View Slide

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

    View Slide

98. Page sizes
    

    View Slide

99. Less content
    

    View Slide

100. GZIP
     

     View Slide

101. Image
     compression
     

     View Slide

102. Minification
     

     View Slide

103. JS
     

     View Slide

104. CSS
     

     View Slide

105. HTML
     

     View Slide

106. Debugging
     problems
     

     View Slide

107. View Slide

108. Sourcemaps
     

     View Slide

109. => More requests
     

     View Slide

110. Less requests
     

     View Slide

111. Concatenation
     

     View Slide

112. 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

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

     View Slide

114. Spritemaps
     

     View Slide

115. View Slide

116. How to bundle
     

     View Slide

117. Over fetching
     

     View Slide

118. 90% CSS unused
     

     View Slide

119. Cache
     invalidation
     

     View Slide

120. Under fetching
     

     View Slide

121. HTTP/2
     

     View Slide

122. Only 1
     connection
     

     View Slide

123. Fully multiplexed
     

     View Slide

124. No domain
     sharding needed
     

     View Slide

125. Low overhead for
     a request
     

     View Slide

126. No
     concatenation
     needed
     

     View Slide

127. Better cache hit
     ratio
     

     View Slide

128. More granular
     loading
     

     View Slide

129. Less
     development
     overhead
     

     View Slide

130. View Slide

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

     View Slide

132. Critical rendering
     path
     

     View Slide

133. View Slide

134. What is visible?
     

     View Slide

135. View Slide

136. What is critical?
     

     View Slide

137. View Slide

138. HTTP/1.1
     

     View Slide

139. Inline critical
     assets
     

     View Slide

140. Either inline always
     

     View Slide

141. Caching?
     

     View Slide

142. First request
     

     View Slide

143. 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

144. Subsequent request
     (if Cookie set)
     

     View Slide

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

     View Slide

146. Flushing critical
     stuff early
     

     View Slide

147. Traditional
     approach
     

     View Slide

148. 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

149. https://developer.mozilla.org/en-US/docs/Web/HTTP/
     Controlling_DNS_prefetching
     

     View Slide

150. https://developer.mozilla.org/en-US/docs/Web/HTTP/
     Link_prefetching_FAQ
     

     View Slide

151. HTTP supports
     streaming
     

     View Slide

152. Browser Server
     GET /foo.html
     
     

     View Slide

153. View Slide

154. Problems
     

     View Slide

155. Headers are
     already sent
     

     View Slide

156. Redirects
     

     View Slide

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

     View Slide

158. View Slide

159. Proxies, servers,
     load balancers
     may buffer
     content
     

     View Slide

160. Browsers may
     wait before
     starting to render
     HTML
     

     View Slide

161. AJAX?
     

     View Slide

162. JSON
     

     View Slide

163. View Slide

164. Caching what
     assets are
     needed
     

     View Slide

165. GET /literature.AddPublicationsDialog
     HTTP/1.1 200 OK
     Content-Type: application/json
     {
     "data": {...},
     "css": ["AddPublicationsDialog.css"],
     "js": ["AddPublicationsDialogView.js"],
     "html": ["addConferencePaperSelection.html"]
     }
     

     View Slide

166. localStorage.setItem(
     "literature.AddPublicationsDialog",
     {
     "css": ["AddPublicationsDialog.css"],
     "js": ["AddPublicationsDialogView.js"],
     "html": ["addConferencePaperSelection.html"]
     }
     );
     

     View Slide

167. View Slide

168. View Slide

169. HTTP/2
     

     View Slide

170. Server push
     

     View Slide

171. Prioritize critical
     assets
     

     View Slide

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

     View Slide

173. 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! '
     );
     }).listen(443);
     https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
     

     View Slide

174. Headers
     X-Associated-Content
     

     View Slide

175. Automated
     learning
     

     View Slide

176. Great
     

     View Slide

177. When can I use
     it?
     

     View Slide

178. Browser support
     

     View Slide

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

     View Slide

180. Server support
     

     View Slide

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

     View Slide

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

     View Slide

183. Who is using it
     already?
     

     View Slide

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

     View Slide

185. Performance
     best practices will
     evolve
     

     View Slide

186. Monitor and test
     

     View Slide

187. Expect more
     frequent HTTP
     protocol
     iterations
     

     View Slide

188. Stay up to date
     

     View Slide

189. https://joind.in/talk/856a8
     

     View Slide

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

     View Slide