Главный поток занят: большой 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())