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