HTTP/2.0 101 Introduction

After 16 years a new version of the HTTP protocol has now been finalised 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 triggers repaints
74. JS can manipulate the DOM
75. JS can access attributes set by CSS
76. Lots of assets
77. HTTP/1.1
78. Every request one TCP connection
79. Connection Keep Alive
80. Every request blocks one TCP connection
81. Easy, let’s just open a hundred TCP connections
82. Network congestion
83. Concurrent connection limits
84. http://www.browserscope.org/?category=network
85. Domain sharding
86. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
87. Shards should be persistent
88. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png
89. Easy, let’s just use 20 domain shards
90. Additional handshakes and connections
91. Network congestion
92. TCP Slow Start
93. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg
94. Ideal number of shards
95. https://codeascraft.com/2014/02/19/reducing- domain-sharding/
96. One request is blocking one TCP Connection
97. A HTTP request is expensive
98. Smaller requests and responses
99. Content compression
100. HTTP/2
101. Header compression
102. Less roundtrips
103. Headers are received early (1st packet)
104. Less requests
105. Concatenation
106. 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
107. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/ mainbundle.js
108. Spritemaps
110. How to bundle
111. Over fetching
112. 90% CSS unused
113. Under fetching
114. Cache invalidation
115. HTTP/2
116. Only 1 connection
117. Fully multiplexed
118. https://www.nginx.com/blog/7-tips-for-faster-http2- performance/
119. No domain sharding needed
120. Low overhead for a request
121. No concatenation needed?
122. Less concatenation needed
123. https://medium.com/@asyncmax/the-right-way-to- bundle-your-assets-for-faster-sites-over- http-2-437c37efe3ff
124. Less unused content transported
125. Better cache hit ratio
126. More granular loading
127. Less development overhead
129. https://www.flickr.com/photos/ksayer/5614813296/
130. Critical rendering path
131. What is visible?
133. What is critical?
135. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
136. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution ONLY VISIBLE BELOW THE FOLD
137. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu
138. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution LOAD ASYNC WITH JS
139. Inline critical assets
140. Either inline always
141. 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>
142. Caching?
143. First request
144. 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>
145. Subsequent request (if Cookie set)
146. 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>
147. Flushing critical stuff early
148. Traditional approach
149. 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>
150. HTTP supports streaming
151. 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
153. Problems
154. Headers are already sent
155. 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. Sent headers can not be modified
157. Redirects
158. <script> window.location = "..."; </script>
160. Proxies, servers, load balancers may buffer content
161. Browsers may wait before starting to render HTML
162. HTTP/2
163. Server push
164. Prioritize critical assets
165. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
166. 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/
167. Headers
168. https://httpd.apache.org/docs/2.4/howto/ http2.html#push
169. Automated learning
170. Caching?
171. Great
172. When can I use it?
173. Browser support
174. http://caniuse.com/#feat=http2
175. Server support
176. Nginx https://www.nginx.com/blog/nginx-1-9-5/
177. https://httpd.apache.org/docs/2.4/mod/mod_http2.html Apache httpd
178. Who is using it already?
179. chrome://net-internals/#http2
180. Performance best practices will evolve
181. Activate HTTP/2
182. Monitor and test
183. Expect more frequent HTTP protocol iterations
184. Stay up to date
185. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de