Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Site-Speed That Sticks
Search
Harry Roberts
November 14, 2024
Technology
10
680
Site-Speed That Sticks
Harry Roberts
November 14, 2024
Tweet
Share
More Decks by Harry Roberts
See All by Harry Roberts
How to Think Like a Performance Engineer
csswizardry
24
1.7k
cache rules everything
csswizardry
5
3.4k
My Website Is Slow! Where Do I Start?
csswizardry
5
480
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Get Your Head Straight
csswizardry
15
20k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.5k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9.3k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.5k
FaCSSt: CSS & Performance
csswizardry
26
4.1k
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
120
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
5.2k
How Community Opened Global Doors
hiroramos4
PRO
1
140
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
5.6k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
12k
Geminiとv0による高速プロトタイピング
shinya337
0
220
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
4.9k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
12k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
0
170
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Building an army of robots
kneath
306
45k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A better future with KSS
kneath
239
17k
Building Applications with DynamoDB
mza
95
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Transcript
site-speed that sticks
None
hi, i’m harry
None
five key topics
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook
metrics
not all metrics are born equal
different metrics for different people on different occasions with different
levels of disclosure
kpis, enablers, predictors
kpis
definition + target
what are we working toward?
of interest to the business
core web vitals
‘which number on which dashboard of which service?’
“We want a one-second improvement in Largest Contentful Paint.” —
My Client
None
None
None
enablers
metrics that directly influence kpis
of interest to engineering teams
ttfb, input delay
predictors
signals of good/bad performance
highly quantitative
of interest to engineers
bundle size, long tasks, blocking css
great for root-causing and reverse engineering
localhost
localhost is: seldom live-like, pretty dang fast, un-bundled
know your tools inside out
None
None
csswz.it/perfnow25
one weird trick…
None
// plugins/delay.server.ts export default defineNuxtPlugin(async () => { await new
Promise(resolve => setTimeout(resolve, 900)) })
None
None
<head> <link rel=stylesheet href=https://slowfil.es/file?type=css&delay=800> </head>
core web vitals are too big for localhost
if you’re working locally, measure locally
bare-metal metrics
None
None
1
1 2
1 2 3
1 2 3
None
None
1
1 2
1 2 3
1 2 3
external: 1842ms inlined: 1250ms
None
these are very private metrics
backstops
…and budgets
what is the worst possible performance we will accept?
set it to the worst reading in the last release
cycle
None
this is where synthetic testing comes into it
synthetic testing; real user monitoring
when to fail a release
None
predictors as tripwires
None
budgets versus targets
budgets are backstops; targets are ambitions
target == kpi
None
monitoring
the m in rum stands for monitoring
“Insanity is doing the same thing over and over again
and expecting different results.” — Rita Mae Brown
None
🎉
?
None
None
None
None
it’s the exact same file
None
you’re monitoring variation in tests
None
only alert on your kpis
None
None
0.9952409649
None
None
always follow the numbers
playbook
“Fighting regressions took priority over optimizations […]” — Michelle Vu,
Pinterest
None
it’s all for nothing if you don’t have a plan
response = f(severity, duration)
severity
acceptable: <10%
moderate: 10–25%
severe: 25–50%
critical: >50%
duration
temporary: 24–48hr
sustained: >48hr
long-term: >1 release cycle
unresolved: many release cycles
a kpi regression of over 10% for one week requires
remediation in the next sprint
a kpi regression of over 100% for one hour requires
rollback immediately
a kpi regression of over 25% for one day requires
remediation in the current sprint
an enabler regression of over any% for any time needs
the team’s attention over the next sprint
a predictor regression of over any% for any time needs
my attention over the next sprint
you need a framework to fill in these blanks
early triage
who, what, when, where, and why?
what?
what has regressed?
when?
when did it start? is it still like that?
where?
is it a business-critical part of the site?
who?
who owns the problem?
why?
can you conduct early triage?
None
None
None
None
None
None
key takeaways
increase confidence
use the right tool for the right job
have a plan of attack
agree; commit
thank you
harry.is/for-hire