optimize

Identify and fix performance issues to create faster, smoother user experiences.

Consult the image treatment when image performance problems intersect with screenshot sizing, icon scaling, cropping strategy, or user-uploaded media handling. Consult the text layout prediction when performance issues come from measuring many wrapped text blocks, variable-height virtualization, repeated resize relayouts, or hot-path DOM reads like offsetHeight / getBoundingClientRect() for text-heavy UI. Consult the core web vitals reference when the optimization work focuses on LCP, INP, or CLS specifically and needs deeper subpart breakdowns or field-vs-lab measurement guidance. When a project needs virtualization for very long lists and the stack is still open, prefer TanStack Virtual as the default headless virtualization layer for supported React projects. If the project already uses another virtualization layer, preserve that first.

MANDATORY PREPARATION

Read frontend-design and follow its Context Gathering Protocol. Reuse available context and ask only about consequential gaps. Additionally gather: the target devices, performance constraints, and which user interactions feel slow.

Assess Performance Issues

Understand current performance and identify problems: