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

HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction

Bastian Hofmann

October 03, 2015
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

Transcript

  1. HTTP/2.0
    101 Introduction
    @BastianHofmann

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Average page
    size

    View full-size slide

  13. Average asset
    count

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. The internet gets
    slower and slower

    View full-size slide

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

    View full-size slide

  18. Slow connections

    View full-size slide

  19. High latency

    View full-size slide

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

    View full-size slide

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

    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. Before we start

    View full-size slide

  29. A few words
    about me

    View full-size slide

  30. Questions? Ask

    View full-size slide

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

    View full-size slide

  32. HTTP in detail

    View full-size slide

  33. The anatomy of a
    page load

    View full-size slide

  34. Every request one
    TCP connection

    View full-size slide

  35. User enters URL

    View full-size slide

  36. TCP connection

    View full-size slide

  37. TLS handshake

    View full-size slide

  38. This already takes
    time

    View full-size slide

  39. Optimizations

    View full-size slide

  40. Connection Keep
    Alive

    View full-size slide

  41. TLS optimizations

    View full-size slide

  42. https://istlsfastyet.com/

    View full-size slide

  43. Finally: HTTP

    View full-size slide

  44. GET / HTTP/1.1
    Host: www.researchgate.net
    HTTP/1.1 200 OK
    Content-Type: text/plain
    Content

    View full-size slide

  45. HTTP request

    View full-size slide

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

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

    View full-size slide

  48. HTTP response

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

  50. For the user it
    works the same

    View full-size slide

  51. No changes in
    Headers,
    Semantics etc

    View full-size slide

  52. GET / HTTP/2.0
    Host: www.researchgate.net
    HTTP/2.0 200 OK
    Content-Type: text/plain
    Content

    View full-size slide

  53. Changes on
    transport level

    View full-size slide

  54. Binary instead of
    textual

    View full-size slide

  55. Header
    compression

    View full-size slide

  56. Smaller requests
    and responses

    View full-size slide

  57. Less roundtrips

    View full-size slide

  58. Headers are
    received early
    (1st packet)

    View full-size slide

  59. Response body

    View full-size slide

  60. HTML response

    View full-size slide

  61. Asset fetching

    View full-size slide

  62. Applying CSS

    View full-size slide

  63. Executing JS

    View full-size slide

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

    View full-size slide

  65. Blocking HTML
    rendering

    View full-size slide

  66. CSS triggers
    repaints

    View full-size slide

  67. JS can manipulate
    the DOM

    View full-size slide

  68. JS can access
    attributes set by
    CSS

    View full-size slide

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






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


    View full-size slide

  70. Every request one
    TCP connection

    View full-size slide

  71. Concurrent
    connection limits

    View full-size slide

  72. Network
    congestion

    View full-size slide

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

    View full-size slide

  74. Domain sharding

    View full-size slide

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

    View full-size slide

  76. Shards should be
    persistent

    View full-size slide

  77. Additional
    handshakes and
    connections

    View full-size slide

  78. Network
    congestion

    View full-size slide

  79. TCP Slow Start

    View full-size slide

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

    View full-size slide

  81. Ideal number of
    shards

    View full-size slide

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

    View full-size slide

  83. Less content

    View full-size slide

  84. Image
    compression

    View full-size slide

  85. Minification

    View full-size slide

  86. Debugging
    problems

    View full-size slide

  87. Less requests

    View full-size slide

  88. Concatenation

    View full-size slide

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

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

    View full-size slide

  91. How to bundle

    View full-size slide

  92. Over fetching

    View full-size slide

  93. 90% CSS unused

    View full-size slide

  94. Cache
    invalidation

    View full-size slide

  95. Only 1
    connection

    View full-size slide

  96. Fully multiplexed

    View full-size slide

  97. No domain
    sharding needed

    View full-size slide

  98. Low overhead for
    a request

    View full-size slide

  99. No
    concatenation
    needed

    View full-size slide

  100. Better cache hit
    ratio

    View full-size slide

  101. More granular
    loading

    View full-size slide

  102. Less
    development
    overhead

    View full-size slide

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

    View full-size slide

  104. Critical rendering
    path

    View full-size slide

  105. What is visible?

    View full-size slide

  106. What is critical?

    View full-size slide

  107. Inline critical
    assets

    View full-size slide

  108. Either inline always

    View full-size slide

  109. First request

    View full-size slide

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

  111. Subsequent request
    (if Cookie set)

    View full-size slide

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



    // loaded from cache


    content


    View full-size slide

  113. Flushing critical
    stuff early

    View full-size slide

  114. Traditional
    approach

    View full-size slide

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

  116. HTTP supports
    streaming

    View full-size slide

  117. Browser Server
    GET /foo.html

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  120. Headers are
    already sent

    View full-size slide

  121. Proxies, servers,
    load balancers
    may buffer
    content

    View full-size slide

  122. Browsers may
    wait before
    starting to render
    HTML

    View full-size slide

  123. Caching what
    assets are
    needed

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  126. Prioritize critical
    assets

    View full-size slide

  127. Browser Server
    Push CSS & JS
    HTTP/1.1 200 OK
    Content-Type: text/html

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

    View full-size slide

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

  129. Headers
    X-Associated-Content

    View full-size slide

  130. Automated
    learning

    View full-size slide

  131. When can I use
    it?

    View full-size slide

  132. Browser support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  135. Server support

    View full-size slide

  136. Nginx
    http://nginx.org/en/docs/http/ngx_http_v2_module.html

    View full-size slide

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

    View full-size slide

  138. Performance
    best practices will
    evolve

    View full-size slide

  139. Stay up to date

    View full-size slide

  140. Expect more
    frequent HTTP
    protocol
    iterations

    View full-size slide

  141. https://joind.in/15435

    View full-size slide

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

    View full-size slide