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

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

16. None

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

21. None

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

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!
40. None

41. “This site has been updated in the background”

42. None

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

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);