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

January 29, 2016
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. Questions? Ask

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  14. Average page
    size

    View full-size slide

  15. Average asset
    count

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. The internet gets
    slower and slower

    View full-size slide

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

    View full-size slide

  20. Slow connections

    View full-size slide

  21. High latency

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Lots of hacks
    around HTTP
    needed

    View full-size slide

  25. It needs to get
    better

    View full-size slide

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

    View full-size slide

  27. New possibilities
    for web
    applications

    View full-size slide

  28. Increased
    performance

    View full-size slide

  29. Old truths may
    not be valid
    anymore

    View full-size slide

  30. HTTP/1.1 in detail

    View full-size slide

  31. User enters URL

    View full-size slide

  32. TCP connection

    View full-size slide

  33. TLS handshake

    View full-size slide

  34. This already takes
    time

    View full-size slide

  35. Already some
    Optimizations

    View full-size slide

  36. Connection Keep
    Alive

    View full-size slide

  37. TLS optimizations

    View full-size slide

  38. https://istlsfastyet.com/

    View full-size slide

  39. Finally: HTTP

    View full-size slide

  40. HTTP request

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  44. HTTP response

    View full-size slide

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

    View full-size slide

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

  47. For the user it
    works the same

    View full-size slide

  48. No changes in
    Headers,
    Semantics etc

    View full-size slide

  49. Almost no changes
    in Headers,
    Semantics etc

    View full-size slide

  50. Protocol (h2) is
    established during
    TLS handshake

    View full-size slide

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

    View full-size slide

  52. Changes on
    transport level

    View full-size slide

  53. Binary instead of
    textual

    View full-size slide

  54. Header
    compression

    View full-size slide

  55. Smaller requests
    and responses

    View full-size slide

  56. Less roundtrips

    View full-size slide

  57. Headers are
    received early
    (1st packet)

    View full-size slide

  58. HTTP Response
    body

    View full-size slide

  59. HTML response

    View full-size slide

  60. Asset fetching

    View full-size slide

  61. Applying CSS

    View full-size slide

  62. Executing JS

    View full-size slide

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

    View full-size slide

  64. Blocking HTML
    rendering

    View full-size slide

  65. CSS triggers
    repaints

    View full-size slide

  66. JS can manipulate
    the DOM

    View full-size slide

  67. JS can access
    attributes set by
    CSS

    View full-size slide

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






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


    View full-size slide

  69. Lots of assets

    View full-size slide

  70. Every request one
    TCP connection

    View full-size slide

  71. Connection Keep
    Alive

    View full-size slide

  72. Network
    congestion

    View full-size slide

  73. Concurrent
    connection limits

    View full-size slide

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

    View full-size slide

  75. Domain sharding

    View full-size slide

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

    View full-size slide

  77. Shards should be
    persistent

    View full-size slide

  78. Additional
    handshakes and
    connections

    View full-size slide

  79. Network
    congestion

    View full-size slide

  80. TCP Slow Start

    View full-size slide

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

    View full-size slide

  82. Ideal number of
    shards

    View full-size slide

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

    View full-size slide

  84. Less content

    View full-size slide

  85. Image
    compression

    View full-size slide

  86. Minification

    View full-size slide

  87. Debugging
    problems

    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. Cache
    invalidation

    View full-size slide

  96. Under fetching

    View full-size slide

  97. Only 1
    connection

    View full-size slide

  98. Fully multiplexed

    View full-size slide

  99. No domain
    sharding needed

    View full-size slide

  100. Low overhead for
    a request

    View full-size slide

  101. No
    concatenation
    needed

    View full-size slide

  102. Better cache hit
    ratio

    View full-size slide

  103. More granular
    loading

    View full-size slide

  104. Less
    development
    overhead

    View full-size slide

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

    View full-size slide

  106. Critical rendering
    path

    View full-size slide

  107. What is visible?

    View full-size slide

  108. What is critical?

    View full-size slide

  109. Inline critical
    assets

    View full-size slide

  110. Either inline always

    View full-size slide

  111. First request

    View full-size slide

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

  113. Subsequent request
    (if Cookie set)

    View full-size slide

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



    // loaded from cache


    content


    View full-size slide

  115. Flushing critical
    stuff early

    View full-size slide

  116. Traditional
    approach

    View full-size slide

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

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

    View full-size slide

  121. Browser Server
    GET /foo.html

    View full-size slide

  122. Headers are
    already sent

    View full-size slide

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

    View full-size slide

  124. Proxies, servers,
    load balancers
    may buffer
    content

    View full-size slide

  125. Browsers may
    wait before
    starting to render
    HTML

    View full-size slide

  126. Caching what
    assets are
    needed

    View full-size slide

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

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

    View full-size slide

  129. Prioritize critical
    assets

    View full-size slide

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

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

  132. Headers
    X-Associated-Content

    View full-size slide

  133. Automated
    learning

    View full-size slide

  134. When can I use
    it?

    View full-size slide

  135. Browser support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  138. Server support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  141. Who is using it
    already?

    View full-size slide

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

    View full-size slide

  143. Performance
    best practices will
    evolve

    View full-size slide

  144. Monitor and test

    View full-size slide

  145. Expect more
    frequent HTTP
    protocol
    iterations

    View full-size slide

  146. Stay up to date

    View full-size slide

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

    View full-size slide

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

    View full-size slide