HTTP2 What, where, why, and when?! Smashing Conference, March 2016

HTTP2 What, where, why, and when?! Smashing Conference, March 2016

This version of the talk was given at Smashing Conference, Oxford, March 2016.

The onset of HTTP/2 is upon us. Now over 60% of your users browsers are be capable of interpreting requests delivered over the new protocol. But what does this really mean for us as frontend developers? How can we utilise H2’s features to deliver fast experiences? Have our best practices become anti-patterns? What is the tooling landscape like and will we need to change our existing systems?

Over the course of this talk Patrick will use new research and real-world examples from the Financial Times to put our minds at easy and – most importantly – get you excited about a future with HTTP/2.

276c149f793de9af4e98991ed52ff874?s=128

Patrick Hamann

March 15, 2016
Tweet

Transcript

  1. HTTP/2 Patrick Hamann — Smashing Conference, Oxford, March 2016 @patrickhamann

    What, where, why, and when?! !
  2. None
  3. None
  4. Web application stack Session TLS (optional) Transport (TCP) Network (IP)

    Application (HTTP) HTML CSS JavaScript
  5. The brief history of HTTP 1995 HTTP/1.0 (RFC1945) HTTP/0.9 1991

    HTTP/2 (RFC7540) 2015 HTTP/1.1 (RFC2068) 1997 2006 SPDY
  6. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

    GET /index.html
  7. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

  8. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

  9. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

  10. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015

    HTTP/2 HTTP/2 HTTP/2 HTTP/2
  11. HTTP/2 ?%&$! https://bagder.gitbooks.io/http2-explained/content/en/part4.html • Be less sensitive to latency •

    Fix pipelining and the head of line blocking problems • Eliminate the need to increase the number of connections to each host • Keep all existing interfaces, URI formats and schemes • Be made within the IETF's HTTPbis working group 
 HTTP/2 Explained
 DANIEL STENBERG — MOZILLA, 2015
  12. 1. Why 2. What 3. Where 4. When

  13. Why?

  14. Our websites are changing !=

  15. Requesrts 0 50 100 150 200 250 300 2011 2012

    2013 2014 2015 2016 201 219 224 227 238 239 59 68 70 75 76 81 Median 95th Average HTTP requests per page
  16. 80 Average requests per page

  17. Requesrts 0 1000 2000 3000 4000 5000 6000 7000 8000

    2011 2012 2013 2014 2015 2016 2,186 2,898 4,103 5,106 6,119 6,883 487 667 848 1,089 1,280 1,474 Median 95th Average bytes per page
  18. 1.4mb Average bytes transferred per page

  19. We don’t use the network efficiently

  20. It’s all about latency! https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

  21. HTTP connection DNS lookup Initial connection
 (TCP) SSL/TLS negotiation TTFB

    Content download
  22. Average round trip time on UK 3G connection Dmytrii Shchadei

    — http://www.slideshare.net/metrofun/reduce-mobile-latency " # # # $ Internal latency Firewalls, Load Balancers, Servers % Internet routing latency CDNs, ISPs, Caches, Proxies Control plane latency ~600ms on average UK 3G connection ~200ms
  23. Head of line blocking $ & Client Server TCP connection

    GET /image-1.jpg GET /image-1.jpg '
  24. Head of line blocking $ & Client Server GET /image-1.jpg

    GET /image-2.jpg GET /image-3.jpg GET /image-4.jpg GET /image-5.jpg GET /image-6.jpg
  25. Hacks: concatenation ( React.js ( Angular.js ( jQuery.js ( Bootstrap.js

    ( MooTools.js ( main.js + + + +
  26. None
  27. Hacks: domain sharding

  28. Example of base64 json’ifed fonts Hacks: inlining

  29. • Why latency matters • Where latency occurs • Head

    of line blocking • HTTP/1.1 Hacks and anti-patterns
  30. 1. Why 2. What 3. Where 4. When

  31. What?

  32. HTTP/2 ?%&$! https://bagder.gitbooks.io/http2-explained/content/en/part4.html • Be less sensitive to latency •

    Fix pipelining and the head of line blocking problems • Eliminate the need to increase the number of connections to each host • Keep all existing interfaces, URI formats and schemes • Be made within the IETF's HTTPbis working group 
 HTTP/2 Explained
 DANIEL STENBERG — MOZILLA, 2015
  33. HTTP/2 core features 1. Multiplexing (via streams, frames, and messages)

    2. Binary data format 3. Prioritisation 4. Header compression 5. Flow control 6. Server push
  34. & Client $ Server Stream Message :method: GET :path: /image-2.jpg

    Frame Message :status 200 :version: HTTP/2.0 :vary: Accept-Encoding Frame … response payload … Frame Connection Stream A virtual channel within an established connection which carries bidirectional messages. Frame The smallest unit of communication, which carries a specific type of data—e.g., HTTP headers, payload, commands e.t.c. Message A complete sequence of frames that map to a logical HTTP message, such as a request. Multiplexing: terminology
  35. Multiplexing: Frames HTTP/1.1 200 OK Content-Type: text/css Vary: Accept-Encoding Content-Encoding:

    gzip Cache-Control: max-age=6427474 Content-Length: 11740 Connection: keep-alive @font-face{font-family:"BentonSans";src:url("http://s1.ft- static.com/m/font/ft-velcro/bentonsans- regular.eot");src:url("http://s1.ft-static.com/m/font/ft-velcro/ bentonsans-regular.eot?#iefix") format("embedded- HEADERS frame DATA frame HTTP/1.1 HTTP/2
  36. Binary frames Length Data payload… Type Flags Stream Identifier

  37. Stream 5 HEADERS Stream 6 HEADERS Multiplexing: Streams HTTP/2 connection

    Stream 1 HEADERS Stream 1 DATA Stream 1 DATA Stream 2 HEADERS Stream 1 DATA Stream 1 DATA Stream 3 HEADERS $ Server & Client
  38. HTTP/1.1 Prioritisation ) /index.html /main.css /app.js /image-1.jpg /image-2.jpg Time Delay

  39. HTTP/2 Prioritisation ) /index.html Time /main.css /app.js /image-1.jpg /image-2.jpg

  40. /hero.jpg Stream ID: 4 Weight: 16 /data.json Stream ID: 7

    Weight: 16 /app.js Stream ID: 2 Weight: 64 /icon.svg Stream ID: 9 Weight: 16 /main.css Stream ID: 1 Weight: 128 HTTP/2 Prioritisation
  41. Header compression: HPACK :method: GET :scheme: https :host: next.ft.com :path:

    /main.css Cookie FTUserTrack=213.216.148.1.1432658066641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2NTU0NS4x NDMyNzI0MTE2NDc4LjZmM2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432724114:S= ALNI_MZykGfLfvkhayKSL3LXYT9YQNtRjg; cookieconsent=accepted; & Client
  42. Header compression: HPACK 2 :method: GET 3 :scheme: https 3

    :host: next.ft.com 4 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 & Client 2 :method: GET 3 :scheme: https 4 :host: next.ft.com 5 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 Static table Dynamic table
  43. Header compression: HPACK 2 3 4 ` 5 :path: /app.js

    64 65 X-Custom-Header TRUE & Client
  44. Push $ & Client Server HTTP/2 connection GET /index.html GET

    /main.css
  45. Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css '

    200 OK /index.html HTTP/2 connection
  46. Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css '

    RST_STREAM /main.css HTTP/2 connection
  47. • Multiplexing via streams and frames • Client/server prioritisation •

    Header compression via HPACK • Server-side resource pushing
  48. 1. Why 2. What 3. Where 4. When

  49. Where?

  50. Browsers https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing Current browser support

  51. None
  52. Severs https://github.com/http2/http2-spec/wiki/Implementations Server Version Push NGINX 1.9.5+ No Apache 2.4.17+

    Yes IIS 10 Yes Jetty 9.3+ Yes
  53. CDNs https://istlsfastyet.com/ Provider Version Push Akamai Yes No CloudFlare Yes

    No KeyCDN Yes No MaxCDN No No Fastly No No AWS CloudFront No No
  54. PaaS https://istlsfastyet.com/ Server Version Google App Engine Yes AWS (ELB)

    No Heroku No
  55. Choosing the right server! Does it support stream priorities? *

    * Does it support server push? * If so, what strategies does it support for resource hinting? * Does it have intelligent optimisation?
  56. Strategy: static assets/CDN " % $ $ ( + )

    .css ) .js ) .woff /index.html Origin CDN Origin Static assets Client HTTP/2 HTTP/1.1
  57. Strategy: reverse proxy " $ Proxy ( /index.html + )

    .css ) .js ) .woff Static assets Client HTTP/1.1 $ Origin HTTP/2
  58. Strategy: all teh thingz! " ( /index.html + ) .css

    ) .js ) .woff Static assets Client $ Origin HTTP/2
  59. Strategy: push critical assets Request page Network Render GET html

    Build DOM response Build CSSOM Render page idle idle GET css response Render blocking Run JS GET js response Async Render text GET font response
  60. Strategy: push critical assets Request page Network Render GET html

    Build DOM response Build CSSOM Render page idle idle GET css response Run JS GET js response Render text GET font response Push ,
  61. What should we push? Critical CSS * * Critical fonts

    * Core JavaScript applications
  62. How can we push? Resource hints Link: </app/style.css>; rel=preload; as=style;

    <link rel="preload" href="/app/style" as="style"> Link header: Link element: Link: </app/font.woff>; rel=push; rel=push ?? https://www.w3.org/TR/preload/#server-push-http-2
  63. How can we push? Manifest { "/css/app.css": { "type": "style",

    "weight": 2 }, "/js/app.js": { "type": "script", "weight": 1 }, "/bower_components/component/webcomponents-lite.js": { "type": "script", "weight": 1 } …
  64. ) .css /main.css GET ) .js /main.js GET ( /index.html

    GET How can we push? Intelligent push % CDN " Client
  65. ) .css /main.css , ) .js /main.js , ( /index.html

    How can we push? Intelligent push % CDN " Client
  66. Tools: WebPageTest

  67. Tools: WPT http://www.slideshare.net/AndyDavies/the-case-for-http2-internetdagarna-2015-stockholm/65

  68. Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing

  69. Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing

  70. Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing https://jimshaver.net/2015/02/11/decrypting-tls-browser-traffic-with-wireshark-the-easy-way/

  71. Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing $ export SSLKEYLOGFILE=~/sslkeylogs/

  72. https://github.com/summerwind/h2spec

  73. Tools: chrome://net-internals

  74. Tools: http2-log-parser https://github.com/rmurphey/chrome-http2-log-parser

  75. None
  76. • Browser and server support • TLS requirement • Considerations

    when choosing your HTTP server • Deployment strategies • Push strategies • Tooling landscape
  77. 1. Why 2. What 3. Where 4. When

  78. When?

  79. Move to TLS first Acquire certificates * * Ensure all

    3rd party scripts are secure * Ensure all 1st party assets are secure * Configure / upgrade servers * Force all traffic to TLS
  80. None
  81. What is your user support like? 56% 44% H2 capable

    Browser statistics taken form next.ft.com March 2016
  82. Change your build process to be H2 first gulp build-default

    build-concat
  83. Bundle by frequency of change! Libraries Utilities Application

  84. Bundle by frequency of change! Libraries Utilities Application Rarely change

    Frequent change
  85. Bundle by frequency of change! Libraries Utilities Application Rarely change

    Frequent change ( core.js ( app.js
  86. Performance basics still matter! First render (above the fold) prioritisation

    & optimisation * * Compression, minification, and image optimisation * Cache wherever possible * Reduce DNS lookups and TLS handshakes * Use CDNs to reduce latency
  87. • Move to TLS first • Get stakeholders involved •

    Analyse your user support • Change your build processes • Performance basics still matter!
  88. 1. Why 2. What 3. Where 4. When

  89. Summary

  90. Does it work? 95th percentile load event FT.com Statistics taken

    form next.ft.com March 2016 loadEvent (ms) 0 4,500 9,000 13,500 18,000 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 6,671 16,411 15,163 6,317 12,956 10,776
  91. Does it work? Impact of latency and HTTP/2 Statistics taken

    form next.ft.com March 2016 Median loadEvent (ms) 0 1,250 2,500 3,750 5,000 RTT (latency) 0 100 200 300 400 500 H2 H1
  92. Does it work? 95th percentile start render Statistics taken form

    next.ft.com March 2016 Start render (ms) 0 800 1,600 2,400 3,200 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 2,521 2,944 3,028 1,105 2,453 2,506
  93. #perfmatters

  94. Thanks @patrickhamann http://bit.ly/http2-what-where-why-when
 github.com/Financial-Times ! - . Do you want

    to help build this stuff? Join in.