Measure before optimizing
Use browser performance tools and real user metrics to find the largest bottleneck. A faster component is not useful if the actual problem is an oversized image, a slow API, or a layout shift.
Reduce the initial payload
- Prefer server rendering for content that does not need client interaction.
- Lazy-load heavy widgets and below-the-fold images.
- Remove unused dependencies and split large feature bundles.
Control rendering work
Keep state close to the components that use it, avoid recreating expensive values on every render, and use memoization only when profiling shows a benefit. Stable list keys are essential for predictable updates.
Protect the experience on slow devices
Use skeletons and progressive loading instead of blocking the entire page. Test with CPU throttling, a small viewport, and a slow network profile before calling the work complete.