Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
site-speed that sticks
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
hi, i’m harry
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
five key topics
Slide 6
Slide 6 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 7
Slide 7 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 8
Slide 8 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 9
Slide 9 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 10
Slide 10 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 11
Slide 11 text
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
Slide 12
Slide 12 text
metrics
Slide 13
Slide 13 text
not all metrics are born equal
Slide 14
Slide 14 text
different metrics for different people on different occasions with different levels of disclosure
Slide 15
Slide 15 text
kpis, enablers, predictors
Slide 16
Slide 16 text
kpis
Slide 17
Slide 17 text
definition + target
Slide 18
Slide 18 text
what are we working toward?
Slide 19
Slide 19 text
of interest to the business
Slide 20
Slide 20 text
core web vitals
Slide 21
Slide 21 text
‘which number on which dashboard of which service?’
Slide 22
Slide 22 text
“We want a one-second improvement in Largest Contentful Paint.” — My Client
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
enablers
Slide 27
Slide 27 text
metrics that directly influence kpis
Slide 28
Slide 28 text
of interest to engineering teams
Slide 29
Slide 29 text
ttfb, input delay
Slide 30
Slide 30 text
predictors
Slide 31
Slide 31 text
signals of good/bad performance
Slide 32
Slide 32 text
highly quantitative
Slide 33
Slide 33 text
of interest to engineers
Slide 34
Slide 34 text
bundle size, long tasks, blocking css
Slide 35
Slide 35 text
great for root-causing and reverse engineering
Slide 36
Slide 36 text
localhost
Slide 37
Slide 37 text
localhost is: seldom live-like, pretty dang fast, un-bundled
Slide 38
Slide 38 text
know your tools inside out
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
csswz.it/perfnow25
Slide 42
Slide 42 text
one weird trick…
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
// plugins/delay.server.ts export default defineNuxtPlugin(async () => { await new Promise(resolve => setTimeout(resolve, 900)) })
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Slide 48
Slide 48 text
core web vitals are too big for localhost
Slide 49
Slide 49 text
if you’re working locally, measure locally
Slide 50
Slide 50 text
bare-metal metrics
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
1
Slide 54
Slide 54 text
1 2
Slide 55
Slide 55 text
1 2 3
Slide 56
Slide 56 text
1 2 3
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
1
Slide 60
Slide 60 text
1 2
Slide 61
Slide 61 text
1 2 3
Slide 62
Slide 62 text
1 2 3
Slide 63
Slide 63 text
external: 1842ms inlined: 1250ms
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
these are very private metrics
Slide 66
Slide 66 text
backstops
Slide 67
Slide 67 text
…and budgets
Slide 68
Slide 68 text
what is the worst possible performance we will accept?
Slide 69
Slide 69 text
set it to the worst reading in the last release cycle
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
this is where synthetic testing comes into it
Slide 72
Slide 72 text
synthetic testing; real user monitoring
Slide 73
Slide 73 text
when to fail a release
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
predictors as tripwires
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
budgets versus targets
Slide 78
Slide 78 text
budgets are backstops; targets are ambitions
Slide 79
Slide 79 text
target == kpi
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
monitoring
Slide 82
Slide 82 text
the m in rum stands for monitoring
Slide 83
Slide 83 text
“Insanity is doing the same thing over and over again and expecting different results.” — Rita Mae Brown
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
🎉
Slide 86
Slide 86 text
?
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
it’s the exact same file
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
you’re monitoring variation in tests
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
only alert on your kpis
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
0.9952409649
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
always follow the numbers
Slide 102
Slide 102 text
playbook
Slide 103
Slide 103 text
“Fighting regressions took priority over optimizations […]” — Michelle Vu, Pinterest
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
it’s all for nothing if you don’t have a plan
Slide 106
Slide 106 text
response = f(severity, duration)
Slide 107
Slide 107 text
severity
Slide 108
Slide 108 text
acceptable: <10%
Slide 109
Slide 109 text
moderate: 10–25%
Slide 110
Slide 110 text
severe: 25–50%
Slide 111
Slide 111 text
critical: >50%
Slide 112
Slide 112 text
duration
Slide 113
Slide 113 text
temporary: 24–48hr
Slide 114
Slide 114 text
sustained: >48hr
Slide 115
Slide 115 text
long-term: >1 release cycle
Slide 116
Slide 116 text
unresolved: many release cycles
Slide 117
Slide 117 text
a kpi regression of over 10% for one week requires remediation in the next sprint
Slide 118
Slide 118 text
a kpi regression of over 100% for one hour requires rollback immediately
Slide 119
Slide 119 text
a kpi regression of over 25% for one day requires remediation in the current sprint
Slide 120
Slide 120 text
an enabler regression of over any% for any time needs the team’s attention over the next sprint
Slide 121
Slide 121 text
a predictor regression of over any% for any time needs my attention over the next sprint
Slide 122
Slide 122 text
you need a framework to fill in these blanks
Slide 123
Slide 123 text
early triage
Slide 124
Slide 124 text
who, what, when, where, and why?
Slide 125
Slide 125 text
what?
Slide 126
Slide 126 text
what has regressed?
Slide 127
Slide 127 text
when?
Slide 128
Slide 128 text
when did it start? is it still like that?
Slide 129
Slide 129 text
where?
Slide 130
Slide 130 text
is it a business-critical part of the site?
Slide 131
Slide 131 text
who?
Slide 132
Slide 132 text
who owns the problem?
Slide 133
Slide 133 text
why?
Slide 134
Slide 134 text
can you conduct early triage?
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
key takeaways
Slide 142
Slide 142 text
increase confidence
Slide 143
Slide 143 text
use the right tool for the right job
Slide 144
Slide 144 text
have a plan of attack
Slide 145
Slide 145 text
agree; commit
Slide 146
Slide 146 text
thank you
Slide 147
Slide 147 text
harry.is/for-hire