Головний потік зайнятий: великий input delay ще до запуску обробника

Що відбувається

Input delay — час між кліком користувача й моментом старту вашого обробника. Сам обробник може бути ідеально швидким — але якщо головний потік у середині довгої задачі (гідрація, ініціалізація аналітики, таймер із парсингом даних), подія чекає в черзі, поки та задача не закінчиться.

Це єдина фаза INP, яку не виправити в самому обробнику: винен інший код, який випадково виконувався в цей момент.

Як розпізнати

• Input delay домінує в розбивці INP; processing time короткий.
• Проблема плаваюча: одна й та сама кнопка то швидка, то повільна — залежить від моменту кліку.
• Найгірше одразу після завантаження сторінки, коли ініціалізація, гідрація та сторонні скрипти конкурують за головний потік.

Як виправити

• Знайдіть довгі задачі в DevTools Performance (блоки з червоною позначкою, довші за 50 мс) — лагодити треба їх, а не обробник.
• Розбийте ініціалізацію на частини через scheduler.yield(), некритичне відкладіть у requestIdleCallback.
• Ініціалізуйте фічі ліниво при першому використанні, а не при завантаженні; сторонні скрипти вантажте з async/defer.

Проблема

// at page load: one 800 ms task — every click during it waits
initAnalytics()
buildSearchIndex(allProducts)
prefetchRecommendations()

Виправлення

initAnalytics()
await scheduler.yield()                  // events can run between steps
buildSearchIndex(allProducts)
requestIdleCallback(() => prefetchRecommendations())