name: review-performance description: "Перфоманс-ревью web-фронтенда: LCP/CLS/INP, бандл, ререндеры, тяжёлые эффекты, эмбеды, mobile GPU; находки исправляются. Триггеры: «перфоманс ревью», «почему медленно», «проверь LCP/бандл»."
review-performance
Ревью стоимости исполнения. Scope по умолчанию — изменённый код; «весь web» —
по явному запросу. Контекст: LCP упирается в гидратацию RN Web
(docs/, память FE-1) — не предлагать заново defer-эксперименты, признанные no-op.
Шаги
- Известные правила проекта (проверяются первыми):
- живой
backdrop-filter: blur()на fixed/sticky на мобильном запрещён — статичный фростcolors.surfaceMuted; живой блюр только на десктопе; - изображения: reveal после декода на iOS Safari (
shouldShowWebImageImmediately),fetchPriorityтолько черезpriority; - third-party iframe (Instagram/YouTube) — только через lazy-facade, не живой iframe в начальном HTML.
- живой
- Поиск — делегируй
review-auditorпо углам:- main thread: тяжёлая синхронная работа в эффектах/рендере, forced layout
(
getBoundingClientRect/offsetHeightв циклах/observer-колбэках), отсутствие debounce у Mutation/Resize/Scroll-обработчиков; - ререндеры: нестабильные deps (объект/массив/функция без memo в props и deps), контекст-провайдеры с пересоздаваемым value, списки без стабильных key;
- бандл/стартап: import тяжёлых модулей на верхнем уровне общих экранов вместо
React.lazy/динамического import; web-only код, попадающий в native (и наоборот); - сеть: дублирующиеся запросы (мимо React Query), отсутствие
staleTimeу горячих запросов, неоптимизированные изображения мимо проксирования; - CLS: вставка/своп контента без зарезервированных габаритов.
- main thread: тяжёлая синхронная работа в эффектах/рендере, forced layout
(
- Верифицируй стоимость: для DOM/рендер-находок — числа (сколько вызовов, какой размер), не ощущения. Где можно — Lighthouse/preview-замер до/после.
- Чини подтверждённое, прогоняй Jest scope + typecheck + lint; визуальные свопы проверяй в preview (размеры до/после — CLS = 0).
- Отчёт: находка → измеренная стоимость → фикс → проверка.
Правила
- Не «оптимизировать» вслепую: каждая правка обоснована измерением или известным правилом проекта.
- Блюр/дизайн не отключать — только переводить на статичный фрост по правилу.
Related skills
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
Claude CodeCursoradvanced
890
234
3,463
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
claudeCursorWindsurfbeginner
259
72
1,362
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.
claudeCursorWindsurfintermediate
156
44
1,247