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. https://www.flickr.com/photos/duncan/3171592427/
3. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg
4. https://www.flickr.com/photos/neilsingapore/3567378586/
5. HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991
6. HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996
7. HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999
8. 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
9. https://www.flickr.com/photos/offshore/1433329174/
15. Average page size
16. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
17. Average asset count
18. http://httparchive.org/trends.php
19. The internet gets slower and slower
20. https://www.flickr.com/photos/91026431@N05/8497636527/
21. Slow connections
22. High latency
23. https://flic.kr/p/KpBcj
24. It’s hard work to keep a page fast
26. http://www.impressivewebs.com/importance-of-website- performance-sources/
27. HTTP was designed for „simple“ web pages
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 in detail
36. HTTP/1.1 in detail
37. User enters URL
38. DNS lookup
39. TCP connection
40. TLS handshake
41. This already takes time
42. Finally: HTTP
43. HTTP request
44. GET / HTTP/1.1 Host: www.researchgate.net
45. 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: …
46. https://www.flickr.com/photos/40987321@N02/5580348753/
47. HTTP response
48. HTTP/1.1 200 OK Content-Type: text/plain Content
49. 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
50. HTTP/2
51. For the user it works the same
52. No changes in Headers, Semantics etc
53. Almost no changes in Headers, Semantics etc
54. Protocol (h2) is established during TLS handshake
55. :authority: www.researchgate.net :method: GET :path: / :scheme: https :status: 200 Content-Type: text/plain Content
56. Changes on transport level
57. TLS only
58. Binary instead of textual
59. Multiple requests are multiplexed over one TCP connection
60. Server Push
61. Header compression
62. Let’s look into these in more detail
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. Easy, let’s just open a hundred TCP connections
86. Network congestion
87. Concurrent connection limits
88. http://www.browserscope.org/?category=network
89. Domain sharding
90. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
91. Shards should be persistent
92. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
93. Easy, let’s just use 20 domain shards
94. Additional handshakes and connections
95. Network congestion
96. TCP Slow Start
97. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
98. Ideal number of shards
99. https://codeascraft.com/2014/02/19/reducing-domain- sharding/
100. One request is blocking one TCP Connection
101. A HTTP request is expensive
102. Header compression
103. Smaller requests and responses
104. Less roundtrips
105. Headers are received early (1st packet)
106. Less requests
107. Concatenation
108. 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
109. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js
110. Spritemaps
112. How to bundle
113. Over fetching
114. 90% CSS unused
115. Under fetching
116. Cache invalidation
117. HTTP/2
118. Only 1 connection
119. Fully multiplexed
120. https://www.nginx.com/blog/7-tips-for-faster-http2- performance/
121. No domain sharding needed
122. Low overhead for a request
123. No concatenation needed?
124. Less concatenation needed
125. https://medium.com/@asyncmax/the-right-way-to-bundle- your-assets-for-faster-sites-over-http-2-437c37efe3ff
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?
137. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
138. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution ONLY VISIBLE BELOW THE FOLD
139. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu
140. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution LOAD ASYNC WITH JS
141. Inline critical assets
142. Either inline always
143. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your critical css </styles> </head> <body> <div>content</div> <link href="main.css" > </body> </html>
144. Caching?
145. First request
146. 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>
147. Subsequent request (if Cookie set)
148. 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>
149. Flushing critical stuff early
150. Traditional approach
151. 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>
152. HTTP supports streaming
153. 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
155. Problems
156. Headers are already sent
157. 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. Sent headers can not be modified
159. Redirects
160. <script> window.location = "..."; </script>
162. Proxies, servers, load balancers may buffer content
163. Browsers may wait before starting to render HTML
164. HTTP/2
165. Server push
166. Prioritize critical assets
167. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
168. 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/
169. Headers
170. https://httpd.apache.org/docs/2.4/howto/http2.html#push
171. Automated learning
172. Caching?
173. Great
174. When can I use it?
175. Browser support
176. http://caniuse.com/#feat=http2
177. Server support
178. Nginx https://www.nginx.com/blog/nginx-1-9-5/
179. https://httpd.apache.org/docs/2.4/mod/mod_http2.html Apache httpd
180. Who is using it already?
181. chrome://net-internals/#http2
182. Performance best practices will evolve
183. Monitor and test
184. Expect more frequent HTTP protocol iterations
185. Stay up to date
186. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de