Performance Investigation
Overview
This playbook covers investigating slow pages, janky interactions, and expensive renders.
Why It Matters
Performance issues feel vague until you isolate the bottleneck.
Core Concepts
- Measure the slowdown.
- Identify the slow layer.
- Fix the bottleneck, not the symptom.
Mental Models
Work from user-visible slowness back to network, render, layout, or bundle cost.
Best Practices
- Use profiler and network data.
- Reproduce on realistic conditions.
- Verify the improvement after the fix.
Common Mistakes
- Optimizing blindly.
- Adding memoization without proof.
- Fixing one metric while hurting another.
Trade-offs
Performance improvements can add complexity, so they should target proven pain.
Decision Framework
flowchart TD
A[Slow experience] --> B{Network?}
B -->|Yes| C[Reduce requests or payload]
B -->|No| D{Render?}
D -->|Yes| E[Simplify or defer work]
D -->|No| F{Layout/Paint?}
F -->|Yes| G[Reduce visual churn]Examples
- Defer heavy work until after the first paint.
Checklists
- Did I measure before changing code?
- Is the bottleneck identified?
- Did the user-visible experience improve?
Senior Engineer Notes
Senior engineers let data drive performance work. “It feels slow” is the starting point, not the conclusion.