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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  10. Average page
    size

    View full-size slide

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

    View full-size slide

  12. Average asset
    count

    View full-size slide

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

    View full-size slide

  14. The internet gets
    slower and slower

    View full-size slide

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

    View full-size slide

  16. Slow connections

    View full-size slide

  17. High latency

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. HTTP was designed
    for „simple“ web
    pages

    View full-size slide

  22. Lots of hacks
    around HTTP
    needed

    View full-size slide

  23. It needs to get
    better

    View full-size slide

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

    View full-size slide

  25. New possibilities
    for web
    applications

    View full-size slide

  26. Increased
    performance

    View full-size slide

  27. Old truths may
    not be valid
    anymore

    View full-size slide

  28. HTTP in detail

    View full-size slide

  29. HTTP/1.1 in detail

    View full-size slide

  30. User enters URL

    View full-size slide

  31. TCP connection

    View full-size slide

  32. TLS handshake

    View full-size slide

  33. This already takes
    time

    View full-size slide

  34. Finally: HTTP

    View full-size slide

  35. HTTP request

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

  39. HTTP response

    View full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. For the user it
    works the same

    View full-size slide

  43. No changes in
    Headers,
    Semantics etc

    View full-size slide

  44. Almost no changes
    in Headers,
    Semantics etc

    View full-size slide

  45. Protocol (h2) is
    established during
    TLS handshake

    View full-size slide

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

    View full-size slide

  47. Changes on
    transport level

    View full-size slide

  48. Binary instead of
    textual

    View full-size slide

  49. Multiple requests
    are multiplexed
    over one TCP
    connection

    View full-size slide

  50. Header
    compression

    View full-size slide

  51. Let’s look into
    these in more
    detail

    View full-size slide

  52. HTTP Response
    body

    View full-size slide

  53. HTML response

    View full-size slide

  54. Asset fetching

    View full-size slide

  55. Applying CSS

    View full-size slide

  56. Executing JS

    View full-size slide

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

    View full-size slide

  58. Blocking HTML
    rendering

    View full-size slide

  59. CSS triggers
    repaints

    View full-size slide

  60. JS can manipulate
    the DOM

    View full-size slide

  61. JS can access
    attributes set by
    CSS

    View full-size slide

  62. Lots of assets

    View full-size slide

  63. Every request one
    TCP connection

    View full-size slide

  64. Connection Keep
    Alive

    View full-size slide

  65. Every request
    blocks one TCP
    connection

    View full-size slide

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

    View full-size slide

  67. Network
    congestion

    View full-size slide

  68. Concurrent
    connection limits

    View full-size slide

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

    View full-size slide

  70. Domain sharding

    View full-size slide

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

    View full-size slide

  72. Shards should be
    persistent

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Additional
    handshakes and
    connections

    View full-size slide

  76. Network
    congestion

    View full-size slide

  77. TCP Slow Start

    View full-size slide

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

    View full-size slide

  79. Ideal number of
    shards

    View full-size slide

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

    View full-size slide

  81. One request is
    blocking one TCP
    Connection

    View full-size slide

  82. A HTTP request is
    expensive

    View full-size slide

  83. Smaller requests
    and responses

    View full-size slide

  84. Content
    compression

    View full-size slide

  85. Header
    compression

    View full-size slide

  86. Less roundtrips

    View full-size slide

  87. Headers are
    received early
    (1st packet)

    View full-size slide

  88. Less requests

    View full-size slide

  89. Concatenation

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  92. How to bundle

    View full-size slide

  93. Over fetching

    View full-size slide

  94. 90% CSS unused

    View full-size slide

  95. Under fetching

    View full-size slide

  96. Cache
    invalidation

    View full-size slide

  97. Only 1
    connection

    View full-size slide

  98. Fully multiplexed

    View full-size slide

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

    View full-size slide

  100. No domain
    sharding needed

    View full-size slide

  101. Low overhead for
    a request

    View full-size slide

  102. No
    concatenation
    needed?

    View full-size slide

  103. Less
    concatenation
    needed

    View full-size slide

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

    View full-size slide

  105. Less unused
    content
    transported

    View full-size slide

  106. Better cache hit
    ratio

    View full-size slide

  107. More granular
    loading

    View full-size slide

  108. Less
    development
    overhead

    View full-size slide

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

    View full-size slide

  110. Critical rendering
    path

    View full-size slide

  111. What is visible?

    View full-size slide

  112. What is critical?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  115. Profile Publications Publication
    Publication
    Publication
    AboutMe
    LeftColumn Image
    Menu

    View full-size slide

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

    View full-size slide

  117. Inline critical
    assets

    View full-size slide

  118. Either inline always

    View full-size slide

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



    … your critical css



    content



    View full-size slide

  120. First request

    View full-size slide

  121. 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 full-size slide

  122. Subsequent request
    (if Cookie set)

    View full-size slide

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



    // loaded from cache


    content


    View full-size slide

  124. Flushing critical
    stuff early

    View full-size slide

  125. Traditional
    approach

    View full-size slide

  126. 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 full-size slide

  127. HTTP supports
    streaming

    View full-size slide

  128. Browser Server
    GET /foo.html

    View full-size slide

  129. Headers are
    already sent

    View full-size slide

  130. Browser Server
    GET /foo.html

    View full-size slide

  131. Sent headers can
    not be modified

    View full-size slide

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

    View full-size slide

  133. Proxies, servers,
    load balancers
    may buffer
    content

    View full-size slide

  134. Browsers may
    wait before
    starting to render
    HTML

    View full-size slide

  135. Prioritize critical
    assets

    View full-size slide

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

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

    View full-size slide

  137. 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 full-size slide

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

    View full-size slide

  139. Automated
    learning

    View full-size slide

  140. When can I use
    it?

    View full-size slide

  141. Browser support

    View full-size slide

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

    View full-size slide

  143. Server support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  146. Who is using it
    already?

    View full-size slide

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

    View full-size slide

  148. Performance
    best practices will
    evolve

    View full-size slide

  149. Activate HTTP/2

    View full-size slide

  150. Monitor and test

    View full-size slide

  151. Expect more
    frequent HTTP
    protocol
    iterations

    View full-size slide

  152. Stay up to date

    View full-size slide

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

    View full-size slide