Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Power of the network (Altitude SF 2017)

The Power of the network (Altitude SF 2017)

Andrew Betts

June 29, 2017
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Andrew Betts
    Principal developer advocate | Fastly
    The power of the
    network

    View full-size slide

  2. • Developer relations at
    Fastly
    • W3C Technical
    Architecture Group
    • Previously Financial Times,
    Nikkei
    Who is this guy?

    View full-size slide

  3. webpagetest.org
    Loading resources is
    complicated
    Better browser support
    gives developers more
    control, better tools (like
    webpagetest) offer
    better monitoring.

    View full-size slide

  4. HTTP Archive, April 2017

    View full-size slide

  5. http://www.pcworld.com/article/3060622

    View full-size slide

  6. >
    2.39MB
    3.45MB

    View full-size slide

  7. https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017)
    2.2% of daily income
    to load one webpage

    View full-size slide

  8. Proliferation of third
    party tools on the page
    Ghostery regularly finds
    more than 50 third party
    scripts included on a
    single web page.

    View full-size slide

  9. Connections can be
    expensive

    View full-size slide

  10. TCP + TLS handshake (3-4 round-trips)
    “High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

    View full-size slide

  11. Denver
    (DEN)
    Stockholm
    (BMA)
    7,800km
    Theoretical best RTT: 90ms
    Practical RTT: 146ms

    View full-size slide

  12. HTTP/1.0
    dogs.html dogs.html
    GET
    dogs.html
    dog1.gif dog1.gif
    GET
    dog1.gif
    dog2.gif
    dog2.gif
    GET
    dog2.gif
    dog1.gif
    Session 1
    Session 2
    Session 3

    View full-size slide

  13. HTTP/1.1
    dogs.html dogs.html
    GET
    dogs.html
    dog1.gif dog1.gif
    GET
    dog1.gif
    dog2.gif
    dog2.gif
    GET
    dog2.gif
    dog1.gif
    Session 1

    View full-size slide

  14. HTTP/2
    dogs.html dogs.html
    GET
    dogs.html
    dog1.gif dog1.gif
    dog2.gif
    dog2.gif
    dog1.gif

    View full-size slide

  15. • You can’t make light go faster
    – TLS+TCP setup requires 3-4 round trips
    – Get closer to the users
    • You can’t optimise across multiple origins
    – Even as HTTP improves, you will still need separate connections to
    each origin
    – Use a smaller number of origins
    • Requests are getting cheaper
    – Don’t worry so much about number of requests
    Bottom line

    View full-size slide

  16. Dynamic site acceleration
    Denver user
    Edge
    (Denver)
    Server
    (Stockholm)
    Higher probability of existing connection

    View full-size slide

  17. Dynamic site acceleration (shielded)
    Denver user
    Edge 1
    (Denver)
    Edge 2
    (Europe)
    Always on, optimised, low latency connection
    Server
    (Stockholm)

    View full-size slide

  18. Caching modern,
    progressive web apps

    View full-size slide

  19. pwa.fastlydemo.net
    An offline-capable news
    reading progressive web
    app with cache insights
    ServiceWorker
    required for stats

    View full-size slide

  20. pwa.fastlydemo.net

    View full-size slide

  21. Multiple caches
    Browser HTTP
    cache
    Fastly Origin server

    View full-size slide

  22. • Never changes?
    Cache-control: max-age=31536000, immutable
    • Unique response?
    Cache-control: private, no-store
    • Changes when stuff happens?
    Cache-Control: max-age=0, s-maxage=31536000
    Good cache headers
    Avoid revalidations
    on refresh

    View full-size slide

  23. Purging when things happen
    User
    Event:
    Comment posted
    Edge Server
    Uncached, fetch
    from origin
    Hit! return “304 Not
    Modified” from Edge
    cache
    After purge,
    uncached again
    PURGE
    MISS...

    View full-size slide

  24. Cache miss after purging

    View full-size slide

  25. Serve stale (while revalidate)
    Users
    Soft purge
    Edge Server
    400req/s for the
    home page
    One request goes to
    origin. The rest are
    held at the edge.
    Future requests served
    from fresh cache
    After expiry, requests
    still get fast cached
    response
    Asynchronous fetch
    to refresh the cache
    Cache repopulated
    Does not wait for
    origin response!

    View full-size slide

  26. Purging when things happen
    Did not wait for
    origin response!

    View full-size slide

  27. Serve stale (on error from origin)
    Users
    Purge
    Edge Server
    Requests flooding in
    Just one request
    goes to origin,
    populates cache at
    the edge
    Request after expiry
    causes fetch to origin
    Origin server is
    offline, refuses
    connection
    stale-while-reval expires
    SERVER DOWN!
    Server super-stale
    object from cache
    Fall back to stale
    content

    View full-size slide

  28. Origin down, still working...

    View full-size slide

  29. Cutting-edge web
    networking with
    Streams

    View full-size slide

  30. Before: Edge side includes
    alt="http://bak.example.com/2.html" onerror="continue"/>
    index.html
    my-news.html
    Cache-control: max-age=86400
    Cache-control: private
    Origin
    server
    Edge cache / CDN
    Browser

    View full-size slide

  31. Now: Serviceworker & streams
    /frags/header
    /home.frag Server
    /frags/footer
    /
    https://developers.google.com/web/updates/2016/06/sw-readablestreams
    Browser
    Cache/purge all these
    individually!

    View full-size slide

  32. No header
    template!
    Header + footer
    In SW cache

    View full-size slide

  33. Purge all the way to
    the browser with
    silent push
    COMING
    SOON

    View full-size slide

  34. Multiple caches
    Browser HTTP
    cache
    Fastly Origin server

    View full-size slide

  35. Multiple caches (more honest edition)
    Browser tab Image
    cache
    Fastly Origin server
    Preload
    cache
    Service
    worker
    HTTP
    cache
    HTTP/2
    push cache
    https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/
    Heuristically
    managed
    JavaScript API!

    View full-size slide

  36. “This site has been updated
    in the background”

    View full-size slide

  37. Purging when things happen (+ silent push)
    User
    Event:
    Comment posted
    Fastly Server
    Uncached, fetch
    from origin
    PURGE
    SILENT WEB PUSH

    View full-size slide

  38. Set headers for your
    whole site at once
    with Origin policy
    COMING
    SOON

    View full-size slide

  39. Origin policy - for shared metadata
    Content-Security-Policy:
    HTTP-Strict-Transport-Security:
    X-Frame-Options:
    Referrer-Policy:
    Cache-Control:
    X-XSS-Protection:
    ...
    Content-Security-Policy:
    HTTP-Strict-Transport-Security:
    X-Frame-Options:
    Referrer-Policy:
    Cache-Control:
    X-XSS-Protection:
    ...
    Content-Security-Policy:
    HTTP-Strict-Transport-Security:
    X-Frame-Options:
    Referrer-Policy:
    Cache-Control:
    X-XSS-Protection:
    ...
    /home /about /shop
    /.well-known/origin-policy
    https://wicg.github.io/origin-policy/

    View full-size slide

  40. Assert behaviours for
    peak performance
    with Feature policy
    COMING
    SOON

    View full-size slide

  41. Does your page
    really need the
    Vibration API?
    They say I have to
    have a GIF

    View full-size slide

  42. Feature-Policy: {
    "geolocation": [
    "self",
    "https://example.com"
    ],
    “vibrate”: []
    }
    Feature policy HTTP header
    This page is not allowed
    to use vibration!

    View full-size slide

  43. • More objects, smaller objects,
    fewer origins
    • Less bundling
    • Smarter caching
    • Serve stale (while-revalidating,
    and if-error)
    In summary...
    • More purging
    • More varying
    • ServiceWorker and Silent push
    • Origin policy and feature policy

    View full-size slide

  44. Thanks for listening
    I am Get the slides:
    Andrew Betts
    @triblondon
    [email protected]
    fastly.us/altitude-potn

    View full-size slide

  45. One object, many
    variations with the
    Vary header

    View full-size slide

  46. Accept-Language around the world
    Washington DC Frankfurt Tokyo
    1 en-us en-US,en;q=0.8 ja-jp
    2 en-US,en;q=0.8 it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4 ja-JP,en-US;q=0.8
    3 en-US en-us ja-JP
    4 en-US,en;q=0.5 it-it ja-JP,ja;q=0.8,en-US;q=0.6,en;q=0.4
    5 en tr-tr ja,en-US;q=0.8,en;q=0.6
    6 pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 ru ja
    7 en_US tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
    8 es-ES,es;q=0.8 pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR
    9 en,* ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 en-us
    10 en-US;q=1 de-de ko-KR,en-US;q=0.8
    + over 5000 total variations

    View full-size slide

  47. Normalise for vary (5000 -> 6)
    Washington DC Frankfurt Tokyo
    1 en (84%) en (60%) jp (74%)
    2 es (7%) es (18%) en (23%)
    3 pt (6%) de (12%) es (3%)
    4 jp (2%) fr (7%)
    5 fr (1%) pt (2%)
    6 jp (1%)
    https://docs.fastly.com/guides/vcl/accept-language%20header-vcl-features
    accept.language_lookup("en:de:fr:pt:es:jp", "en", req.http.Accept-Language);

    View full-size slide