Optimize

Кога да се използва

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

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

Как работи

Умението работи през пет измерения на производителност:

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

Умението измерва преди и след. Всяка поправка се квантифицира. Ако промяна не помръдва метрика, тя се връща обратно.

Пробвайте

/impeccable optimize the homepage

Очаквана форма:

LCP: 3.2s → 1.4s
  - Hero изображението предварително заредено (-800ms)
  - Премахнат render-блокиращ шрифтов стилов лист (-240ms)
  - Отложен аналитичен скрипт (-180ms)

INP: 240ms → 90ms
  - Debounced scroll handler
  - Мемоизирано скъпо рендериране на списък
  - Премахнато синхронно четене на layout в цикъла на събитията

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

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

Клопки

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