Optimize

Коли використовувати

/impeccable optimize призначений для інтерфейсів, які відчуваються повільними. Перший рендер триває вічно, скролінг риветься, зображення з’являються з запізненням, взаємодії відчуваються млявими, бандл відправляє 800KB JavaScript. Використовуйте його, коли Web Vitals погані або коли користувачі скаржаться, що все повільне.

Не використовуйте як передчасну оптимізацію. Якщо LCP 1.1с, а INP 80мс — зупиніться. Дизайнерська робота важливіша.

Як це працює

Навичка працює через п’ять вимірів продуктивності:

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 image preloaded (-800ms)
  - Removed render-blocking font stylesheet (-240ms)
  - Deferred analytics script (-180ms)

INP: 240ms → 90ms
  - Debounced scroll handler
  - Memoized expensive list render
  - Removed synchronous layout read in event loop

CLS: 0.18 → 0.02
  - Set dimensions on hero image and logo
  - Reserved space for async header badge

Bundle: 340KB → 180KB
  - Removed unused lodash import (52KB)
  - Code-split the playground route (78KB)
  - Dropped deprecated icon set (30KB)

Підводні камені

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