The changing face of loading resources (WD Leaders 2017)

Transcript

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 abetts@fastly.com fastly.us/leaders Take our survey: fastly.us/2skOnXM