HTTP/2.0 101 Introduction

Transcript

1. HTTP/2.0
   101 Introduction
   @BastianHofmann
   

   View Slide

2. HTTP/2.0
   101 Introduction
   101 Switching Protocols
   @BastianHofmann
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

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

    View Slide

11. View Slide

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

    View Slide

13. Average page
    size
    

    View Slide

14. Average asset
    count
    

    View Slide

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

    View Slide

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

    View Slide

17. The internet gets
    slower and slower
    

    View Slide

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

    View Slide

19. Slow connections
    

    View Slide

20. High latency
    

    View Slide

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

    View Slide

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

    View Slide

23. Lots of hacks
    around HTTP
    needed
    

    View Slide

24. It needs to get
    better
    

    View Slide

25. SPDY
    

    View Slide

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

    View Slide

27. New possibilities
    for web
    applications
    

    View Slide

28. Increased
    performance
    

    View Slide

29. Old truths may
    not be valid
    anymore
    

    View Slide

30. Before we start
    

    View Slide

31. A few words
    about me
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. Questions? Ask
    

    View Slide

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

    View Slide

38. HTTP in detail
    

    View Slide

39. The anatomy of a
    page load
    

    View Slide

40. View Slide

41. Every request one
    TCP connection
    

    View Slide

42. View Slide

43. User enters URL
    

    View Slide

44. DNS lookup
    

    View Slide

45. TCP connection
    

    View Slide

46. TLS handshake
    

    View Slide

47. This already takes
    time
    

    View Slide

48. Optimizations
    

    View Slide

49. DNS caching
    

    View Slide

50. Connection Keep
    Alive
    

    View Slide

51. TLS optimizations
    

    View Slide

52. https://istlsfastyet.com/
    

    View Slide

53. View Slide

54. Finally: HTTP
    

    View Slide

55. GET / HTTP/1.1
    Host: www.researchgate.net
    HTTP/1.1 200 OK
    Content-Type: text/plain
    Content
    

    View Slide

56. HTTP request
    

    View Slide

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

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

    View Slide

59. HTTP response
    

    View Slide

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

61. HTTP/2
    

    View Slide

62. For the user it
    works the same
    

    View Slide

63. No changes in
    Headers,
    Semantics etc
    

    View Slide

64. GET / HTTP/2.0
    Host: www.researchgate.net
    HTTP/2.0 200 OK
    Content-Type: text/plain
    Content
    

    View Slide

65. Changes on
    transport level
    

    View Slide

66. TLS only
    

    View Slide

67. Binary instead of
    textual
    

    View Slide

68. Header
    compression
    

    View Slide

69. Smaller requests
    and responses
    

    View Slide

70. Less roundtrips
    

    View Slide

71. Headers are
    received early
    (1st packet)
    

    View Slide

72. Response body
    

    View Slide

73. HTML response
    

    View Slide

74. DOM parsing
    

    View Slide

75. Rendering
    

    View Slide

76. Asset fetching
    

    View Slide

77. Applying CSS
    

    View Slide

78. Executing JS
    

    View Slide

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

    View Slide

80. Blocking HTML
    rendering
    

    View Slide

81. CSS
    

    View Slide

82. JS
    

    View Slide

83. CSS triggers
    repaints
    

    View Slide

84. JS can manipulate
    the DOM
    

    View Slide

85. JS can access
    attributes set by
    CSS
    

    View Slide

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

    View Slide

87. 
    

    View Slide

88. Every request one
    TCP connection
    

    View Slide

89. Concurrent
    connection limits
    

    View Slide

90. Network
    congestion
    

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

     View Slide

123. Only 1
     connection
     

     View Slide

124. Fully multiplexed
     

     View Slide

125. No domain
     sharding needed
     

     View Slide

126. Low overhead for
     a request
     

     View Slide

127. No
     concatenation
     needed
     

     View Slide

128. Better cache hit
     ratio
     

     View Slide

129. More granular
     loading
     

     View Slide

130. Less
     development
     overhead
     

     View Slide

131. View Slide

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

     View Slide

133. Critical rendering
     path
     

     View Slide

134. View Slide

135. View Slide

136. What is visible?
     

     View Slide

137. What is critical?
     

     View Slide

138. Inline critical
     assets
     

     View Slide

139. Either inline always
     

     View Slide

140. Caching?
     

     View Slide

141. First request
     

     View Slide

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

143. Subsequent request
     (if Cookie set)
     

     View Slide

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

     View Slide

145. Flushing critical
     stuff early
     

     View Slide

146. Traditional
     approach
     

     View Slide

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

148. HTTP supports
     streaming
     

     View Slide

149. Browser Server
     GET /foo.html
     
     

     View Slide

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

     View Slide

154. Headers are
     already sent
     

     View Slide

155. Redirects
     

     View Slide

156. View Slide

157. Proxies, servers,
     load balancers
     may buffer
     content
     

     View Slide

158. Browsers may
     wait before
     starting to render
     HTML
     

     View Slide

159. AJAX?
     

     View Slide

160. JSON/XML
     

     View Slide

161. View Slide

162. Caching what
     assets are
     needed
     

     View Slide

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

     View Slide

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

     View Slide

165. View Slide

166. View Slide

167. HTTP/2
     

     View Slide

168. Server push
     

     View Slide

169. Prioritize critical
     assets
     

     View Slide

170. Browser Server
     Push CSS & JS
     HTTP/1.1 200 OK
     Content-Type: text/html
     
     <br/></head><body></body></html><br/>GET /foo.html<br/>

     View Slide

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

172. Headers
     X-Associated-Content
     

     View Slide

173. Automated
     learning
     

     View Slide

174. Great
     

     View Slide

175. When can I use
     it?
     

     View Slide

176. Browser support
     

     View Slide

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

     View Slide

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

     View Slide

179. Server support
     

     View Slide

180. Nginx
     http://nginx.org/en/docs/http/ngx_http_v2_module.html
     

     View Slide

181. https://github.com/icing/mod_h2
     Apache httpd
     

     View Slide

182. Performance
     best practices will
     evolve
     

     View Slide

183. Stay up to date
     

     View Slide

184. Expect more
     frequent HTTP
     protocol
     iterations
     

     View Slide

185. https://joind.in/15435
     

     View Slide

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

     View Slide