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

The changing face of loading resources (WD Leaders 2017)

The changing face of loading resources (WD Leaders 2017)

Andrew Betts

August 01, 2017

More Decks by Andrew Betts

Other Decks in Technology


  1. Andrew Betts Principal developer advocate | Fastly The changing face

    of loading resources
  2. • Developer relations at Fastly • W3C Technical Architecture Group

    • Previously Financial Times, Nikkei Who is this guy?
  3. • Why is loading important to your strategy • Overview

    of modern networking patterns (more detail at Code) • Fastly customer experiences • Trends and future needs Agenda today
  4. Complexity of resource loading is increasing Better browser support gives

    developers more control, better tools (like webpagetest) offer better monitoring.
  5. None
  6. • Fewer origins • Terminate close to user • Smart

    caching Key network performance factors • Fast rendering • Bandwidth optimisation • Governance and control
  7. None
  8. HTTP evolution changes our priorities 1.0 1.1 2 QUIC Fewer

    connections per origin Multiplexing / async More encryption More origin-scoped features Cheaper requests Pricy connections Origin centricity Use fewer origins Terminate closer to user
  9. 51 trackers

  10. Use fewer origins Connections remain expensive to set up. Use

    a routing layer to expose only one origin. example.com In-house app Video provider Analytics provider
  11. None
  12. Denver (DEN) Stockholm (BMA) 7,800km Theoretical best RTT: 90ms Practical

    RTT: 146ms
  13. TCP + TLS handshake = up to 4 round-trips

  14. Dynamic site acceleration with shielding Always on, optimised, low latency

    Slow-start, congested, high-latency
  15. None
  16. Types of object for caching Static: Stuff that never changes

    JavaScript CSS Images Templates /resources/style-v3.css Dynamic: unique to a single user Inbox message list Shopping cart Preference values /my/cart Years private* * Still benefits from DSA Event driven: changes when things happen Articles Product lists Search results Stock prices /api/getCurrentPrice Years* * If you can purge
  17. 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...
  18. Asynchronous serve stale (while revalidate) Users max-age expires Edge Server

    Requests flooding in Just one request goes to origin. The rest are held at the edge. All requests fulfilled After expiry, requests still get fast cached response Asynchronous fetch to refresh the cache Cache repopulated
  19. Synchronous serve stale (on error from origin) Users max-age expires

    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
  20. Purging the browser too? User Event: Comment posted Fastly Server

    Uncached, fetch from origin PURGE PURGE?
  21. Options for purging the browser cache • Clear-Site-Data – Dedicated

    spec; simple, already supported in Chrome – Clears cache by adding a Clear-Site-Data header to any response • Silent push – Can be more granular (purge just one thing) – Could work in background – Depends on the Budget API spec
  22. None
  23. Conventional model

  24. “Single page app” => App shell => PRPL Initial download

    is static bundle Then it’s all API calls
  25. Serviceworker & streams /frags/header /home.frag /frags/footer / Cache/purge all these

    individually! Serviceworker splits request into parts
  26. Event streaming Initial download is static bundle Continuous stream of

    small events
  27. Real time flight departures (powered by SSE)

  28. Google AMP (Accelerated Mobile Pages)

  29. None
  30. 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
  31. None
  32. Access-Control-Allow-Origin Access-Control-Allow-Headers Access-Control-Allow-Methods Access-Control-Allow-Credentials Content-Security-Policy HTTP-Strict-Transport-Security X-Frame-Options X-Content-Type-Options X-XSS-Protection Security

    headers Test your site’s security headers with securityheaders.io
  33. Modern TLS Test your site’s TLS with ssllabs.com/ssltest

  34. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] }

    Feature policy HTTP header This page is not allowed to use vibration!
  35. None
  36. “stale-while-revalidate is one of the most exciting features I’ve worked

    with so far. It allowed us to successfully serve the live blog while constantly updating its content, ensuring our readers had access to the freshest content without seeing errors.” - Zack Tollman Wired
  37. “With Fastly’s shielding service, we were able to eliminate ELB,

    HAProxy, and Varnish in our origin application. It simplifies our architecture, reduces latency and makes monitoring and managing the environment a lot easier and less painful.” - Dale Neufeld Shopify 18,000% spike in traffic during Superbowl ad
  38. “Streaming miss was a giant win for us. When we

    were unable to cache our large audio files, the TTFB was between 1 and 2 seconds. But with Fastly, 90% of our requests are cached on the edge, and the remaining 10% have a TTFB of 400 or 500 milliseconds, resulting in a significantly better experience for our users.” - Darrell Mozingo 7digital
  39. • Package manager for JavaScript community • Downloads tarballs using

    a custom CLI client • Recently released npm5 • 50% reduction in request count by doing better analysis of already-installed packages. npm
  40. None
  41. • Web innovations are accelerating, don’t get left behind •

    Massive wins in security and performance • If you can, use a CDN that gives you a lot of this stuff out of the box • Some decisions are easy to retrofit, others are once-in-a-generation, so long term planning needed Conclusions
  42. Thanks for listening I am Get the slides: Andrew Betts

    @triblondon [email protected] fastly.us/leaders Take our survey: fastly.us/2skOnXM