Główny wątek zablokowany: wysoki input delay, zanim obsługa w ogóle zadziała

Co się dzieje

Input delay to czas między kliknięciem użytkownika a chwilą, w której uruchamia się Twoja obsługa zdarzenia. Sama obsługa może być idealnie szybka — ale jeśli główny wątek jest w środku długiego zadania (hydracja, init analityki, timer parsujący dane), zdarzenie czeka w kolejce, aż to zadanie się skończy.

To jedyna faza INP, której Twoja obsługa nie naprawi, bo winowajcą jest inny kod, który akurat się wykonywał.

Jak rozpoznać

• Input delay dominuje w rozbiciu INP; processing time jest krótki.
• Problem jest sporadyczny: ten sam przycisk bywa szybki lub wolny zależnie od momentu kliknięcia.
• Najgorzej tuż po załadowaniu strony, gdy kod inicjalizacji, hydracja i skrypty zewnętrzne rywalizują o główny wątek.

Jak naprawić

• Znajdź długie zadania w DevTools Performance (bloki oznaczone na czerwono powyżej 50 ms) — poprawka dotyczy ich, a nie obsługi.
• Podziel pracę inicjalizacyjną na części za pomocą scheduler.yield() lub odłóż niekrytyczne fragmenty przez requestIdleCallback.
• Inicjalizuj funkcje leniwie przy pierwszym użyciu zamiast przy ładowaniu strony; ładuj skrypty zewnętrzne z async/defer.

Problem

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

Poprawka

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