Main Thread blockiert: hoher Input Delay, bevor dein Handler überhaupt läuft

Was passiert

Der Input Delay ist die Zeit zwischen dem Klick des Nutzers und dem Moment, in dem dein Event-Handler startet. Der Handler selbst kann perfekt schnell sein — aber wenn der Main Thread mitten in einer langen Aufgabe steckt (Hydration, Analytics-Init, ein Timer, der Daten parst), wartet das Event in der Warteschlange, bis diese Aufgabe fertig ist.

Das ist die einzige INP-Phase, die dein Handler nicht beheben kann, weil der Schuldige anderer Code ist, der zufällig lief.

So erkennst du es

• Der Input Delay dominiert die INP-Aufschlüsselung; die Processing Time ist kurz.
• Das Problem ist sporadisch: dieselbe Schaltfläche ist schnell oder langsam, je nachdem wann du klickst.
• Am schlimmsten ist es direkt nach dem Laden der Seite, wenn Init-Code, Hydration und Drittanbieter-Skripte um den Main Thread konkurrieren.

So behebst du es

• Finde die langen Aufgaben in den DevTools Performance (rot markierte Blöcke über 50 ms) — die Lösung zielt auf sie, nicht auf den Handler.
• Teile die Init-Arbeit mit scheduler.yield() in Blöcke auf, oder verschiebe unkritische Teile mit requestIdleCallback.
• Initialisiere Funktionen lazy beim ersten Gebrauch statt beim Seitenladen; lade Drittanbieter-Skripte mit async/defer.

Problem

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

Lösung

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