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 Bastian will 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 he will show what HTTP/2.0 is all about, what it changes and how it can help your application’s performance.

Bastian Hofmann

June 13, 2016
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

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/

  10. None
  11. http://www.impressivewebs.com/importance-of-website- performance-sources/

  12. Average page size

  13. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

  14. Average asset count

  15. http://httparchive.org/trends.php

  16. The internet gets slower and slower

  17. https://www.flickr.com/photos/91026431@N05/8497636527/

  18. Slow connections

  19. High latency

  20. https://flic.kr/p/KpBcj

  21. It’s hard work to keep a page fast

  22. Lots of hacks around HTTP needed

  23. It needs to get better

  24. SPDY

  25. HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015

  26. New possibilities for web applications

  27. Increased performance

  28. Old truths may not be valid anymore

  29. HTTP/1.1 in detail

  30. User enters URL

  31. DNS lookup

  32. TCP connection

  33. TLS handshake

  34. This already takes time

  35. Finally: HTTP

  36. HTTP request

  37. GET / HTTP/1.1 Host: www.researchgate.net

  38. 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: …
  39. https://www.flickr.com/photos/40987321@N02/5580348753/

  40. HTTP response

  41. HTTP/1.1 200 OK Content-Type: text/plain Content

  42. 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
  43. HTTP/2

  44. For the user it works the same

  45. No changes in Headers, Semantics etc

  46. Almost no changes in Headers, Semantics etc

  47. Protocol (h2) is established during TLS handshake

  48. :authority: www.researchgate.net :method: GET :path: / :scheme: https :status: 200

    Content-Type: text/plain Content
  49. Changes on transport level

  50. TLS only

  51. Binary instead of textual

  52. Multiple requests are multiplexed over one TCP connection

  53. Server Push

  54. Header compression

  55. Smaller requests and responses

  56. Less roundtrips

  57. Headers are received early (1st packet)

  58. HTTP Response body

  59. HTML response

  60. DOM parsing

  61. Rendering

  62. None
  63. Asset fetching

  64. Applying CSS

  65. Executing JS

  66. https://www.flickr.com/photos/hangdog/10991275/

  67. Blocking HTML rendering

  68. CSS

  69. JS

  70. CSS triggers repaints

  71. JS can manipulate the DOM

  72. JS can access attributes set by CSS

  73. 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>
  74. <script src="demo_async.js" async></script>

  75. Lots of assets

  76. HTTP/1.1

  77. Every request one TCP connection

  78. Connection Keep Alive

  79. Every request blocks one TCP connection

  80. Network congestion

  81. Concurrent connection limits

  82. http://www.browserscope.org/?category=network

  83. Domain sharding

  84. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png

  85. Shards should be persistent

  86. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png

  87. Additional handshakes and connections

  88. Network congestion

  89. TCP Slow Start

  90. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg

  91. Ideal number of shards

  92. https://codeascraft.com/2014/02/19/reducing-domain- sharding/

  93. Page sizes

  94. Less content

  95. GZIP

  96. Image compression

  97. Minification

  98. JS

  99. CSS

  100. HTML

  101. Debugging problems

  102. None
  103. Sourcemaps

  104. => More requests

  105. Less requests

  106. Concatenation

  107. 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
  108. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js

  109. Spritemaps

  110. None
  111. How to bundle

  112. Over fetching

  113. 90% CSS unused

  114. Under fetching

  115. Cache invalidation

  116. HTTP/2

  117. Only 1 connection

  118. Fully multiplexed

  119. No domain sharding needed

  120. Low overhead for a request

  121. No concatenation needed

  122. Better cache hit ratio

  123. More granular loading

  124. Less development overhead

  125. None
  126. https://www.flickr.com/photos/ksayer/5614813296/

  127. Critical rendering path

  128. None
  129. What is visible?

  130. None
  131. What is critical?

  132. None
  133. HTTP/1.1

  134. Inline critical assets

  135. Either inline always

  136. Caching?

  137. First request

  138. 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>
  139. Subsequent request (if Cookie set)

  140. 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>
  141. Flushing critical stuff early

  142. Traditional approach

  143. 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>
  144. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Controlling_DNS_prefetching

  145. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ

  146. HTTP supports streaming

  147. 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
  148. None
  149. Problems

  150. Headers are already sent

  151. Redirects

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

  153. None
  154. Proxies, servers, load balancers may buffer content

  155. Browsers may wait before starting to render HTML

  156. AJAX?

  157. JSON

  158. None
  159. Caching what assets are needed

  160. GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-Type: application/json { "data": {...},

    "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
  161. localStorage.setItem( "literature.AddPublicationsDialog", { "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }

    );
  162. None
  163. None
  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 X-Associated-Content

  170. Automated learning

  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. Monitor and test

  182. Expect more frequent HTTP protocol iterations

  183. Stay up to date

  184. https://joind.in/talk/13140

  185. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de