HTTP/2.0 101 Introduction

Nach 16 Jahren wurde jetzt die neue Version des HTTP Protokolls fertig gestellt. Die Unterstützung durch Browser und Webserver wächst stetig. In diesem Talk wird erklärt, wie HTTP und Browser generell funktionieren, worum es bei HTTP/2.0 eigentlich geht, was das für deine Webanwendungen bedeutet, und wie es deiner Anwendung zu besserer Performance verhelfen kann.

Transcript

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