The Power of the network (Altitude SF 2017)

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. HTTP Archive, April 2017
   

   View Slide

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

   View Slide

7. >
   2.39MB
   3.45MB
   

   View Slide

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

   View Slide

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

   View Slide

10. Connections can be
    expensive
    

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

16. View Slide

17. • 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 Slide

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

    View Slide

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

    View Slide

20. Caching modern,
    progressive web apps
    

    View Slide

21. View Slide

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

    View Slide

23. pwa.fastlydemo.net
    

    View Slide

24. Multiple caches
    Browser HTTP
    cache
    Fastly Origin server
    

    View Slide

25. • 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 Slide

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

27. Cache miss after purging
    

    View Slide

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

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

    View Slide

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

31. View Slide

32. Origin down, still working...
    

    View Slide

33. Cutting-edge web
    networking with
    Streams
    

    View Slide

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

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

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

    View Slide

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

    View Slide

38. Multiple caches
    Browser HTTP
    cache
    Fastly Origin server
    

    View Slide

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

40. View Slide

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

    View Slide

42. View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

49. • 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 Slide

50. Thanks for listening
    I am Get the slides:
    Andrew Betts
    @triblondon
    abetts@fastly.com
    fastly.us/altitude-potn
    

    View Slide

51. View Slide

52. One object, many
    variations with the
    Vary header
    

    View Slide

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

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