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

Bastian Hofmann

June 30, 2017
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. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Average page
    size

    View Slide

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

    View Slide

  17. Average asset
    count

    View Slide

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

    View Slide

  19. The internet gets
    slower and slower

    View Slide

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

    View Slide

  21. Slow connections

    View Slide

  22. High latency

    View Slide

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

    View Slide

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

    View Slide

  25. View Slide

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

    View Slide

  27. HTTP was designed
    for „simple“ web
    pages

    View Slide

  28. Lots of hacks
    around HTTP
    needed

    View Slide

  29. It needs to get
    better

    View Slide

  30. SPDY

    View Slide

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

    View Slide

  32. New possibilities
    for web
    applications

    View Slide

  33. Increased
    performance

    View Slide

  34. Old truths may
    not be valid
    anymore

    View Slide

  35. HTTP in detail

    View Slide

  36. HTTP/1.1 in detail

    View Slide

  37. User enters URL

    View Slide

  38. DNS lookup

    View Slide

  39. TCP connection

    View Slide

  40. TLS handshake

    View Slide

  41. This already takes
    time

    View Slide

  42. Finally: HTTP

    View Slide

  43. HTTP request

    View Slide

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

    View Slide

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

  46. https://www.flickr.com/photos/40987321@N02/5580348753/

    View Slide

  47. HTTP response

    View Slide

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

    View Slide

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

  50. HTTP/2

    View Slide

  51. For the user it
    works the same

    View Slide

  52. No changes in
    Headers,
    Semantics etc

    View Slide

  53. Almost no changes
    in Headers,
    Semantics etc

    View Slide

  54. Protocol (h2) is
    established during
    TLS handshake

    View Slide

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

    View Slide

  56. Changes on
    transport level

    View Slide

  57. TLS only

    View Slide

  58. Binary instead of
    textual

    View Slide

  59. Multiple requests
    are multiplexed
    over one TCP
    connection

    View Slide

  60. Server Push

    View Slide

  61. Header
    compression

    View Slide

  62. Let’s look into
    these in more
    detail

    View Slide

  63. HTTP Response
    body

    View Slide

  64. HTML response

    View Slide

  65. DOM parsing

    View Slide

  66. Rendering

    View Slide

  67. View Slide

  68. Asset fetching

    View Slide

  69. Applying CSS

    View Slide

  70. Executing JS

    View Slide

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

    View Slide

  72. Blocking HTML
    rendering

    View Slide

  73. CSS triggers
    repaints

    View Slide

  74. JS can manipulate
    the DOM

    View Slide

  75. JS can access
    attributes set by
    CSS

    View Slide

  76. Lots of assets

    View Slide

  77. HTTP/1.1

    View Slide

  78. Every request one
    TCP connection

    View Slide

  79. Connection Keep
    Alive

    View Slide

  80. Every request
    blocks one TCP
    connection

    View Slide

  81. Easy, let’s just open
    a hundred TCP
    connections

    View Slide

  82. Network
    congestion

    View Slide

  83. Concurrent
    connection limits

    View Slide

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

    View Slide

  85. Domain sharding

    View Slide

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

    View Slide

  87. Shards should be
    persistent

    View Slide

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

    View Slide

  89. Easy, let’s just use
    20 domain shards

    View Slide

  90. Additional
    handshakes and
    connections

    View Slide

  91. Network
    congestion

    View Slide

  92. TCP Slow Start

    View Slide

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

    View Slide

  94. Ideal number of
    shards

    View Slide

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

    View Slide

  96. One request is
    blocking one TCP
    Connection

    View Slide

  97. A HTTP request is
    expensive

    View Slide

  98. Smaller requests
    and responses

    View Slide

  99. Content
    compression

    View Slide

  100. HTTP/2

    View Slide

  101. Header
    compression

    View Slide

  102. Less roundtrips

    View Slide

  103. Headers are
    received early
    (1st packet)

    View Slide

  104. Less requests

    View Slide

  105. Concatenation

    View Slide

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

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

    View Slide

  108. Spritemaps

    View Slide

  109. View Slide

  110. How to bundle

    View Slide

  111. Over fetching

    View Slide

  112. 90% CSS unused

    View Slide

  113. Under fetching

    View Slide

  114. Cache
    invalidation

    View Slide

  115. HTTP/2

    View Slide

  116. Only 1
    connection

    View Slide

  117. Fully multiplexed

    View Slide

  118. https://www.nginx.com/blog/7-tips-for-faster-http2-
    performance/

    View Slide

  119. No domain
    sharding needed

    View Slide

  120. Low overhead for
    a request

    View Slide

  121. No
    concatenation
    needed?

    View Slide

  122. Less
    concatenation
    needed

    View Slide

  123. https://medium.com/@asyncmax/the-right-way-to-
    bundle-your-assets-for-faster-sites-over-
    http-2-437c37efe3ff

    View Slide

  124. Less unused
    content
    transported

    View Slide

  125. Better cache hit
    ratio

    View Slide

  126. More granular
    loading

    View Slide

  127. Less
    development
    overhead

    View Slide

  128. View Slide

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

    View Slide

  130. Critical rendering
    path

    View Slide

  131. What is visible?

    View Slide

  132. View Slide

  133. What is critical?

    View Slide

  134. View Slide

  135. Profile Publications Publication
    Publication
    Publication
    AboutMe
    LeftColumn Image
    Menu
    Institution

    View Slide

  136. Profile Publications Publication
    Publication
    Publication
    AboutMe
    LeftColumn Image
    Menu
    Institution
    ONLY VISIBLE BELOW THE FOLD

    View Slide

  137. Profile Publications Publication
    Publication
    Publication
    AboutMe
    LeftColumn Image
    Menu

    View Slide

  138. Profile Publications Publication
    Publication
    Publication
    AboutMe
    LeftColumn Image
    Menu
    Institution
    LOAD ASYNC WITH JS

    View Slide

  139. Inline critical
    assets

    View Slide

  140. Either inline always

    View Slide

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



    … your critical css



    content



    View Slide

  142. Caching?

    View Slide

  143. First request

    View Slide

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

  145. Subsequent request
    (if Cookie set)

    View Slide

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



    // loaded from cache


    content


    View Slide

  147. Flushing critical
    stuff early

    View Slide

  148. Traditional
    approach

    View Slide

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

  150. HTTP supports
    streaming

    View Slide

  151. Browser Server
    GET /foo.html

    View Slide

  152. View Slide

  153. Problems

    View Slide

  154. Headers are
    already sent

    View Slide

  155. Browser Server
    GET /foo.html

    View Slide

  156. Sent headers can
    not be modified

    View Slide

  157. Redirects

    View Slide

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

    View Slide

  159. View Slide

  160. Proxies, servers,
    load balancers
    may buffer
    content

    View Slide

  161. Browsers may
    wait before
    starting to render
    HTML

    View Slide

  162. HTTP/2

    View Slide

  163. Server push

    View Slide

  164. Prioritize critical
    assets

    View Slide

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

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

    View Slide

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

    View Slide

  167. Headers

    View Slide

  168. https://httpd.apache.org/docs/2.4/howto/
    http2.html#push

    View Slide

  169. Automated
    learning

    View Slide

  170. Caching?

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

    View Slide

  182. Monitor and test

    View Slide

  183. Expect more
    frequent HTTP
    protocol
    iterations

    View Slide

  184. Stay up to date

    View Slide

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

    View Slide