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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@tameverts webperf.social/@tammy

Slide 3

Slide 3 text

@tameverts

Slide 4

Slide 4 text

speedcurve.com/benchmarks

Slide 5

Slide 5 text

speedcurve.com/newsletter/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

“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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

What is a performance budget?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

budget exceeded fixed @tameverts oops

Slide 24

Slide 24 text

Which metrics should I focus on?

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

MVB

Slide 30

Slide 30 text

MVB Minimum Viable Budget

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

❑ 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

Slide 33

Slide 33 text

Is the page loading?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

So does conversion rate (again, typically) @tameverts

Slide 41

Slide 41 text

❑ 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

Slide 42

Slide 42 text

Can I use the page?

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

❑ 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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

❑ 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

Slide 51

Slide 51 text

How does the page feel?

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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/

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Page weight & complexity

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

@tameverts

Slide 68

Slide 68 text

YMMV

Slide 69

Slide 69 text

What should my budget thresholds be?

Slide 70

Slide 70 text

performance budgets ≠ performance goals

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Slide 75

Slide 75 text

demoralizing not actionable ignorable

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

How do I manage my budgets?

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

@tameverts

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@tameverts

Slide 83

Slide 83 text

Should I create performance budgets for every metric I track?

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Do I need performance budgets for all my pages?

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Who should be responsible for managing budgets?

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Thank you! @tameverts webperf.social/@tammy

Slide 96

Slide 96 text

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/