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

HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction

Bastian Hofmann

October 03, 2015
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

Transcript

  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/

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

  32. None
  33. None
  34. None
  35. None
  36. Questions? Ask

  37. http://speakerdeck.com/u/bastianhofmann

  38. HTTP in detail

  39. The anatomy of a page load

  40. None
  41. Every request one TCP connection

  42. None
  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/

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

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

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

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

  133. Critical rendering path

  134. None
  135. None
  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
  150. None
  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

  156. None
  157. Proxies, servers, load balancers may buffer content

  158. Browsers may wait before starting to render HTML

  159. AJAX?

  160. JSON/XML

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

    );
  165. None
  166. None
  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