Optimize

/impeccable optimize

Good fit

• Интерфейс кажется медленным, дёрганым или тяжёлым.
• Вам нужно снизить стоимость без уничтожения дизайна.
• Производительность стала видимой проблемой продукта.

Когда использовать

/impeccable optimize — для интерфейсов, которые ощущаются медленными. Первая отрисовка длится вечность, прокрутка дёргается, изображения появляются с опозданием, взаимодействия ощущаются вялыми, бандл поставляет 800KB JavaScript. Используйте, когда Web Vitals плохие или когда пользователи жалуются на медлительность.

Не используйте как преждевременную оптимизацию. Если LCP 1.1s и INP 80ms, остановитесь. Дизайнерская работа важнее.

Как это работает

Навык проходит через пять измерений производительности:

1. Загрузка и Web Vitals: LCP, INP, CLS. Определение, что блокирует первую отрисовку, что задерживает взаимодействие, что сдвигает макет.
2. Рендеринг: ненужные перерендеры, отсутствующая мемоизация, тяжёлое согласование, перекомпоновка макета в циклах.
3. Анимации: анимирует ли что-то свойства макета, являются ли transform и opacity единственными затрагиваемыми свойствами, помогает или вредит will-change.
4. Изображения и ресурсы: ленивая загрузка, адаптивные изображения (srcset, sizes), современные форматы (WebP, AVIF), заданные размеры для предотвращения CLS.
5. Размер бандла: неиспользуемые импорты, слишком большие зависимости, отсутствующее разделение кода, мёртвый код.

Навык измеряет до и после. Каждое исправление квантифицировано. Если изменение не двигает метрику, оно откатывается.

Попробуйте

/impeccable optimize the homepage

Ожидаемый результат:

LCP: 3.2s → 1.4s
  - Hero-изображение предзагружено (-800ms)
  - Удалён блокирующий рендеринг font stylesheet (-240ms)
  - Отложен скрипт аналитики (-180ms)

INP: 240ms → 90ms
  - Debounced обработчик прокрутки
  - Мемоизирован тяжёлый рендер списка
  - Удалён синхронный layout read в цикле событий

CLS: 0.18 → 0.02
  - Заданы размеры hero-изображения и логотипа
  - Зарезервировано место для асинхронного значка в шапке

Bundle: 340KB → 180KB
  - Удалён неиспользуемый импорт lodash (52KB)
  - Разделён код маршрута playground (78KB)
  - Удалён устаревший набор иконок (30KB)

Подводные камни

• Оптимизация без измерений. Без базовых метрик вы не можете сказать, что помогло. Запускайте /impeccable optimize с конкретными числами Web Vitals, а не на ощущениях.
• Погоня за мелкими улучшениями. Улучшение INP на 20ms, занимающее неделю, редко того стоит. Optimize имеет убывающую отдачу; знайте, когда остановиться.
• Забывание повторно измерять после каждого изменения. Сборка могла ухудшить всё так, как навык не предсказал. Проверяйте.

Related commands

• Audit
• Harden
• Animate