review-performance

star 0

Перфоманс-ревью web-фронтенда MeTravel: LCP/CLS/INP, бандл, ререндеры, тяжёлые эффекты, third-party эмбеды, mobile GPU (backdrop-blur); находки исправляются. Триггеры: «перфоманс ревью», «почему медленно», «проверь LCP/бандл».

kelios By kelios schedule Updated 6/10/2026

name: review-performance description: >- Перфоманс-ревью web-фронтенда MeTravel: LCP/CLS/INP, бандл, ререндеры, тяжёлые эффекты, third-party эмбеды, mobile GPU (backdrop-blur); находки исправляются. Триггеры: «перфоманс ревью», «почему медленно», «проверь LCP/бандл».

review-performance

Ревью стоимости исполнения. Scope по умолчанию — изменённый код; «весь web» — по явному запросу. Контекст: LCP упирается в гидратацию RN Web (docs/, память FE-1) — не предлагать заново defer-эксперименты, признанные no-op.

Шаги

  1. Известные правила проекта (проверяются первыми):
    • живой backdrop-filter: blur() на fixed/sticky на мобильном запрещён — статичный фрост colors.surfaceMuted; живой блюр только на десктопе;
    • изображения: reveal после декода на iOS Safari (shouldShowWebImageImmediately), fetchPriority только через priority;
    • third-party iframe (Instagram/YouTube) — только через lazy-facade, не живой iframe в начальном HTML.
  2. Поиск — делегируй 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: вставка/своп контента без зарезервированных габаритов.
  3. Верифицируй стоимость: для DOM/рендер-находок — числа (сколько вызовов, какой размер), не ощущения. Где можно — Lighthouse/preview-замер до/после.
  4. Чини подтверждённое, прогоняй Jest scope + typecheck + lint; визуальные свопы проверяй в preview (размеры до/после — CLS = 0).
  5. Отчёт: находка → измеренная стоимость → фикс → проверка.

Правила

  • Не «оптимизировать» вслепую: каждая правка обоснована измерением или известным правилом проекта.
  • Блюр/дизайн не отключать — только переводить на статичный фрост по правилу.
Install via CLI
npx skills add https://github.com/kelios/metravel2 --skill review-performance
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator