Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The changing face of loading resources (WD Leaders 2017)

The changing face of loading resources (WD Leaders 2017)

Andrew Betts

August 01, 2017
Tweet

More Decks by Andrew Betts

Other Decks in Technology

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
    [email protected]
    fastly.us/leaders
    Take our survey:
    fastly.us/2skOnXM

    View Slide