Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2.0 101 Introduction

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.

Bastian Hofmann

May 14, 2016
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

Transcript

  1. HTTP/2.0 101 Introduction @BastianHofmann

  2. None
  3. None
  4. None
  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/

  15. None
  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

  67. None
  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

  107. None
  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

  115. None
  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

  130. None
  131. https://www.flickr.com/photos/ksayer/5614813296/

  132. Critical rendering path

  133. None
  134. What is visible?

  135. None
  136. What is critical?

  137. None
  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
  153. None
  154. Problems

  155. Headers are already sent

  156. Redirects

  157. <script> window.location = "..."; </script>

  158. None
  159. Proxies, servers, load balancers may buffer content

  160. Browsers may wait before starting to render HTML

  161. AJAX?

  162. JSON

  163. None
  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"] }

    );
  167. None
  168. None
  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