The Power of the network (Altitude SF 2017)

Transcript

1. Andrew Betts Principal developer advocate | Fastly The power of the network
2. • Developer relations at Fastly • W3C Technical Architecture Group • Previously Financial Times, Nikkei Who is this guy?
3. webpagetest.org Loading resources is complicated Better browser support gives developers more control, better tools (like webpagetest) offer better monitoring.
5. HTTP Archive, April 2017
6. http://www.pcworld.com/article/3060622
7. > 2.39MB 3.45MB
8. https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017) 2.2% of daily income to load one webpage
9. Proliferation of third party tools on the page Ghostery regularly finds more than 50 third party scripts included on a single web page.
10. Connections can be expensive
11. TCP + TLS handshake (3-4 round-trips) “High performance browser networking”, Ilya Grigorik (O’Reilly 2013)
12. Denver (DEN) Stockholm (BMA) 7,800km Theoretical best RTT: 90ms Practical RTT: 146ms
13. 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
14. HTTP/1.1 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
15. HTTP/2 dogs.html dogs.html GET dogs.html dog1.gif dog1.gif dog2.gif dog2.gif dog1.gif
17. • 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
18. Dynamic site acceleration Denver user Edge (Denver) Server (Stockholm) Higher probability of existing connection
19. Dynamic site acceleration (shielded) Denver user Edge 1 (Denver) Edge 2 (Europe) Always on, optimised, low latency connection Server (Stockholm)
20. Caching modern, progressive web apps
22. pwa.fastlydemo.net An offline-capable news reading progressive web app with cache insights ServiceWorker required for stats
23. pwa.fastlydemo.net
24. Multiple caches Browser HTTP cache Fastly Origin server
25. • 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
26. 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...
27. Cache miss after purging
28. 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!
29. Purging when things happen Did not wait for origin response!
30. 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
32. Origin down, still working...
33. Cutting-edge web networking with Streams
34. Before: Edge side includes <esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/> index.html my-news.html Cache-control: max-age=86400 Cache-control: private Origin server Edge cache / CDN Browser
35. Now: Serviceworker & streams /frags/header /home.frag Server /frags/footer / https://developers.google.com/web/updates/2016/06/sw-readablestreams Browser Cache/purge all these individually!
36. No header template! Header + footer In SW cache
37. Purge all the way to the browser with silent push COMING SOON
38. Multiple caches Browser HTTP cache Fastly Origin server
39. 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!
41. “This site has been updated in the background”
43. Purging when things happen (+ silent push) User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
44. Set headers for your whole site at once with Origin policy COMING SOON
45. 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/
46. Assert behaviours for peak performance with Feature policy COMING SOON
47. Does your page really need the Vibration API? They say I have to have a GIF
48. Feature-Policy: { "geolocation": [ "self", "https://example.com" ], “vibrate”: [] } Feature policy HTTP header This page is not allowed to use vibration!
49. • 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
50. Thanks for listening I am Get the slides: Andrew Betts @triblondon abetts@fastly.com fastly.us/altitude-potn
52. One object, many variations with the Vary header
53. 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
54. 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);