Performance
Overview
Frontend performance is the practice of making apps fast, responsive, and stable under real usage conditions.
Why It Matters
Performance affects user trust, conversion, and how often the app feels broken.
Core Concepts
- Measure before optimizing.
- Perceived speed matters as much as raw speed.
- Avoid unnecessary work on the main thread.
Mental Models
Look for expensive work in render, layout, network, and bundle size.
Best Practices
- Reduce duplicate renders and fetches.
- Split large bundles where useful.
- Optimize the slowest user path first.
Common Mistakes
- Optimizing the wrong metric.
- Adding memoization without evidence.
- Ignoring loading and interaction latency.
Trade-offs
Performance work can complicate code, so only optimize what actually hurts the user experience.
Decision Framework
flowchart TD
A[Slow experience] --> B{Where is the time spent?}
B --> C[Network]
B --> D[Render / JS]
B --> E[Layout / Paint]
B --> F[Bundle size]Examples
- Use skeletons to reduce perceived waiting.
- Defer heavy work until after the initial interaction.
Checklists
- Did I measure the slowdown?
- Is the fix user-visible?
- Did I verify the change on a slow device or connection?
Senior Engineer Notes
Senior engineers optimize the bottleneck, not every line. They also know when a tiny simplification beats a micro-optimization.