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

More Decks by Andrew Betts

Other Decks in Technology


  1. • Developer relations at Fastly • W3C Technical Architecture Group

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

    more control, better tools (like webpagetest) offer better monitoring.
  3. Proliferation of third party tools on the page Ghostery regularly

    finds more than 50 third party scripts included on a single web page.
  4. 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
  5. • 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
  6. Dynamic site acceleration (shielded) Denver user Edge 1 (Denver) Edge

    2 (Europe) Always on, optimised, low latency connection Server (Stockholm)
  7. • 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
  8. 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...
  9. 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!
  10. 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
  11. 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!
  12. Purging when things happen (+ silent push) User Event: Comment

    posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
  13. 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/
  14. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

    Feature policy HTTP header This page is not allowed to use vibration!
  15. • 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
  16. 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
  17. 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);