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

A (Fairly) Complete Guide to Performance Budget...

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. 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
  2. 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
  3. “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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Budgets can be passive (e.g. charts) Get alerts so you

    can investigate Even break the build
  9. MVB

  10. ❑ 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
  11. 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
  12. ❑ 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 √
  13. Start Render The time from the start of navigation until

    the first non-white content is painted Synthetic & RUM
  14. ❑ 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
  15. Largest Contentful Paint (LCP) Amount of time it takes for

    the largest visual element (image or video) to render Synthetic & RUM (Chromium browsers only)
  16. ❑ 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
  17. Last Painted Hero (LPH) When the last piece of critical

    content (hero image, first H1) is painted in the browser. Synthetic
  18. ❑ 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
  19. Cumulative Layout Shift (CLS) Aggregate score that reflects how much

    page elements shift during rendering Synthetic & RUM (Chromium browsers only)
  20. 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/
  21. ❑ 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 √
  22. 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
  23. 57

  24. ❑ 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 √ √ √
  25. 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
  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 √ Interaction to Next Paint @tameverts √ √
  27. 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
  28. 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
  29. X

  30. Everyone* who touches a page should understand the performance impact

    of their choices *Yes, this includes marketing people
  31. 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
  32. 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
  33. 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/