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

A (Fairly) Complete Guide to Performance Budgets [SmashingConf SF 2023]

A (Fairly) Complete Guide to Performance Budgets [SmashingConf SF 2023]

It's easier to make a fast website than it is to keep a website fast. If you've invested countless hours in speeding up your pages, but you're not using performance budgets to prevent regressions, you could be at risk of wasting all your efforts.

In this talk delivered at Smashing Conference SF in 2023, , we'll cover how to:

• Understand the difference between performance budgets and performance goals
• Identify which metrics to track
• Validate your metrics to make sure they're measuring what you think they are – and to see how they correlate with your user experience and business metrics
• Determine your budget thresholds
• Get buy-in from different stakeholders in your organization
• Integrate with your CI/CD process
• Maintain your budgets so you stay fast!

Tammy Everts

May 25, 2023
Tweet

More Decks by Tammy Everts

Other Decks in Technology

Transcript

  1. A (Fairly) Complete Guide
    to Performance Budgets
    @tameverts
    #SmashingConf

    View full-size slide

  2. @tameverts
    webperf.social/@tammy

    View full-size slide

  3. speedcurve.com/benchmarks

    View full-size slide

  4. speedcurve.com/newsletter/

    View full-size slide

  5. Improved average load time from 6s à 1.2s
    7-12% increase in conversion rate + 25% increase in PVs
    Average load time degraded to 5s
    User feedback: “I will not come back to this site again.”
    Re-focused on performance
    0.4% increase in conversion rate
    2010
    2011
    2009
    @tameverts

    View full-size slide

  6. 1. Constant feature development
    2. Badly implemented third-parties
    3. Waited too long to tackle problems
    4. Relied on performance sprints
    5. Stopped doing front-end performance measurement
    6. No way to track regressions
    @tameverts

    View full-size slide

  7. timkadlec.com/2013/01/setting-a-performance-budget/

    View full-size slide

  8. csswizardry.com/2020/01/performance-budgets-pragmatically/

    View full-size slide

  9. speedcurve.com/customers/tag/performance-budgets/

    View full-size slide

  10. “Fighting regressions took priority over
    optimizations. The reason we decided this was
    because in the past, when we had performance
    efforts, engineers who were working on
    optimizations couldn’t really see progress in our
    performance metrics, because there were so
    many regressions happening at the same time.”
    Michelle Vu, Pinterest
    perfnow.nl/2018#michelle

    View full-size slide

  11. What is a performance budget?
    Which metrics should I focus on?
    What should my budget thresholds be?
    How can I stay on top of my budgets?
    @tameverts

    View full-size slide

  12. What is a performance budget?

    View full-size slide

  13. Thresholds YOU create for metrics
    that are meaningful for YOUR site
    Time-based • Start Render, Largest Contentful Paint
    Quantity-based • Page size, image weight, Long Tasks
    Score-based • Cumulative Layout Shift, Lighthouse scores
    @tameverts

    View full-size slide

  14. Monitoring tools
    Synthetic (lab)
    Mimics defined network & browser conditions
    No installation required
    Limited URLs
    Limited test locations
    Compare any sites
    Detailed analysis & visuals
    Real user monitoring (field)
    Real network & browser conditions
    Requires JavaScript installation
    Large sample size (up to 100%)
    Geographic spread
    Only measure your own site
    Correlation with other metrics (e.g., bounce rate)
    @tameverts

    View full-size slide

  15. A good performance budget
    shows you…
    q What your budget is
    q When you go out of bounds
    q How long you’re out of bounds
    q When you’re back within budget
    @tameverts

    View full-size slide

  16. Budgets can be passive (e.g. charts)
    Get alerts so you can investigate
    Even break the build

    View full-size slide

  17. budget
    exceeded fixed
    @tameverts
    oops

    View full-size slide

  18. Which metrics
    should I focus on?

    View full-size slide

  19. TTFB DNS FCP FMP
    LCP CLS FID TBT
    TTI INP OMG WTF

    View full-size slide

  20. 50+ synthetic metrics
    30+ RUM metrics
    25 additional metrics for EACH third party
    ∞ custom metrics

    View full-size slide

  21. MVB
    Minimum Viable Budget

    View full-size slide

  22. Is the page loading?
    Can I use it?
    How does it feel?

    View full-size slide

  23. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics
    ❑ Has broad browser support
    The ideal UX metric…
    @tameverts

    View full-size slide

  24. Is the page loading?

    View full-size slide

  25. Backend time
    The time from the start of the initial navigation
    until the first byte is received by the browser
    (AKA Time to First Byte)
    Synthetic & RUM

    View full-size slide

  26. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics



    Backend time

    View full-size slide

  27. Start Render
    The time from the start of navigation
    until the first non-white content is painted
    Synthetic & RUM

    View full-size slide

  28. As Start Render improves, so does bounce rate (typically)
    @tameverts

    View full-size slide

  29. So does conversion rate (again, typically)
    @tameverts

    View full-size slide

  30. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics



    Start Render


    @tameverts

    View full-size slide

  31. Can I use the page?

    View full-size slide

  32. 43
    When do users start interacting with a page?
    @tameverts

    View full-size slide

  33. Largest Contentful Paint (LCP)
    Amount of time it takes for the largest visual
    element (image or video) to render
    Synthetic & RUM
    (Chromium browsers only)

    View full-size slide

  34. Largest Contentful Paint (often) correlates to bounce rate
    @tameverts

    View full-size slide

  35. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics


    Largest Contentful Paint


    @tameverts

    View full-size slide

  36. Last Painted Hero (LPH)
    When the last piece of critical content
    (hero image, first H1) is painted in the browser.
    Synthetic

    View full-size slide

  37. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics


    Last Painted Hero

    @tameverts

    View full-size slide

  38. How does the page feel?

    View full-size slide

  39. Cumulative Layout Shift (CLS)
    Aggregate score that reflects how much
    page elements shift during rendering
    Synthetic & RUM
    (Chromium browsers only)

    View full-size slide

  40. Bounce rate gets worse as CLS degrades
    Bounce rate improves as CLS degrades
    Bounce rate stays the same as CLS degrades
    speedcurve.com/blog/google-cumulative-layout-shift/

    View full-size slide

  41. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics


    Cumulative Layout Shift
    @tameverts

    View full-size slide

  42. Long Tasks
    Any JavaScript function that takes >50ms to execute
    Long Tasks don’t always block page rendering,
    but they can cause the page to feel janky
    Synthetic & RUM

    View full-size slide

  43. speedcurve.com/blog/first-input-delay-google-core-web-vitals/
    Long Tasks Time often correlates to conversions
    @tameverts

    View full-size slide

  44. 59
    Long Tasks Time can expose issues with third parties
    @tameverts

    View full-size slide

  45. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics

    Long Tasks
    @tameverts



    View full-size slide

  46. Interaction to Next Paint (INP)
    Measures a page's responsiveness
    to individual user interactions
    Observes latency and reports a single value
    that all (or nearly all) interactions are below
    RUM

    View full-size slide

  47. speedcurve.com/blog/interaction-to-next-paint-core-web-vitals/

    View full-size slide

  48. ❑ Tracks the most important content
    ❑ Is accessible out of the box
    ❑ Has broad browser support
    ❑ Is available in synthetic and RUM
    ❑ Can be correlated to UX and business metrics

    Interaction to Next Paint
    @tameverts


    View full-size slide

  49. Meaningful
    content
    Usable out of
    the box
    Broad browser
    support
    Synthetic RUM
    Correlates to
    business/UX
    Time to First Byte ★ ★ ★ ★ ☆
    Start Render ☆ ★ ★ ★ ★ ★
    Largest Contentful Paint ☆ ★ ★ ★ ★
    Last Painted Hero ☆ ★ ★ ★
    Cumulative Layout Shift ☆ ☆ ★ ★
    Long Tasks ★ ★ ★ ★ ☆
    Interaction to Next Paint ★ ★ ★ ★
    @tameverts

    View full-size slide

  50. Page weight & complexity

    View full-size slide

  51. What should
    my budget thresholds be?

    View full-size slide

  52. performance budgets

    performance goals

    View full-size slide

  53. Goals are aspirational
    How fast do I want to be eventually?
    Budgets are pragmatic
    How can I keep my site from getting slower
    while I work toward my goals?
    @tameverts

    View full-size slide

  54. demoralizing not actionable ignorable

    View full-size slide

  55. As you optimize your pages
    (and hopefully get faster!)
    update your budgets

    View full-size slide

  56. How do I manage
    my budgets?

    View full-size slide

  57. Should I set up budgets
    in RUM, synthetic, or both?

    View full-size slide

  58. Scenario 1
    Create budgets in RUM,
    and drill down via synthetic

    View full-size slide

  59. Scenario 2
    Create budgets in synthetic,
    and integrate with CI/CD

    View full-size slide

  60. Should I create
    performance budgets
    for every metric I track?

    View full-size slide

  61. Do I need performance budgets
    for all my pages?

    View full-size slide

  62. 1. Product
    2. Category
    3. Home
    4. Cart
    5. Search
    @tameverts

    View full-size slide

  63. Who should be responsible
    for managing budgets?

    View full-size slide

  64. Everyone* who touches a page
    should understand the performance
    impact of their choices
    *Yes, this includes marketing people

    View full-size slide

  65. For example…
    If your marketing team is responsible for adding
    and maintaining third-party tags, they should:
    q Have a basic understanding of the metrics (such as Long Tasks Time)
    q Collaborate on setting the budget
    q Receive alerts when the budget is violated
    q Participate (or at least have visibility) in identifying and fixing the issue

    View full-size slide

  66. 1. Start small (even a single metric will do!)
    2. Visually validate your metrics (filmstrips, videos)
    3. Validate your metrics some more (UX, business)
    4. Get buy-in from different stakeholders
    5. Focus on the pages that matter most
    6. Revisit your budgets regularly (2-4 weeks)
    7. Remember that metrics are always evolving
    8. Never stop measuring

    View full-size slide

  67. Thank you!
    @tameverts
    webperf.social/@tammy

    View full-size slide

  68. A Complete Guide to Performance Budgets
    speedcurve.com/blog/performance-budgets/
    Setting a Performance Budget
    timkadlec.com/2013/01/setting-a-performance-budget/
    Performance Budgets, Pragmatically
    csswizardry.com/2020/01/performance-budgets-pragmatically/
    Web Vitals
    web.dev/vitals/
    Farewell FID… hello Interaction to Next Paint
    speedcurve.com/blog/interaction-to-next-paint-core-web-vitals/
    Cumulative Layout Shift: What it measures (and what it doesn’t)
    speedcurve.com/blog/google-cumulative-layout-shift/

    View full-size slide