React Performance and Delivery Optimization

When to use

Invoke when establishing performance budgets and delivery optimization for a React app, when translating performance-architecture.md per-route budgets into code-splitting/asset/CI posture, or when remediating a Web Vitals regression.

Do not use for: scaffolding (use react-app-scaffold-and-runtime), route topology (use react-routing-and-rendering-strategy), state/data fetching (use react-state-management-and-data-fetching), or design-system/a11y (use react-design-system-and-accessibility). For one-off profiling of a single component, that is engineering work, not this architecture-driven skill.

Inputs

Required:

• The other react archetypes exist (scaffold provides web-vitals RUM wiring; routing provides the route segments to split along).
• Approved performance-architecture.md with per-route or per-journey budgets: LCP, CLS, INP, TTFB targets and the JS bundle budget, plus the measurement point.

Optional: