Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Site-Speed That Sticks

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Harry Roberts Harry Roberts
November 14, 2024
Technology
1.3k
13

Site-Speed That Sticks

Avatar for Harry Roberts

Harry Roberts

November 14, 2024

More Decks by Harry Roberts

See All by Harry Roberts
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
480
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.8k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
590
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.8k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
21k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.7k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
10k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.9k

Other Decks in Technology

See All in Technology
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
3
280
関数型の考えを TypeScript に持ち込んで、テストしやすい純粋関数を増やす / Pure at the Core, Effects at the Edge: Bringing Functional Thinking into TypeScript
Avatar for 株式会社カミナシ kaminashi
2
130
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
320
生成AI×AWS CDK×AWS FISで"振り返れる"ミニGameDayをつくろう
Avatar for yoshimi0227 yoshimi0227
1
260
Network Firewallやっていき！
Avatar for 荒木 ARK news_it_enj
0
150
ソニー銀行におけるビジネスアジリティ向上のためのクラウドシフト戦略
Avatar for srenext srenext
0
430
【Claude Code】鹿野さんに聞く 私の推しの並行開発環境 大公開 / claude-code-parallel-2026-07-15
Avatar for tonkotsuboy_com tonkotsuboy_com
12
8.4k
LLM/Agent評価：トップ営業の発言を「正解」にする 〜暗黙的正解による評価を営業資産に変える〜
Avatar for Hirotaka takkuhiro
1
230
ゴールデンパスは敷いただけでは道にならない ─ 企画部門のエンジニアが技術標準を事業価値に変えるまで
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
180
AI Driven AI Governance
Avatar for Yutaka Hiroyama pict3
0
470
[2026-07-15] AI Ready なはずだったアーキテクチャと、見えてきた課題・次に目指す状態
Avatar for 和田 悠佑 wxyzzz
9
3.9k
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
4
1.4k

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
45k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
210
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
230
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
410
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k

Transcript

  1. site-speed that sticks

  2. None

  3. hi, i’m harry

  4. None

  5. five key topics

  6. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  7. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  8. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  9. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  10. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  11. 1. metrics 2. localhost 3. backstops 4. monitoring 5. playbook

  12. metrics

  13. not all metrics are born equal

  14. different metrics for different people on different occasions with different

    levels of disclosure

  15. kpis, enablers, predictors

  16. kpis

  17. definition + target

  18. what are we working toward?

  19. of interest to the business

  20. core web vitals

  21. ‘which number on which dashboard of which service?’

  22. “We want a one-second improvement in Largest Contentful Paint.” —

    My Client
  23. None
  24. None
  25. None

  26. enablers

  27. metrics that directly influence kpis

  28. of interest to engineering teams

  29. ttfb, input delay

  30. predictors

  31. signals of good/bad performance

  32. highly quantitative

  33. of interest to engineers

  34. bundle size, long tasks, blocking css

  35. great for root-causing and reverse engineering

  36. localhost

  37. localhost is: seldom live-like, pretty dang fast, un-bundled

  38. know your tools inside out

  39. None
  40. None

  41. csswz.it/perfnow25

  42. one weird trick…

  43. None

  44. // plugins/delay.server.ts export default defineNuxtPlugin(async () => { await new

    Promise(resolve => setTimeout(resolve, 900)) })
  45. None
  46. None

  47. <head> <link rel=stylesheet href=https://slowfil.es/file?type=css&delay=800> </head>

  48. core web vitals are too big for localhost

  49. if you’re working locally, measure locally

  50. bare-metal metrics

  51. None
  52. None

  53. 1

  54. 1 2

  55. 1 2 3

  56. 1 2 3

  57. None
  58. None

  59. 1

  60. 1 2

  61. 1 2 3

  62. 1 2 3

  63. external: 1842ms inlined: 1250ms

  64. None

  65. these are very private metrics

  66. backstops

  67. …and budgets

  68. what is the worst possible performance we will accept?

  69. set it to the worst reading in the last release

    cycle
  70. None

  71. this is where synthetic testing comes into it

  72. synthetic testing; real user monitoring

  73. when to fail a release

  74. None

  75. predictors as tripwires

  76. None

  77. budgets versus targets

  78. budgets are backstops; targets are ambitions

  79. target == kpi

  80. None

  81. monitoring

  82. the m in rum stands for monitoring

  83. “Insanity is doing the same thing over and over again

    and expecting different results.” — Rita Mae Brown
  84. None

  85. 🎉

  86. ?

  87. None
  88. None
  89. None
  90. None

  91. it’s the exact same file

  92. None

  93. you’re monitoring variation in tests

  94. None

  95. only alert on your kpis

  96. None
  97. None

  98. 0.9952409649

  99. None
  100. None

  101. always follow the numbers

  102. playbook

  103. “Fighting regressions took priority over optimizations […]” — Michelle Vu,

    Pinterest
  104. None

  105. it’s all for nothing if you don’t have a plan

  106. response = f(severity, duration)

  107. severity

  108. acceptable: <10%

  109. moderate: 10–25%

  110. severe: 25–50%

  111. critical: >50%

  112. duration

  113. temporary: 24–48hr

  114. sustained: >48hr

  115. long-term: >1 release cycle

  116. unresolved: many release cycles

  117. a kpi regression of over 10% for one week requires

    remediation in the next sprint

  118. a kpi regression of over 100% for one hour requires

    rollback immediately

  119. a kpi regression of over 25% for one day requires

    remediation in the current sprint

  120. an enabler regression of over any% for any time needs

    the team’s attention over the next sprint

  121. a predictor regression of over any% for any time needs

    my attention over the next sprint

  122. you need a framework to fill in these blanks

  123. early triage

  124. who, what, when, where, and why?

  125. what?

  126. what has regressed?

  127. when?

  128. when did it start? is it still like that?

  129. where?

  130. is it a business-critical part of the site?

  131. who?

  132. who owns the problem?

  133. why?

  134. can you conduct early triage?

  135. None
  136. None
  137. None
  138. None
  139. None
  140. None

  141. key takeaways

  142. increase confidence

  143. use the right tool for the right job

  144. have a plan of attack

  145. agree; commit

  146. thank you

  147. harry.is/for-hire