Frontend Optimize

---
name: frontend-optimize
description: Оптимизация рендера/бандла/Core Web Vitals (роль frontend). Use when нужно ускорить интерфейс — лишние ререндеры, тяжёлый бандл, плохие LCP/INP/CLS; сначала замер, потом правка по данным.
---

# Задача: оптимизация фронтенда

Оптимизируй указанное пользователем.

Оптимизация без измерений — гадание: сначала метрики «до», потом правка по данным, потом те же метрики «после».

1. Измерь базовую линию: React Profiler (какие компоненты и почему перерендериваются), бандл-анализ (`next build` + analyzer), Lighthouse/Core Web Vitals (LCP/INP/CLS); зафиксируй числа.
2. Найди первопричину по данным: лишний клиентский JS, нестабильные пропсы/контекст, тяжёлые зависимости, незакэшированные данные, сдвиги layout.
3. Применяй меры по одной: больше Server Components, code-splitting/`dynamic`, мемоизация против реальных перерендеров, `next/image`/`next/font`, кэш и ревалидация (`revalidateTag`/`staleTime` Query), резервирование места против CLS.
4. Доказательство: повтори замеры из шага 1 и покажи таблицу «до → после» по каждой метрике (размер бандла, число ререндеров, LCP/INP/CLS); правку без измеримого выигрыша откати.
5. Проверь, что поведение не сломано: тесты компонентов зелёные.

Если цель не указана — спроси, что тормозит (страница, компонент, метрика), или начни с худшей страницы по Lighthouse. Если узкое место на бэкенде (медленный API) — скажи честно и передай в `$backend-optimize`.

Опирайся на `$react`, `$nextjs`, `$data-fetching`.