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

HTTP/2.0 Introduction

HTTP/2.0 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, what HTTP/2.0 is all about, what it means for your web applications and how it can help your application's performance.

Bastian Hofmann

August 23, 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. There are a lot of „hacks“ needed to get a

    web application fast
  14. HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015

  15. New possibilities for web applications

  16. Increased performance

  17. Old truths may not be valid anymore

  18. Before we start

  19. A few words about me

  20. None
  21. None
  22. None
  23. None
  24. Questions? Ask

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

  26. The anatomy of a page load

  27. None
  28. Every request one TCP connection

  29. None
  30. User enters URL

  31. DNS lookup

  32. TCP connection

  33. TLS handshake

  34. This already takes time

  35. DNS caching

  36. Connection Keep Alive

  37. TLS optimizations

  38. https://istlsfastyet.com/

  39. None
  40. Finally: HTTP

  41. GET  /  HTTP/1.1   Host:  www.researchgate.net   HTTP/1.1  200  OK

      Content-­‐Type:  text/plain   Content
  42. HTTP request

  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   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  
  47. HTML response

  48. DOM parsing

  49. Rendering

  50. Asset fetching

  51. Applying CSS

  52. Executing JS

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

  54. Blocking HTML rendering

  55. CSS

  56. JS

  57. 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>
  58. JS can manipulate the DOM

  59. <script src="demo_async.js" async></script>

  60. Average page size

  61. Average asset count

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

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

  64. Every request one TCP connection

  65. Concurrent connection limits

  66. Network congestion

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

  68. Domain sharding

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

  70. Shards should be persistent

  71. Additional handshakes and connections

  72. Network congestion

  73. TCP Slow Start

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

  75. Ideal number of shards

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

  77. Page sizes

  78. Less content

  79. GZIP

  80. Image compression

  81. Minification

  82. JS

  83. CSS

  84. HTML

  85. Debugging problems

  86. None
  87. Sourcemaps

  88. Less requests

  89. Concatenation

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

  92. Spritemaps

  93. None
  94. How to bundle

  95. Over fetching

  96. 90% CSS unused

  97. Cache invalidation

  98. Larger assets

  99. Critical rendering path

  100. None
  101. What is visible?

  102. What is critical?

  103. None
  104. Inline critical assets

  105. Either inline always

  106. Caching?

  107. First request

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

  110. 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>
  111. Flushing critical stuff early

  112. Traditional approach

  113. 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>
  114. HTTP supports streaming

  115. 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
  116. None
  117. Problems

  118. Headers are already sent

  119. Redirects

  120. None
  121. Proxies, servers, load balancers may buffer content

  122. Browsers may wait before starting to render HTML

  123. AJAX?

  124. JSON/XML

  125. None
  126. Caching what assets are needed

  127. GET  /literature.AddPublicationsDialog   HTTP/1.1  200  OK   Content-­‐Type:  application/json  

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

       "css":  ["AddPublicationsDialog.css"],          "js":  ["AddPublicationsDialogView.js"],          "html":  ["addConferencePaperSelection.html"]      }   );
  129. None
  130. None
  131. Rant

  132. Single page apps

  133. It takes longer until something is visible

  134. Cost of server side rendering

  135. None
  136. Compared with…

  137. None
  138. https://www.flickr.com/photos/91026431@N05/8497636527/

  139. Slow connections

  140. High latency

  141. The internet gets slower and slower

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

  143. Lots of hacks around HTTP needed

  144. It needs to get better

  145. SPDY

  146. HTTP/2.0

  147. For the user it works the same

  148. No changes in Headers, Semantics etc

  149. GET  /  HTTP/2.0   Host:  www.researchgate.net   HTTP/2.0  200  OK

      Content-­‐Type:  text/plain   Content
  150. Changes on transport level

  151. TLS only

  152. Binary instead of textual

  153. Header compression

  154. Smaller requests and responses

  155. Headers are received early (1st packet)

  156. Fully multiplexed

  157. 1 connection for parallelism

  158. No domain sharding needed

  159. Low overhead for a request

  160. No concatenation needed

  161. Better cache hit ratio

  162. More granular loading

  163. Less development overhead

  164. None
  165. https://www.flickr.com/photos/ksayer/5614813296/

  166. Server push

  167. Prioritize critical assets

  168. 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
  169. Great

  170. When can I use it?

  171. Browser support

  172. http://caniuse.com/#feat=http2

  173. http://caniuse.com/#search=spdy

  174. Server support

  175. Nginx https://www.nginx.com/blog/early-alpha-patch-http2/

  176. https://github.com/icing/mod_h2 Apache httpd

  177. Performance best practices will evolve

  178. Stay up to date

  179. Expect more frequent HTTP protocol iterations

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