HTTP/2.0 101 Introduction

1. HTTP/2.0 101 Introduction @BastianHofmann
2. HTTP/2.0 101 Introduction 101 Switching Protocols @BastianHofmann
3. https://www.flickr.com/photos/duncan/3171592427/
4. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg
5. https://www.flickr.com/photos/neilsingapore/3567378586/
6. HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991
7. HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996
8. HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999
9. 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
10. https://www.flickr.com/photos/offshore/1433329174/
12. http://www.impressivewebs.com/importance-of-website- performance-sources/
13. Average page size
14. Average asset count
15. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
16. http://httparchive.org/trends.php
17. The internet gets slower and slower
18. https://www.flickr.com/photos/91026431@N05/8497636527/
19. Slow connections
20. High latency
21. https://flic.kr/p/KpBcj
22. It’s hard work to keep a page fast
23. Lots of hacks around HTTP needed
24. It needs to get better
25. SPDY
26. HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015
27. New possibilities for web applications
28. Increased performance
29. Old truths may not be valid anymore
30. Before we start
31. A few words about me
36. Questions? Ask
37. http://speakerdeck.com/u/bastianhofmann
38. HTTP in detail
39. The anatomy of a page load
41. Every request one TCP connection
43. User enters URL
44. DNS lookup
45. TCP connection
46. TLS handshake
47. This already takes time
48. Optimizations
49. DNS caching
50. Connection Keep Alive
51. TLS optimizations
52. https://istlsfastyet.com/
54. Finally: HTTP
55. GET / HTTP/1.1 Host: www.researchgate.net HTTP/1.1 200 OK Content-Type: text/plain Content
56. HTTP request
57. 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: …
58. https://www.flickr.com/photos/40987321@N02/5580348753/
59. HTTP response
60. 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
61. HTTP/2
62. For the user it works the same
63. No changes in Headers, Semantics etc
64. GET / HTTP/2.0 Host: www.researchgate.net HTTP/2.0 200 OK Content-Type: text/plain Content
65. Changes on transport level
66. TLS only
67. Binary instead of textual
68. Header compression
69. Smaller requests and responses
70. Less roundtrips
71. Headers are received early (1st packet)
72. Response body
73. HTML response
74. DOM parsing
75. Rendering
76. Asset fetching
77. Applying CSS
78. Executing JS
79. https://www.flickr.com/photos/hangdog/10991275/
80. Blocking HTML rendering
81. CSS
82. JS
83. CSS triggers repaints
84. JS can manipulate the DOM
85. JS can access attributes set by CSS
86. 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>
87. <script src="demo_async.js" async></script>
88. Every request one TCP connection
89. Concurrent connection limits
90. Network congestion
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. HTTP/2
123. Only 1 connection
124. Fully multiplexed
125. No domain sharding needed
126. Low overhead for a request
127. No concatenation needed
128. Better cache hit ratio
129. More granular loading
130. Less development overhead
132. https://www.flickr.com/photos/ksayer/5614813296/
133. Critical rendering path
136. What is visible?
137. What is critical?
138. Inline critical assets
139. Either inline always
140. Caching?
141. First request
142. 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>
143. Subsequent request (if Cookie set)
144. 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>
145. Flushing critical stuff early
146. Traditional approach
147. 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>
148. HTTP supports streaming
149. 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
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. Problems
154. Headers are already sent
155. Redirects
157. Proxies, servers, load balancers may buffer content
158. Browsers may wait before starting to render HTML
159. AJAX?
160. JSON/XML
162. Caching what assets are needed
163. GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-Type: application/json { "data": {...}, "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
164. localStorage.setItem( "literature.AddPublicationsDialog", { "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] } );
167. HTTP/2
168. Server push
169. Prioritize critical assets
170. Browser Server Push CSS & JS HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
171. 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/
172. Headers X-Associated-Content
173. Automated learning
174. Great
175. When can I use it?
176. Browser support
177. http://caniuse.com/#feat=http2
178. http://caniuse.com/#search=spdy
179. Server support
180. Nginx http://nginx.org/en/docs/http/ngx_http_v2_module.html
181. https://github.com/icing/mod_h2 Apache httpd
182. Performance best practices will evolve
183. Stay up to date
184. Expect more frequent HTTP protocol iterations
185. https://joind.in/15435
186. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de