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 Bastian will 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 he will 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. http://www.impressivewebs.com/importance-of-website-
    performance-sources/
    

    View Slide

12. Average page
    size
    

    View Slide

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

    View Slide

14. Average asset
    count
    

    View Slide

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

    View Slide

16. The internet gets
    slower and slower
    

    View Slide

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

    View Slide

18. Slow connections
    

    View Slide

19. High latency
    

    View Slide

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

    View Slide

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

    View Slide

22. Lots of hacks
    around HTTP
    needed
    

    View Slide

23. It needs to get
    better
    

    View Slide

24. SPDY
    

    View Slide

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

    View Slide

26. New possibilities
    for web
    applications
    

    View Slide

27. Increased
    performance
    

    View Slide

28. Old truths may
    not be valid
    anymore
    

    View Slide

29. HTTP/1.1 in detail
    

    View Slide

30. User enters URL
    

    View Slide

31. DNS lookup
    

    View Slide

32. TCP connection
    

    View Slide

33. TLS handshake
    

    View Slide

34. This already takes
    time
    

    View Slide

35. Finally: HTTP
    

    View Slide

36. HTTP request
    

    View Slide

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

    View Slide

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

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

    View Slide

40. HTTP response
    

    View Slide

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

    View Slide

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

43. HTTP/2
    

    View Slide

44. For the user it
    works the same
    

    View Slide

45. No changes in
    Headers,
    Semantics etc
    

    View Slide

46. Almost no changes
    in Headers,
    Semantics etc
    

    View Slide

47. Protocol (h2) is
    established during
    TLS handshake
    

    View Slide

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

    View Slide

49. Changes on
    transport level
    

    View Slide

50. TLS only
    

    View Slide

51. Binary instead of
    textual
    

    View Slide

52. Multiple requests
    are multiplexed
    over one TCP
    connection
    

    View Slide

53. Server Push
    

    View Slide

54. Header
    compression
    

    View Slide

55. Smaller requests
    and responses
    

    View Slide

56. Less roundtrips
    

    View Slide

57. Headers are
    received early
    (1st packet)
    

    View Slide

58. HTTP Response
    body
    

    View Slide

59. HTML response
    

    View Slide

60. DOM parsing
    

    View Slide

61. Rendering
    

    View Slide

62. View Slide

63. Asset fetching
    

    View Slide

64. Applying CSS
    

    View Slide

65. Executing JS
    

    View Slide

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

    View Slide

67. Blocking HTML
    rendering
    

    View Slide

68. CSS
    

    View Slide

69. JS
    

    View Slide

70. CSS triggers
    repaints
    

    View Slide

71. JS can manipulate
    the DOM
    

    View Slide

72. JS can access
    attributes set by
    CSS
    

    View Slide

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

    View Slide

74. 
    

    View Slide

75. Lots of assets
    

    View Slide

76. HTTP/1.1
    

    View Slide

77. Every request one
    TCP connection
    

    View Slide

78. Connection Keep
    Alive
    

    View Slide

79. Every request
    blocks one TCP
    connection
    

    View Slide

80. Network
    congestion
    

    View Slide

81. Concurrent
    connection limits
    

    View Slide

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

    View Slide

83. Domain sharding
    

    View Slide

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

    View Slide

85. Shards should be
    persistent
    

    View Slide

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

    View Slide

87. Additional
    handshakes and
    connections
    

    View Slide

88. Network
    congestion
    

    View Slide

89. TCP Slow Start
    

    View Slide

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

    View Slide

91. Ideal number of
    shards
    

    View Slide

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

    View Slide

93. Page sizes
    

    View Slide

94. Less content
    

    View Slide

95. GZIP
    

    View Slide

96. Image
    compression
    

    View Slide

97. Minification
    

    View Slide

98. JS
    

    View Slide

99. CSS
    

    View Slide

100. HTML
     

     View Slide

101. Debugging
     problems
     

     View Slide

102. View Slide

103. Sourcemaps
     

     View Slide

104. => More requests
     

     View Slide

105. Less requests
     

     View Slide

106. Concatenation
     

     View Slide

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

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

     View Slide

109. Spritemaps
     

     View Slide

110. View Slide

111. How to bundle
     

     View Slide

112. Over fetching
     

     View Slide

113. 90% CSS unused
     

     View Slide

114. Under fetching
     

     View Slide

115. Cache
     invalidation
     

     View Slide

116. HTTP/2
     

     View Slide

117. Only 1
     connection
     

     View Slide

118. Fully multiplexed
     

     View Slide

119. No domain
     sharding needed
     

     View Slide

120. Low overhead for
     a request
     

     View Slide

121. No
     concatenation
     needed
     

     View Slide

122. Better cache hit
     ratio
     

     View Slide

123. More granular
     loading
     

     View Slide

124. Less
     development
     overhead
     

     View Slide

125. View Slide

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

     View Slide

127. Critical rendering
     path
     

     View Slide

128. View Slide

129. What is visible?
     

     View Slide

130. View Slide

131. What is critical?
     

     View Slide

132. View Slide

133. HTTP/1.1
     

     View Slide

134. Inline critical
     assets
     

     View Slide

135. Either inline always
     

     View Slide

136. Caching?
     

     View Slide

137. First request
     

     View Slide

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

139. Subsequent request
     (if Cookie set)
     

     View Slide

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

     View Slide

141. Flushing critical
     stuff early
     

     View Slide

142. Traditional
     approach
     

     View Slide

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

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

     View Slide

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

     View Slide

146. HTTP supports
     streaming
     

     View Slide

147. Browser Server
     GET /foo.html
     
     

     View Slide

148. View Slide

149. Problems
     

     View Slide

150. Headers are
     already sent
     

     View Slide

151. Redirects
     

     View Slide

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

     View Slide

153. View Slide

154. Proxies, servers,
     load balancers
     may buffer
     content
     

     View Slide

155. Browsers may
     wait before
     starting to render
     HTML
     

     View Slide

156. AJAX?
     

     View Slide

157. JSON
     

     View Slide

158. View Slide

159. Caching what
     assets are
     needed
     

     View Slide

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

     View Slide

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

     View Slide

162. View Slide

163. View Slide

164. HTTP/2
     

     View Slide

165. Server push
     

     View Slide

166. Prioritize critical
     assets
     

     View Slide

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

     View Slide

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

169. Headers
     X-Associated-Content
     

     View Slide

170. Automated
     learning
     

     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. Monitor and test
     

     View Slide

182. Expect more
     frequent HTTP
     protocol
     iterations
     

     View Slide

183. Stay up to date
     

     View Slide

184. https://joind.in/talk/13140
     

     View Slide

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

     View Slide