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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

  11. View Slide

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

    View Slide

  13. Average page
    size

    View Slide

  14. Average asset
    count

    View Slide

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

    View Slide

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

    View Slide

  17. The internet gets
    slower and slower

    View Slide

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

    View Slide

  19. Slow connections

    View Slide

  20. High latency

    View Slide

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

    View Slide

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

    View Slide

  23. Lots of hacks
    around HTTP
    needed

    View Slide

  24. It needs to get
    better

    View Slide

  25. SPDY

    View Slide

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

    View Slide

  27. New possibilities
    for web
    applications

    View Slide

  28. Increased
    performance

    View Slide

  29. Old truths may
    not be valid
    anymore

    View Slide

  30. Before we start

    View Slide

  31. A few words
    about me

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Questions? Ask

    View Slide

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

    View Slide

  38. HTTP in detail

    View Slide

  39. The anatomy of a
    page load

    View Slide

  40. View Slide

  41. Every request one
    TCP connection

    View Slide

  42. View Slide

  43. User enters URL

    View Slide

  44. DNS lookup

    View Slide

  45. TCP connection

    View Slide

  46. TLS handshake

    View Slide

  47. This already takes
    time

    View Slide

  48. Optimizations

    View Slide

  49. DNS caching

    View Slide

  50. Connection Keep
    Alive

    View Slide

  51. TLS optimizations

    View Slide

  52. https://istlsfastyet.com/

    View Slide

  53. View Slide

  54. Finally: HTTP

    View Slide

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

    View Slide

  56. HTTP request

    View Slide

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

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

    View Slide

  59. HTTP response

    View Slide

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

  61. HTTP/2

    View Slide

  62. For the user it
    works the same

    View Slide

  63. No changes in
    Headers,
    Semantics etc

    View Slide

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

    View Slide

  65. Changes on
    transport level

    View Slide

  66. TLS only

    View Slide

  67. Binary instead of
    textual

    View Slide

  68. Header
    compression

    View Slide

  69. Smaller requests
    and responses

    View Slide

  70. Less roundtrips

    View Slide

  71. Headers are
    received early
    (1st packet)

    View Slide

  72. Response body

    View Slide

  73. HTML response

    View Slide

  74. DOM parsing

    View Slide

  75. Rendering

    View Slide

  76. Asset fetching

    View Slide

  77. Applying CSS

    View Slide

  78. Executing JS

    View Slide

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

    View Slide

  80. Blocking HTML
    rendering

    View Slide

  81. CSS

    View Slide

  82. JS

    View Slide

  83. CSS triggers
    repaints

    View Slide

  84. JS can manipulate
    the DOM

    View Slide

  85. JS can access
    attributes set by
    CSS

    View Slide

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






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


    View Slide


  87. View Slide

  88. Every request one
    TCP connection

    View Slide

  89. Concurrent
    connection limits

    View Slide

  90. Network
    congestion

    View Slide

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

    View Slide

  92. Domain sharding

    View Slide

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

    View Slide

  94. Shards should be
    persistent

    View Slide

  95. Additional
    handshakes and
    connections

    View Slide

  96. Network
    congestion

    View Slide

  97. TCP Slow Start

    View Slide

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

    View Slide

  99. Ideal number of
    shards

    View Slide

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

    View Slide

  101. Page sizes

    View Slide

  102. Less content

    View Slide

  103. GZIP

    View Slide

  104. Image
    compression

    View Slide

  105. Minification

    View Slide

  106. JS

    View Slide

  107. CSS

    View Slide

  108. HTML

    View Slide

  109. Debugging
    problems

    View Slide

  110. View Slide

  111. Sourcemaps

    View Slide

  112. Less requests

    View Slide

  113. Concatenation

    View Slide

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

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

    View Slide

  116. Spritemaps

    View Slide

  117. View Slide

  118. How to bundle

    View Slide

  119. Over fetching

    View Slide

  120. 90% CSS unused

    View Slide

  121. Cache
    invalidation

    View Slide

  122. HTTP/2

    View Slide

  123. Only 1
    connection

    View Slide

  124. Fully multiplexed

    View Slide

  125. No domain
    sharding needed

    View Slide

  126. Low overhead for
    a request

    View Slide

  127. No
    concatenation
    needed

    View Slide

  128. Better cache hit
    ratio

    View Slide

  129. More granular
    loading

    View Slide

  130. Less
    development
    overhead

    View Slide

  131. View Slide

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

    View Slide

  133. Critical rendering
    path

    View Slide

  134. View Slide

  135. View Slide

  136. What is visible?

    View Slide

  137. What is critical?

    View Slide

  138. Inline critical
    assets

    View Slide

  139. Either inline always

    View Slide

  140. Caching?

    View Slide

  141. First request

    View Slide

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

  143. Subsequent request
    (if Cookie set)

    View Slide

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



    // loaded from cache


    content


    View Slide

  145. Flushing critical
    stuff early

    View Slide

  146. Traditional
    approach

    View Slide

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

  148. HTTP supports
    streaming

    View Slide

  149. Browser Server
    GET /foo.html

    View Slide

  150. View Slide

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

    View Slide

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

    View Slide

  153. Problems

    View Slide

  154. Headers are
    already sent

    View Slide

  155. Redirects

    View Slide

  156. View Slide

  157. Proxies, servers,
    load balancers
    may buffer
    content

    View Slide

  158. Browsers may
    wait before
    starting to render
    HTML

    View Slide

  159. AJAX?

    View Slide

  160. JSON/XML

    View Slide

  161. View Slide

  162. Caching what
    assets are
    needed

    View Slide

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

    View Slide

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

    View Slide

  165. View Slide

  166. View Slide

  167. HTTP/2

    View Slide

  168. Server push

    View Slide

  169. Prioritize critical
    assets

    View Slide

  170. 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 Slide

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

  172. Headers
    X-Associated-Content

    View Slide

  173. Automated
    learning

    View Slide

  174. Great

    View Slide

  175. When can I use
    it?

    View Slide

  176. Browser support

    View Slide

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

    View Slide

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

    View Slide

  179. Server support

    View Slide

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

    View Slide

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

    View Slide

  182. Performance
    best practices will
    evolve

    View Slide

  183. Stay up to date

    View Slide

  184. Expect more
    frequent HTTP
    protocol
    iterations

    View Slide

  185. https://joind.in/15435

    View Slide

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

    View Slide