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.

Ded87c77266697ee6981c2277bb97633?s=128

Bastian Hofmann

January 29, 2016
Tweet

Transcript

  1. HTTP/2.0 101 Introduction @BastianHofmann

  2. HTTP/2.0 101 Introduction 101 Switching Protocols @BastianHofmann

  3. None
  4. None
  5. None
  6. Questions? Ask

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

  8. https://www.flickr.com/photos/duncan/3171592427/

  9. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg

  10. https://www.flickr.com/photos/neilsingapore/3567378586/

  11. HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991

  12. HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996

  13. HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999

  14. 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

  15. https://www.flickr.com/photos/offshore/1433329174/

  16. None
  17. http://www.impressivewebs.com/importance-of-website- performance-sources/

  18. Average page size

  19. Average asset count

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

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

  22. The internet gets slower and slower

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

  24. Slow connections

  25. High latency

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

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

  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/1.1 in detail

  36. User enters URL

  37. DNS lookup

  38. TCP connection

  39. TLS handshake

  40. This already takes time

  41. Already some Optimizations

  42. DNS caching

  43. Connection Keep Alive

  44. TLS optimizations

  45. https://istlsfastyet.com/

  46. None
  47. Finally: HTTP

  48. HTTP request

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

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

  52. HTTP response

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

  54. 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
  55. HTTP/2

  56. For the user it works the same

  57. No changes in Headers, Semantics etc

  58. Almost no changes in Headers, Semantics etc

  59. Protocol (h2) is established during TLS handshake

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

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

  62. TLS only

  63. Binary instead of textual

  64. Header compression

  65. Smaller requests and responses

  66. Less roundtrips

  67. Headers are received early (1st packet)

  68. HTTP Response body

  69. HTML response

  70. DOM parsing

  71. Rendering

  72. None
  73. Asset fetching

  74. Applying CSS

  75. Executing JS

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

  77. Blocking HTML rendering

  78. CSS

  79. JS

  80. CSS triggers repaints

  81. JS can manipulate the DOM

  82. JS can access attributes set by CSS

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

  85. Lots of assets

  86. HTTP/1.1

  87. Every request one TCP connection

  88. Connection Keep Alive

  89. Network congestion

  90. Concurrent connection limits

  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. Under fetching

  123. HTTP/2

  124. Only 1 connection

  125. Fully multiplexed

  126. No domain sharding needed

  127. Low overhead for a request

  128. No concatenation needed

  129. Better cache hit ratio

  130. More granular loading

  131. Less development overhead

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

  134. Critical rendering path

  135. None
  136. What is visible?

  137. None
  138. What is critical?

  139. None
  140. HTTP/1.1

  141. Inline critical assets

  142. Either inline always

  143. Caching?

  144. First request

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

  147. 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>
  148. Flushing critical stuff early

  149. Traditional approach

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

  154. 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
  155. None
  156. Problems

  157. Headers are already sent

  158. Redirects

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

  160. None
  161. Proxies, servers, load balancers may buffer content

  162. Browsers may wait before starting to render HTML

  163. AJAX?

  164. JSON

  165. None
  166. Caching what assets are needed

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

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

    );
  169. None
  170. None
  171. HTTP/2

  172. Server push

  173. Prioritize critical assets

  174. Browser Server Push CSS & JS :status: 200 Content-Type: text/html

    <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
  175. 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/
  176. Headers X-Associated-Content

  177. Automated learning

  178. Great

  179. When can I use it?

  180. Browser support

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

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

  183. Server support

  184. Nginx https://www.nginx.com/blog/nginx-1-9-5/

  185. https://httpd.apache.org/docs/2.4/mod/mod_http2.html Apache httpd

  186. Who is using it already?

  187. chrome://net-internals/#http2

  188. Performance best practices will evolve

  189. Monitor and test

  190. Expect more frequent HTTP protocol iterations

  191. Stay up to date

  192. https://joind.in/talk/fc942

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