Оптимизация рендера/бандла/Core Web Vitals (роль frontend). Use when нужно ускорить интерфейс — лишние ререндеры, тяжёлый бандл, плохие LCP/INP/CLS; сначала замер, потом правка по данным.
Installs into .claude/skills of the current project.
Are you the author of Frontend Optimize?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-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`.
