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. HTTP/2.0
   101 Introduction
   101 Switching Protocols
   @BastianHofmann
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Questions? Ask
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

16. View Slide

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

    View Slide

18. Average page
    size
    

    View Slide

19. Average asset
    count
    

    View Slide

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

    View Slide

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

    View Slide

22. The internet gets
    slower and slower
    

    View Slide

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

    View Slide

24. Slow connections
    

    View Slide

25. High latency
    

    View Slide

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

    View Slide

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

    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/1.1 in detail
    

    View Slide

36. User enters URL
    

    View Slide

37. DNS lookup
    

    View Slide

38. TCP connection
    

    View Slide

39. TLS handshake
    

    View Slide

40. This already takes
    time
    

    View Slide

41. Already some
    Optimizations
    

    View Slide

42. DNS caching
    

    View Slide

43. Connection Keep
    Alive
    

    View Slide

44. TLS optimizations
    

    View Slide

45. https://istlsfastyet.com/
    

    View Slide

46. View Slide

47. Finally: HTTP
    

    View Slide

48. HTTP request
    

    View Slide

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

    View Slide

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

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

    View Slide

52. HTTP response
    

    View Slide

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

    View Slide

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

55. HTTP/2
    

    View Slide

56. For the user it
    works the same
    

    View Slide

57. No changes in
    Headers,
    Semantics etc
    

    View Slide

58. Almost no changes
    in Headers,
    Semantics etc
    

    View Slide

59. Protocol (h2) is
    established during
    TLS handshake
    

    View Slide

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

    View Slide

61. Changes on
    transport level
    

    View Slide

62. TLS only
    

    View Slide

63. Binary instead of
    textual
    

    View Slide

64. Header
    compression
    

    View Slide

65. Smaller requests
    and responses
    

    View Slide

66. Less roundtrips
    

    View Slide

67. Headers are
    received early
    (1st packet)
    

    View Slide

68. HTTP Response
    body
    

    View Slide

69. HTML response
    

    View Slide

70. DOM parsing
    

    View Slide

71. Rendering
    

    View Slide

72. View Slide

73. Asset fetching
    

    View Slide

74. Applying CSS
    

    View Slide

75. Executing JS
    

    View Slide

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

    View Slide

77. Blocking HTML
    rendering
    

    View Slide

78. CSS
    

    View Slide

79. JS
    

    View Slide

80. CSS triggers
    repaints
    

    View Slide

81. JS can manipulate
    the DOM
    

    View Slide

82. JS can access
    attributes set by
    CSS
    

    View Slide

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

    View Slide

84. 
    

    View Slide

85. Lots of assets
    

    View Slide

86. HTTP/1.1
    

    View Slide

87. Every request one
    TCP connection
    

    View Slide

88. Connection Keep
    Alive
    

    View Slide

89. Network
    congestion
    

    View Slide

90. Concurrent
    connection limits
    

    View Slide

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

    View Slide

92. Domain sharding
    

    View Slide

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

    View Slide

94. Shards should be
    persistent
    

    View Slide

95. Additional
    handshakes and
    connections
    

    View Slide

96. Network
    congestion
    

    View Slide

97. TCP Slow Start
    

    View Slide

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

    View Slide

99. Ideal number of
    shards
    

    View Slide

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

     View Slide

101. Page sizes
     

     View Slide

102. Less content
     

     View Slide

103. GZIP
     

     View Slide

104. Image
     compression
     

     View Slide

105. Minification
     

     View Slide

106. JS
     

     View Slide

107. CSS
     

     View Slide

108. HTML
     

     View Slide

109. Debugging
     problems
     

     View Slide

110. View Slide

111. Sourcemaps
     

     View Slide

112. Less requests
     

     View Slide

113. Concatenation
     

     View Slide

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

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

     View Slide

116. Spritemaps
     

     View Slide

117. View Slide

118. How to bundle
     

     View Slide

119. Over fetching
     

     View Slide

120. 90% CSS unused
     

     View Slide

121. Cache
     invalidation
     

     View Slide

122. Under fetching
     

     View Slide

123. HTTP/2
     

     View Slide

124. Only 1
     connection
     

     View Slide

125. Fully multiplexed
     

     View Slide

126. No domain
     sharding needed
     

     View Slide

127. Low overhead for
     a request
     

     View Slide

128. No
     concatenation
     needed
     

     View Slide

129. Better cache hit
     ratio
     

     View Slide

130. More granular
     loading
     

     View Slide

131. Less
     development
     overhead
     

     View Slide

132. View Slide

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

     View Slide

134. Critical rendering
     path
     

     View Slide

135. View Slide

136. What is visible?
     

     View Slide

137. View Slide

138. What is critical?
     

     View Slide

139. View Slide

140. HTTP/1.1
     

     View Slide

141. Inline critical
     assets
     

     View Slide

142. Either inline always
     

     View Slide

143. Caching?
     

     View Slide

144. First request
     

     View Slide

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

146. Subsequent request
     (if Cookie set)
     

     View Slide

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

     View Slide

148. Flushing critical
     stuff early
     

     View Slide

149. Traditional
     approach
     

     View Slide

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

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

     View Slide

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

     View Slide

153. HTTP supports
     streaming
     

     View Slide

154. Browser Server
     GET /foo.html
     
     

     View Slide

155. View Slide

156. Problems
     

     View Slide

157. Headers are
     already sent
     

     View Slide

158. Redirects
     

     View Slide

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

     View Slide

160. View Slide

161. Proxies, servers,
     load balancers
     may buffer
     content
     

     View Slide

162. Browsers may
     wait before
     starting to render
     HTML
     

     View Slide

163. AJAX?
     

     View Slide

164. JSON
     

     View Slide

165. View Slide

166. Caching what
     assets are
     needed
     

     View Slide

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

     View Slide

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

     View Slide

169. View Slide

170. View Slide

171. HTTP/2
     

     View Slide

172. Server push
     

     View Slide

173. Prioritize critical
     assets
     

     View Slide

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

     View Slide

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

176. Headers
     X-Associated-Content
     

     View Slide

177. Automated
     learning
     

     View Slide

178. Great
     

     View Slide

179. When can I use
     it?
     

     View Slide

180. Browser support
     

     View Slide

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

     View Slide

182. http://caniuse.com/#search=spdy
     

     View Slide

183. Server support
     

     View Slide

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

     View Slide

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

     View Slide

186. Who is using it
     already?
     

     View Slide

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

     View Slide

188. Performance
     best practices will
     evolve
     

     View Slide

189. Monitor and test
     

     View Slide

190. Expect more
     frequent HTTP
     protocol
     iterations
     

     View Slide

191. Stay up to date
     

     View Slide

192. https://joind.in/talk/fc942
     

     View Slide

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

     View Slide