The changing face of loading resources (WD Leaders 2017)

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

5. View Slide

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

   View Slide

7. View Slide

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
   

   View Slide

9. 51 trackers
   

   View Slide

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
    

    View Slide

11. View Slide

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

    View Slide

13. TCP + TLS handshake = up to 4 round-trips
    

    View Slide

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

    View Slide

15. View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

22. View Slide

23. Conventional model
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Real time flight departures (powered by SSE)
    

    View Slide

28. Google AMP (Accelerated Mobile Pages)
    

    View Slide

29. View Slide

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
    

    View Slide

31. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. View Slide

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
    

    View Slide

42. Thanks for listening
    I am Get the slides:
    Andrew Betts
    @triblondon
    abetts@fastly.com
    fastly.us/leaders
    Take our survey:
    fastly.us/2skOnXM
    

    View Slide