Real User Performance Metrics at Stitch Fix
⚡️⏲⚡️
Real User Metrics (RUM)🍹
Real User Metrics (RUM)🍹
Metrics read from a client's machine.
Not inferred; measurements of the
actual client experience.
Lab Metrics 👩🏻🔬
Lab Metrics👩🏻🔬
Metrics recorded in a controlled system (the "lab").
Estimated but repeatable results.
Why are performance metrics important?
🙂
🙂 💰
🙂
Our Tools: the Reporter and the Service
The Reporter 📰
A client side tool that that reads and posts
browser-provided performance data.
Platform metrics
Metrics that matter to all client facing apps.
Platform metrics
Metrics that matter to all client facing apps.
Navigation timings
Time to first byte
Time to interactive
Time to first paint
Application metrics
Metrics specific to a particular app's code and goals.
Application metrics
Metrics specific to a particular app's code and goals.
Application execution time
Function execution time
Resources and aggregate resource timings
Perceived Perf RUM
Hero fonts loaded
Hero images loaded
React app hydration
Perceived Perf RUM
Hero fonts loaded
Hero images loaded
React app hydration
Async data fetching
Time from user interaction to update
Perceived Perf RUM
Measurements of real user experience.
The Service 🔧
A standalone back-end service that filters, tags,
and publishes performance data.
Filter
Browsers are weird!
Remove invalid and outlier data.
Filter
Filter
Data must be actionable.
Tag
What metadata do we have?
Tag
What metadata do we have?
Effective network type
Tag
What metadata do we have?
Effective network type
Route
Region
Browser and Device groupings
So what do we get?
Title Text
How has this data affected our work?
Validating investments
Validating investments
Identifying Regressions
Validating investments
Identifying Regressions
Setting baselines and exposing
areas for improvement
Validating investments
Identifying Regressions