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.
6. • Fewer origins • Terminate close to user • Smart caching Key network performance factors • Fast rendering • Bandwidth optimisation • Governance and control
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
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
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
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)
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
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!
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
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