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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

  12. Average page
    size

    View Slide

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

    View Slide

  14. Average asset
    count

    View Slide

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

    View Slide

  16. The internet gets
    slower and slower

    View Slide

  17. https://www.flickr.com/photos/[email protected]/8497636527/

    View Slide

  18. Slow connections

    View Slide

  19. High latency

    View Slide

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

    View Slide

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

    View Slide

  22. Lots of hacks
    around HTTP
    needed

    View Slide

  23. It needs to get
    better

    View Slide

  24. SPDY

    View Slide

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

    View Slide

  26. New possibilities
    for web
    applications

    View Slide

  27. Increased
    performance

    View Slide

  28. Old truths may
    not be valid
    anymore

    View Slide

  29. HTTP/1.1 in detail

    View Slide

  30. User enters URL

    View Slide

  31. DNS lookup

    View Slide

  32. TCP connection

    View Slide

  33. TLS handshake

    View Slide

  34. This already takes
    time

    View Slide

  35. Finally: HTTP

    View Slide

  36. HTTP request

    View Slide

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

    View Slide

  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: …

    View Slide

  39. https://www.flickr.com/photos/[email protected]/5580348753/

    View Slide

  40. HTTP response

    View Slide

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

    View Slide

  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

    View Slide

  43. HTTP/2

    View Slide

  44. For the user it
    works the same

    View Slide

  45. No changes in
    Headers,
    Semantics etc

    View Slide

  46. Almost no changes
    in Headers,
    Semantics etc

    View Slide

  47. Protocol (h2) is
    established during
    TLS handshake

    View Slide

  48. :authority: www.researchgate.net
    :method: GET
    :path: /
    :scheme: https
    :status: 200
    Content-Type: text/plain
    Content

    View Slide

  49. Changes on
    transport level

    View Slide

  50. TLS only

    View Slide

  51. Binary instead of
    textual

    View Slide

  52. Multiple requests
    are multiplexed
    over one TCP
    connection

    View Slide

  53. Server Push

    View Slide

  54. Header
    compression

    View Slide

  55. Smaller requests
    and responses

    View Slide

  56. Less roundtrips

    View Slide

  57. Headers are
    received early
    (1st packet)

    View Slide

  58. HTTP Response
    body

    View Slide

  59. HTML response

    View Slide

  60. DOM parsing

    View Slide

  61. Rendering

    View Slide

  62. View Slide

  63. Asset fetching

    View Slide

  64. Applying CSS

    View Slide

  65. Executing JS

    View Slide

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

    View Slide

  67. Blocking HTML
    rendering

    View Slide

  68. CSS

    View Slide

  69. JS

    View Slide

  70. CSS triggers
    repaints

    View Slide

  71. JS can manipulate
    the DOM

    View Slide

  72. JS can access
    attributes set by
    CSS

    View Slide

  73. HTTP/1.1 200 OK
    Content-Type: text/html






    <br/>// some JS<br/>


    View Slide


  74. View Slide

  75. Lots of assets

    View Slide

  76. HTTP/1.1

    View Slide

  77. Every request one
    TCP connection

    View Slide

  78. Connection Keep
    Alive

    View Slide

  79. Every request
    blocks one TCP
    connection

    View Slide

  80. Network
    congestion

    View Slide

  81. Concurrent
    connection limits

    View Slide

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

    View Slide

  83. Domain sharding

    View Slide

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

    View Slide

  85. Shards should be
    persistent

    View Slide

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

    View Slide

  87. Additional
    handshakes and
    connections

    View Slide

  88. Network
    congestion

    View Slide

  89. TCP Slow Start

    View Slide

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

    View Slide

  91. Ideal number of
    shards

    View Slide

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

    View Slide

  93. Page sizes

    View Slide

  94. Less content

    View Slide

  95. GZIP

    View Slide

  96. Image
    compression

    View Slide

  97. Minification

    View Slide

  98. JS

    View Slide

  99. CSS

    View Slide

  100. HTML

    View Slide

  101. Debugging
    problems

    View Slide

  102. View Slide

  103. Sourcemaps

    View Slide

  104. => More requests

    View Slide

  105. Less requests

    View Slide

  106. Concatenation

    View Slide

  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

    View Slide

  108. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js

    View Slide

  109. Spritemaps

    View Slide

  110. View Slide

  111. How to bundle

    View Slide

  112. Over fetching

    View Slide

  113. 90% CSS unused

    View Slide

  114. Under fetching

    View Slide

  115. Cache
    invalidation

    View Slide

  116. HTTP/2

    View Slide

  117. Only 1
    connection

    View Slide

  118. Fully multiplexed

    View Slide

  119. No domain
    sharding needed

    View Slide

  120. Low overhead for
    a request

    View Slide

  121. No
    concatenation
    needed

    View Slide

  122. Better cache hit
    ratio

    View Slide

  123. More granular
    loading

    View Slide

  124. Less
    development
    overhead

    View Slide

  125. View Slide

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

    View Slide

  127. Critical rendering
    path

    View Slide

  128. View Slide

  129. What is visible?

    View Slide

  130. View Slide

  131. What is critical?

    View Slide

  132. View Slide

  133. HTTP/1.1

    View Slide

  134. Inline critical
    assets

    View Slide

  135. Either inline always

    View Slide

  136. Caching?

    View Slide

  137. First request

    View Slide

  138. HTTP/1.1 200 OK
    Content-Type: text/html



    … your critical css



    content
    load main.css async
    set cookie that other css was loaded


    View Slide

  139. Subsequent request
    (if Cookie set)

    View Slide

  140. HTTP/1.1 200 OK
    Content-Type: text/html



    // loaded from cache


    content


    View Slide

  141. Flushing critical
    stuff early

    View Slide

  142. Traditional
    approach

    View Slide

  143. Browser Server
    GET css & js
    HTTP/1.1 200 OK
    Content-Type: text/html

    <br/>GET /foo.html<br/></head><body></body></html><br/>

    View Slide

  144. https://developer.mozilla.org/en-US/docs/Web/HTTP/
    Controlling_DNS_prefetching

    View Slide

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

    View Slide

  146. HTTP supports
    streaming

    View Slide

  147. Browser Server
    GET /foo.html

    View Slide

  148. View Slide

  149. Problems

    View Slide

  150. Headers are
    already sent

    View Slide

  151. Redirects

    View Slide

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

    View Slide

  153. View Slide

  154. Proxies, servers,
    load balancers
    may buffer
    content

    View Slide

  155. Browsers may
    wait before
    starting to render
    HTML

    View Slide

  156. AJAX?

    View Slide

  157. JSON

    View Slide

  158. View Slide

  159. Caching what
    assets are
    needed

    View Slide

  160. GET /literature.AddPublicationsDialog
    HTTP/1.1 200 OK
    Content-Type: application/json
    {
    "data": {...},
    "css": ["AddPublicationsDialog.css"],
    "js": ["AddPublicationsDialogView.js"],
    "html": ["addConferencePaperSelection.html"]
    }

    View Slide

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

    View Slide

  162. View Slide

  163. View Slide

  164. HTTP/2

    View Slide

  165. Server push

    View Slide

  166. Prioritize critical
    assets

    View Slide

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

    <br/></head><body></body></html><br/>GET /foo.html<br/>

    View Slide

  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! '
    );
    }).listen(443);
    https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/

    View Slide

  169. Headers
    X-Associated-Content

    View Slide

  170. Automated
    learning

    View Slide

  171. Great

    View Slide

  172. When can I use
    it?

    View Slide

  173. Browser support

    View Slide

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

    View Slide

  175. Server support

    View Slide

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

    View Slide

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

    View Slide

  178. Who is using it
    already?

    View Slide

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

    View Slide

  180. Performance
    best practices will
    evolve

    View Slide

  181. Monitor and test

    View Slide

  182. Expect more
    frequent HTTP
    protocol
    iterations

    View Slide

  183. Stay up to date

    View Slide

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

    View Slide

  185. http://twitter.com/BastianHofmann
    http://lanyrd.com/people/BastianHofmann
    http://speakerdeck.com/u/bastianhofmann
    [email protected]

    View Slide