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

1. Real-World
Performance Budgets
@tameverts
#perfnow

2. @tameverts

4. @tameverts

5. speedcurve.com/benchmarks/
@tameverts

6. How fast should my pages be
to keep my visitors happy?
How can I make sure they stay
fast?

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

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

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

14. Minimum Viable Budget

15. What is a performance
budget?

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

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

18. budget
exceeded fixed
@tameverts

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

21. Which metrics
should I focus on?

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

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

26. Photo by Brett Cagle on Unsplash

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

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

31. Is the page loading?

32. Backend time
AKA Time to First Byte (TTFB)
Synthetic & RUM

34. ❑ 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
√

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

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

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

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

40. Can I use the page?

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

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

45. 45
LCP can be tricky on mobile

46. 46
LCP can vary for first-view vs repeat visitors
speedcurve.com/blog/element-timing-one-true-metric

47. 47
Largest LCP element can vary by viewport size
speedcurve.com/blog/element-timing-one-true-metric

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

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

50. @tameverts

51. How does the page
feel?

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

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

55. ❑ 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
√

56. First Input Delay (FID)
Amount of time it takes for the page
to respond to user input
(e.g., click, tap, key)
RUM

57. No correlation when looking at all sessions
speedcurve.com/blog/first-input-delay-google-core-web-vitals/
@tameverts

58. Stronger correlation at 75th percentile
speedcurve.com/blog/first-input-delay-google-core-web-vitals/
@tameverts

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

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

61. 61

62. speedcurve.com/blog/first-input-delay-google-core-web-vitals/
Long Tasks (more often than FID) correlate to conversions
@tameverts

63. 63
Long Tasks can reveal issues with third parties
@tameverts

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

65. Impact of INP on business and UX

66. Element Timing
Measures when specified DOM elements are rendered (and
works in SPAs)
You decide which element(s) you want to measure
RUM & Synthetic

67. speedcurve.com/blog/element-timing-one-true-metric/

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

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

71. What should
my budget thresholds be?

72. performance
budgets
performance goals

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

74. Priority 1
Create budgets
to fight regression

75. 75
Find the worst result in your last 2-4 weeks of data
@tameverts

76. 76
Make that number your performance budget
@tameverts

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

78. Priority 2
Set long-term goals

79. 79

80. How fast are my competitors?
speedcurve.com/benchmarks/
@tameverts

81. @tameverts

82. How can I improve business metrics?
@tameverts

83. @tameverts

84. How do I manage
my budgets?

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

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

87. @tameverts

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

89. @tameverts

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

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

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

96. Who should be responsible
for managing budgets?

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

98. “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/

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

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

102. Thanks!
@tameverts

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