HTTP/2.0 101 Introduction

A new version of the HTTP protocol has now been nalized and wide support in browsers and web servers is coming quickly. The workshop will explain how HTTP works in general and what you currently have to do to make your application as fast as possible. The speaker will show what HTTP/2.0 is all about, what it changes and how it helps your application's performance

Transcript

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