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. 2.
  2. 3.
  3. 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
  4. 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
  5. 13.
  6. 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
  7. 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
  8. 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
  9. 23.

    Head of line blocking $ & Client Server TCP connection

    GET /image-1.jpg GET /image-1.jpg '
  10. 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
  11. 26.
  12. 29.

    • Why latency matters • Where latency occurs • Head

    of line blocking • HTTP/1.1 Hacks and anti-patterns
  13. 31.
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 43.

    Header compression: HPACK 2 3 4 ` 5 :path: /app.js

    64 65 X-Custom-Header TRUE & Client
  23. 45.
  24. 46.
  25. 47.

    • Multiplexing via streams and frames • Client/server prioritisation •

    Header compression via HPACK • Server-side resource pushing
  26. 49.
  27. 51.
  28. 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
  29. 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?
  30. 56.

    Strategy: static assets/CDN " % $ $ ( + )

    .css ) .js ) .woff /index.html Origin CDN Origin Static assets Client HTTP/2 HTTP/1.1
  31. 57.

    Strategy: reverse proxy " $ Proxy ( /index.html + )

    .css ) .js ) .woff Static assets Client HTTP/1.1 $ Origin HTTP/2
  32. 58.

    Strategy: all teh thingz! " ( /index.html + ) .css

    ) .js ) .woff Static assets Client $ Origin HTTP/2
  33. 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
  34. 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 ,
  35. 61.
  36. 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
  37. 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 } …
  38. 64.

    ) .css /main.css GET ) .js /main.js GET ( /index.html

    GET How can we push? Intelligent push % CDN " Client
  39. 65.

    ) .css /main.css , ) .js /main.js , ( /index.html

    How can we push? Intelligent push % CDN " Client
  40. 75.
  41. 76.

    • Browser and server support • TLS requirement • Considerations

    when choosing your HTTP server • Deployment strategies • Push strategies • Tooling landscape
  42. 78.
  43. 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
  44. 80.
  45. 81.

    What is your user support like? 56% 44% H2 capable

    Browser statistics taken form next.ft.com March 2016
  46. 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
  47. 87.

    • Move to TLS first • Get stakeholders involved •

    Analyse your user support • Change your build processes • Performance basics still matter!
  48. 89.
  49. 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
  50. 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
  51. 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