Andrew Betts Principal developer advocate | Fastly The changing face of loading resources

• Developer relations at Fastly • W3C Technical Architecture Group • Previously Financial Times, Nikkei Who is this guy?

• 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

Complexity of resource loading is increasing Better browser support gives developers more control, better tools (like webpagetest) offer better monitoring.

No content

• Fewer origins • Terminate close to user • Smart caching Key network performance factors • Fast rendering • Bandwidth optimisation • Governance and control

No content

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

51 trackers

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

No content

Denver (DEN) Stockholm (BMA) 7,800km Theoretical best RTT: 90ms Practical RTT: 146ms

TCP + TLS handshake = up to 4 round-trips

Dynamic site acceleration with shielding Always on, optimised, low latency Slow-start, congested, high-latency

No content

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

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...

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

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

Purging the browser too? User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE PURGE?

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

No content

Conventional model

“Single page app” => App shell => PRPL Initial download is static bundle Then it’s all API calls

Serviceworker & streams /frags/header /home.frag /frags/footer / Cache/purge all these individually! Serviceworker splits request into parts

Event streaming Initial download is static bundle Continuous stream of small events

Real time flight departures (powered by SSE)

Google AMP (Accelerated Mobile Pages)

No content

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

No content

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

Modern TLS Test your site’s TLS with ssllabs.com/ssltest

Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] } Feature policy HTTP header This page is not allowed to use vibration!

No content

“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

“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

“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

• 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

No content

• 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

Thanks for listening I am Get the slides: Andrew Betts @triblondon [email protected] fastly.us/leaders Take our survey: fastly.us/2skOnXM