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
2. https://www.flickr.com/photos/duncan/3171592427/
3. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg
4. https://www.flickr.com/photos/neilsingapore/3567378586/
5. HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991
6. HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996
7. HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999
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
9. https://www.flickr.com/photos/offshore/1433329174/
11. http://www.impressivewebs.com/importance-of-website- performance-sources/
12. Average page size
13. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
14. Average asset count
15. http://httparchive.org/trends.php
16. The internet gets slower and slower
17. https://www.flickr.com/photos/91026431@N05/8497636527/
18. Slow connections
19. High latency
20. https://flic.kr/p/KpBcj
21. It’s hard work to keep a page fast
22. Lots of hacks around HTTP needed
23. It needs to get better
24. SPDY
25. HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015
26. New possibilities for web applications
27. Increased performance
28. Old truths may not be valid anymore
29. HTTP/1.1 in detail
30. User enters URL
31. DNS lookup
32. TCP connection
33. TLS handshake
34. This already takes time
35. Finally: HTTP
36. HTTP request
37. GET / HTTP/1.1 Host: www.researchgate.net
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: …
39. https://www.flickr.com/photos/40987321@N02/5580348753/
40. HTTP response
41. HTTP/1.1 200 OK Content-Type: text/plain Content
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
43. HTTP/2
44. For the user it works the same
45. No changes in Headers, Semantics etc
46. Almost no changes in Headers, Semantics etc
47. Protocol (h2) is established during TLS handshake
48. :authority: www.researchgate.net :method: GET :path: / :scheme: https :status: 200 Content-Type: text/plain Content
49. Changes on transport level
50. TLS only
51. Binary instead of textual
52. Multiple requests are multiplexed over one TCP connection
53. Server Push
54. Header compression
55. Smaller requests and responses
56. Less roundtrips
57. Headers are received early (1st packet)
58. HTTP Response body
59. HTML response
60. DOM parsing
61. Rendering
63. Asset fetching
64. Applying CSS
65. Executing JS
66. https://www.flickr.com/photos/hangdog/10991275/
67. Blocking HTML rendering
68. CSS
69. JS
70. CSS triggers repaints
71. JS can manipulate the DOM
72. JS can access attributes set by CSS
73. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" > <link href="profile.css" > <script src="library.js" /> <script src="app.js" /> <script> // some JS </script> </head> <body>
74. <script src="demo_async.js" async></script>
75. Lots of assets
76. HTTP/1.1
77. Every request one TCP connection
78. Connection Keep Alive
79. Every request blocks one TCP connection
80. Network congestion
81. Concurrent connection limits
82. http://www.browserscope.org/?category=network
83. Domain sharding
84. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
85. Shards should be persistent
86. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
87. Additional handshakes and connections
88. Network congestion
89. TCP Slow Start
90. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
91. Ideal number of shards
92. https://codeascraft.com/2014/02/19/reducing-domain- sharding/
93. Page sizes
94. Less content
95. GZIP
96. Image compression
97. Minification
98. JS
99. CSS
100. HTML
101. Debugging problems
103. Sourcemaps
104. => More requests
105. Less requests
106. Concatenation
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
108. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js
109. Spritemaps
111. How to bundle
112. Over fetching
113. 90% CSS unused
114. Under fetching
115. Cache invalidation
116. HTTP/2
117. Only 1 connection
118. Fully multiplexed
119. No domain sharding needed
120. Low overhead for a request
121. No concatenation needed
122. Better cache hit ratio
123. More granular loading
124. Less development overhead
126. https://www.flickr.com/photos/ksayer/5614813296/
127. Critical rendering path
129. What is visible?
131. What is critical?
133. HTTP/1.1
134. Inline critical assets
135. Either inline always
136. Caching?
137. First request
138. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your critical css </styles> </head> <body> <div>content</div> load main.css async set cookie that other css was loaded </body> </html>
139. Subsequent request (if Cookie set)
140. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" > // loaded from cache </head> <body> <div>content</div> </body> </html>
141. Flushing critical stuff early
142. Traditional approach
143. Browser Server GET css & js HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..> GET /foo.html </head><body></body></html>
144. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Controlling_DNS_prefetching
145. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ
146. HTTP supports streaming
147. Browser Server GET /foo.html <body></body> </html> HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..></head> GET css & js
149. Problems
150. Headers are already sent
151. Redirects
152. <script> window.location = "..."; </script>
154. Proxies, servers, load balancers may buffer content
155. Browsers may wait before starting to render HTML
156. AJAX?
157. JSON
159. Caching what assets are needed
160. GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-Type: application/json { "data": {...}, "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
161. localStorage.setItem( "literature.AddPublicationsDialog", { "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] } );
164. HTTP/2
165. Server push
166. Prioritize critical assets
167. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
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! <script src=„/main.js"></script>' ); }).listen(443); https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
169. Headers X-Associated-Content
170. Automated learning
171. Great
172. When can I use it?
173. Browser support
174. http://caniuse.com/#feat=http2
175. Server support
176. Nginx https://www.nginx.com/blog/nginx-1-9-5/
177. https://httpd.apache.org/docs/2.4/mod/mod_http2.html Apache httpd
178. Who is using it already?
179. chrome://net-internals/#http2
180. Performance best practices will evolve
181. Monitor and test
182. Expect more frequent HTTP protocol iterations
183. Stay up to date
184. https://joind.in/talk/13140
185. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de