$30 off During Our Annual Pro Sale. View Details »

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.

Patrick Hamann

March 15, 2016
Tweet

More Decks by Patrick Hamann

Other Decks in Technology

Transcript

  1. HTTP/2
    Patrick Hamann — Smashing Conference, Oxford, March 2016
    @patrickhamann
    What, where, why, and when?!
    !

    View Slide

  2. View Slide

  3. View Slide

  4. Web application stack
    Session TLS (optional)
    Transport (TCP)
    Network (IP)
    Application (HTTP)
    HTML CSS JavaScript

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  12. 1. Why
    2. What
    3. Where
    4. When

    View Slide

  13. Why?

    View Slide

  14. Our websites are changing
    !=

    View Slide

  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

    View Slide

  16. 80
    Average requests per page

    View Slide

  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

    View Slide

  18. 1.4mb
    Average bytes transferred per page

    View Slide

  19. We don’t use the network efficiently

    View Slide

  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/

    View Slide

  21. HTTP connection
    DNS lookup
    Initial connection

    (TCP)
    SSL/TLS negotiation
    TTFB
    Content download

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  25. Hacks: concatenation
    (
    React.js
    (
    Angular.js
    (
    jQuery.js
    (
    Bootstrap.js
    (
    MooTools.js
    (
    main.js
    + + + +

    View Slide

  26. View Slide

  27. Hacks: domain sharding

    View Slide

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

    View Slide

  29. • Why latency matters
    • Where latency occurs
    • Head of line blocking
    • HTTP/1.1 Hacks and anti-patterns

    View Slide

  30. 1. Why
    2. What
    3. Where
    4. When

    View Slide

  31. What?

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  36. Binary frames
    Length
    Data payload…
    Type
    Flags
    Stream Identifier

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  43. Header compression: HPACK
    2
    3
    4 `
    5 :path: /app.js
    64
    65 X-Custom-Header TRUE
    &
    Client

    View Slide

  44. Push
    $
    &
    Client Server
    HTTP/2 connection
    GET /index.html
    GET /main.css

    View Slide

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

    View Slide

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

    View Slide

  47. • Multiplexing via streams and frames
    • Client/server prioritisation
    • Header compression via HPACK
    • Server-side resource pushing

    View Slide

  48. 1. Why
    2. What
    3. Where
    4. When

    View Slide

  49. Where?

    View Slide

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

    View Slide

  51. View Slide

  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

    View Slide

  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

    View Slide

  54. PaaS
    https://istlsfastyet.com/
    Server Version
    Google App Engine Yes
    AWS (ELB) No
    Heroku No

    View Slide

  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?

    View Slide

  56. Strategy: static assets/CDN
    "
    % $
    $
    (
    +
    )
    .css
    )
    .js
    )
    .woff
    /index.html Origin
    CDN Origin
    Static assets
    Client
    HTTP/2
    HTTP/1.1

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 ,

    View Slide

  61. What should we push?
    Critical CSS
    *
    * Critical fonts
    * Core JavaScript applications

    View Slide

  62. How can we push? Resource hints
    Link: ; rel=preload; as=style;

    Link header:
    Link element:
    Link: ; rel=push;
    rel=push ??
    https://www.w3.org/TR/preload/#server-push-http-2

    View Slide

  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
    }

    View Slide

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

    View Slide

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

    View Slide

  66. Tools: WebPageTest

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  73. Tools: chrome://net-internals

    View Slide

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

    View Slide

  75. View Slide

  76. • Browser and server support
    • TLS requirement
    • Considerations when choosing your HTTP server
    • Deployment strategies
    • Push strategies
    • Tooling landscape

    View Slide

  77. 1. Why
    2. What
    3. Where
    4. When

    View Slide

  78. When?

    View Slide

  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

    View Slide

  80. View Slide

  81. What is your user support like?
    56%
    44%
    H2 capable
    Browser statistics taken form next.ft.com March 2016

    View Slide

  82. Change your build process to be H2 first
    gulp build-default build-concat

    View Slide

  83. Bundle by frequency of change!
    Libraries Utilities Application

    View Slide

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

    View Slide

  85. Bundle by frequency of change!
    Libraries Utilities Application
    Rarely change Frequent change
    (
    core.js
    (
    app.js

    View Slide

  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

    View Slide

  87. • Move to TLS first
    • Get stakeholders involved
    • Analyse your user support
    • Change your build processes
    • Performance basics still matter!

    View Slide

  88. 1. Why
    2. What
    3. Where
    4. When

    View Slide

  89. Summary

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  93. #perfmatters

    View Slide

  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.

    View Slide