Successfully reported this slideshow.
Your SlideShare is downloading. ×

Real-World Performance Budgets [PerfNow 2022]

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 103 Ad

Real-World Performance Budgets [PerfNow 2022]

Download to read offline

Performance budgets have been around for more than ten years. Over those years, we’ve learned a lot about what works, what doesn’t, and what we need to improve. In this session, I revisit old assumptions about performance budgets and offers some new practices. Topics include:

• Aligning budgets with user experience
• Pros and cons of Core Web Vitals
• Budgets for beginners

Performance budgets have been around for more than ten years. Over those years, we’ve learned a lot about what works, what doesn’t, and what we need to improve. In this session, I revisit old assumptions about performance budgets and offers some new practices. Topics include:

• Aligning budgets with user experience
• Pros and cons of Core Web Vitals
• Budgets for beginners

Advertisement
Advertisement

More Related Content

More from Tammy Everts (13)

Recently uploaded (20)

Advertisement

Real-World Performance Budgets [PerfNow 2022]

  1. 1. Real-World Performance Budgets @tameverts #perfnow
  2. 2. @tameverts
  3. 3. @tameverts
  4. 4. speedcurve.com/benchmarks/ @tameverts
  5. 5. How fast should my pages be to keep my visitors happy? How can I make sure they stay fast?
  6. 6. 2009 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
  7. 7. 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
  8. 8. 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
  9. 9. Minimum Viable Budget
  10. 10. What is a performance budget?
  11. 11. Thresholds YOU create for metrics that are meaningful for YOUR site Milestone timings • e.g. Start Render, Largest Contentful Paint Quantity-based • e.g. Page size, image weight, Long Tasks Score-based • e.g. Cumulative Layout Shift, Lighthouse scores @tameverts
  12. 12. A good performance budget should show you…  What your budget is  When you go out of bounds  How long you’re out of bounds  When you’re back within budget @tameverts
  13. 13. budget exceeded fixed @tameverts
  14. 14. Performance budget 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
  15. 15. Which metrics should I focus on?
  16. 16. TTFB DNS FCP FMP LCP CLS FID TBT TTI INP OMG WTF
  17. 17. 50+ synthetic metrics 25 additional metrics for EACH third party 30+ RUM metrics ??? custom metrics
  18. 18. Photo by Brett Cagle on Unsplash
  19. 19. Is the page loading? Can I use it? How does it feel?
  20. 20. ❑ 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
  21. 21. Is the page loading?
  22. 22. Backend time AKA Time to First Byte (TTFB) Synthetic & RUM
  23. 23. ❑ 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 √
  24. 24. Start Render The time from the start of navigation until the first non-white content is painted Synthetic & RUM
  25. 25. As Start Render improves, so does bounce rate (typically) @tameverts
  26. 26. So does conversion rate (again, typically) @tameverts
  27. 27. ❑ 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
  28. 28. Can I use the page?
  29. 29. 41 When do users start interacting with a page? @tameverts
  30. 30. Largest Contentful Paint (LCP) Amount of time it takes for the largest visual element (image or video) to render Synthetic & RUM
  31. 31. 45 LCP can be tricky on mobile
  32. 32. 46 LCP can vary for first-view vs repeat visitors speedcurve.com/blog/element-timing-one-true-metric
  33. 33. 47 Largest LCP element can vary by viewport size speedcurve.com/blog/element-timing-one-true-metric
  34. 34. Largest Contentful Paint (often) correlates to bounce rate @tameverts
  35. 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
  36. 36. @tameverts
  37. 37. How does the page feel?
  38. 38. Cumulative Layout Shift (CLS) Aggregate score that reflects how much page elements shift during rendering Synthetic & RUM
  39. 39. 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/
  40. 40. ❑ 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 √
  41. 41. First Input Delay (FID) Amount of time it takes for the page to respond to user input (e.g., click, tap, key) RUM
  42. 42. No correlation when looking at all sessions speedcurve.com/blog/first-input-delay-google-core-web-vitals/ @tameverts
  43. 43. Stronger correlation at 75th percentile speedcurve.com/blog/first-input-delay-google-core-web-vitals/ @tameverts
  44. 44. ❑ 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 √ First Input Delay @tameverts
  45. 45. Long Tasks Any JavaScript function that takes >50ms to execute Long tasks don’t always block page rendering, but they can cause page jank Synthetic & RUM
  46. 46. 61
  47. 47. speedcurve.com/blog/first-input-delay-google-core-web-vitals/ Long Tasks (more often than FID) correlate to conversions @tameverts
  48. 48. 63 Long Tasks can reveal issues with third parties @tameverts
  49. 49. Interaction to Next Paint (INP) Measures a page's responsiveness to individual user interactions Observes latency and reports a single value which all (or nearly all) interactions were below RUM
  50. 50. Impact of INP on business and UX
  51. 51. Element Timing Measures when specified DOM elements are rendered (and works in SPAs) You decide which element(s) you want to measure RUM & Synthetic
  52. 52. speedcurve.com/blog/element-timing-one-true-metric/
  53. 53. 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 ☆ ★ ★ ★ ★ Cumulative Layout Shift ☆ ☆ ★ ★ First Input Delay ★ ★ Long Tasks ★ ★ ★ ★ ☆ Interaction to Next Paint ☆ ★ Element Timing ★ ★ ★ ★ ★ @tameverts
  54. 54. 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 ☆ ★ ★ ★ ★ Cumulative Layout Shift ☆ ☆ ★ ★ First Input Delay ★ ★ Long Tasks ★ ★ ★ ★ ☆ Interaction to Next Paint ☆ ★ Element Timing ★ ★ ★ ★ ★ @tameverts
  55. 55. What should my budget thresholds be?
  56. 56. performance budgets performance goals
  57. 57. 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
  58. 58. Priority 1 Create budgets to fight regression
  59. 59. 75 Find the worst result in your last 2-4 weeks of data @tameverts
  60. 60. 76 Make that number your performance budget @tameverts
  61. 61. As you optimize your pages (and hopefully get faster!) update your budgets
  62. 62. Priority 2 Set long-term goals
  63. 63. 79
  64. 64. How fast are my competitors? speedcurve.com/benchmarks/ @tameverts
  65. 65. @tameverts
  66. 66. How can I improve business metrics? @tameverts
  67. 67. @tameverts
  68. 68. How do I manage my budgets?
  69. 69. Should I set up budgets in RUM, synthetic, or both?
  70. 70. Scenario 1 Create budgets in RUM, and drill down via synthetic
  71. 71. @tameverts
  72. 72. Scenario 2 Create budgets in synthetic, and integrate with CI/CD
  73. 73. @tameverts
  74. 74. Should I create performance budgets for every metric I track?
  75. 75. Do I need performance budgets for all my pages?
  76. 76. 1. Product 2. Category 3. Home 4. Cart 5. Search @tameverts
  77. 77. Who should be responsible for managing budgets?
  78. 78. Everyone* who touches a page should understand the performance impact of their choices *Yes, this includes marketing people
  79. 79. “One of the original directives of the performance team was we weren’t going to set ourselves up to be performance cops.” Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/
  80. 80. Our goals • Set up best practices • Make recommendations • Be a resource within the company that people can turn to when they have to make performance-related decisions Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/
  81. 81. 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
  82. 82. Thanks! @tameverts
  83. 83. Performance Budgets 101 support.speedcurve.com/docs/performance-budgets-101 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/ Element Timing: One true metric to rule them all? speedcurve.com/blog/element-timing-one-true-metric/ First Input Delay: How vital is it? speedcurve.com/blog/first-input-delay-google-core-web-vitals/ Cumulative Layout Shift: What it measures (and what it doesn’t) speedcurve.com/blog/google-cumulative-layout-shift/

×