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
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. User enters URL
37. DNS lookup
38. TCP connection
39. TLS handshake
40. This already takes time
41. Already some Optimizations
42. DNS caching
43. Connection Keep Alive
44. TLS optimizations
45. https://istlsfastyet.com/
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. Header compression
65. Smaller requests and responses
66. Less roundtrips
67. Headers are received early (1st packet)
68. HTTP Response body
69. HTML response
70. DOM parsing
71. 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. Lots of assets
86. HTTP/1.1
87. Every request one TCP connection
88. Connection Keep Alive
89. Network congestion
90. Concurrent connection limits
91. http://www.browserscope.org/?category=network
92. Domain sharding
93. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
94. Shards should be persistent
95. Additional handshakes and connections
96. Network congestion
97. TCP Slow Start
98. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
99. Ideal number of shards
100. https://codeascraft.com/2014/02/19/reducing-domain- sharding/
101. Page sizes
102. Less content
103. GZIP
104. Image compression
105. Minification
106. JS
107. CSS
108. HTML
109. Debugging problems
111. Sourcemaps
112. Less requests
113. Concatenation
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
115. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js
116. Spritemaps
118. How to bundle
119. Over fetching
120. 90% CSS unused
121. Cache invalidation
122. Under fetching
123. HTTP/2
124. Only 1 connection
125. Fully multiplexed
126. No domain sharding needed
127. Low overhead for a request
128. No concatenation needed
129. Better cache hit ratio
130. More granular loading
131. Less development overhead
133. https://www.flickr.com/photos/ksayer/5614813296/
134. Critical rendering path
136. What is visible?
138. What is critical?
140. HTTP/1.1
141. Inline critical assets
142. Either inline always
143. Caching?
144. First request
145. 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>
146. Subsequent request (if Cookie set)
147. 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>
148. Flushing critical stuff early
149. Traditional approach
150. 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>
151. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Controlling_DNS_prefetching
152. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ
153. HTTP supports streaming
154. 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
156. Problems
157. Headers are already sent
158. Redirects
159. <script> window.location = "..."; </script>
161. Proxies, servers, load balancers may buffer content
162. Browsers may wait before starting to render HTML
163. AJAX?
164. JSON
166. Caching what assets are needed
167. GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-Type: application/json { "data": {...}, "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
168. localStorage.setItem( "literature.AddPublicationsDialog", { "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] } );
171. HTTP/2
172. Server push
173. Prioritize critical assets
174. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
175. 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/
176. Headers X-Associated-Content
177. Automated learning
178. Great
179. When can I use it?
180. Browser support
181. http://caniuse.com/#feat=http2
182. http://caniuse.com/#search=spdy
183. Server support
184. Nginx https://www.nginx.com/blog/nginx-1-9-5/
185. https://httpd.apache.org/docs/2.4/mod/mod_http2.html Apache httpd
186. Who is using it already?
187. chrome://net-internals/#http2
188. Performance best practices will evolve
189. Monitor and test
190. Expect more frequent HTTP protocol iterations
191. Stay up to date
192. https://joind.in/talk/fc942
193. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de