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)

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

June 29, 2017
Tweet

Transcript

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

    the network
  2. • Developer relations at Fastly • W3C Technical Architecture Group

    • Previously Financial Times, Nikkei Who is this guy?
  3. webpagetest.org Loading resources is complicated Better browser support gives developers

    more control, better tools (like webpagetest) offer better monitoring.
  4. None
  5. HTTP Archive, April 2017

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

  7. > 2.39MB 3.45MB

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

    income to load one webpage
  9. Proliferation of third party tools on the page Ghostery regularly

    finds more than 50 third party scripts included on a single web page.
  10. Connections can be expensive

  11. TCP + TLS handshake (3-4 round-trips) “High performance browser networking”,

    Ilya Grigorik (O’Reilly 2013)
  12. Denver (DEN) Stockholm (BMA) 7,800km Theoretical best RTT: 90ms Practical

    RTT: 146ms
  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
  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
  15. HTTP/2 dogs.html dogs.html GET dogs.html dog1.gif dog1.gif dog2.gif dog2.gif dog1.gif

  16. None
  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
  18. Dynamic site acceleration Denver user Edge (Denver) Server (Stockholm) Higher

    probability of existing connection
  19. Dynamic site acceleration (shielded) Denver user Edge 1 (Denver) Edge

    2 (Europe) Always on, optimised, low latency connection Server (Stockholm)
  20. Caching modern, progressive web apps

  21. None
  22. pwa.fastlydemo.net An offline-capable news reading progressive web app with cache

    insights ServiceWorker required for stats
  23. pwa.fastlydemo.net

  24. Multiple caches Browser HTTP cache Fastly Origin server

  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
  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...
  27. Cache miss after purging

  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!
  29. Purging when things happen Did not wait for origin response!

  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
  31. None
  32. Origin down, still working...

  33. Cutting-edge web networking with Streams

  34. Before: Edge side includes <esi:include src="http://example.com/1.html" 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
  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!
  36. No header template! Header + footer In SW cache

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

    COMING SOON
  38. Multiple caches Browser HTTP cache Fastly Origin server

  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!
  40. None
  41. “This site has been updated in the background”

  42. None
  43. Purging when things happen (+ silent push) User Event: Comment

    posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
  44. Set headers for your whole site at once with Origin

    policy COMING SOON
  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/
  46. Assert behaviours for peak performance with Feature policy COMING SOON

  47. Does your page really need the Vibration API? They say

    I have to have a GIF
  48. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

    Feature policy HTTP header This page is not allowed to use vibration!
  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
  50. Thanks for listening I am Get the slides: Andrew Betts

    @triblondon abetts@fastly.com fastly.us/altitude-potn
  51. None
  52. One object, many variations with the Vary header

  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
  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);