INP (Interaction to Next Paint)

Definition

INP (Interaction to Next Paint) ist seit März 2024 eine Core Web Vital Metrik, die die Reaktionsgeschwindigkeit einer Seite auf alle Nutzerinteraktionen (Klicks, Tippen, Tastatureingaben) während des gesamten Seitenbesuchs misst. Sie ersetzt den FID (First Input Delay) und bewertet das 98. Perzentil aller Interaktions-Latenzen. Ein guter INP-Wert liegt unter 200 Millisekunden.

Erläuterung

INP misst die Zeit vom Nutzereingabe-Event bis zum nächsten Frame-Update im Browser, also wie schnell die Seite visuell auf eine Interaktion reagiert. Häufige Ursachen für schlechte INP-Werte sind langlaufende JavaScript-Tasks, die den Main-Thread blockieren, und ineffiziente Event-Handler. Optimierungsansätze umfassen: Aufteilen langer JavaScript-Aufgaben in kleinere Chunks mit setTimeout oder requestIdleCallback, Auslagerung von Berechnungen in Web Workers und Minimierung des DOM-Umfangs. Das Profiling-Tool in Chrome DevTools (Performance Panel) zeigt genau, welche JavaScript-Aufgaben den Main-Thread blockieren. React 18s Concurrent Mode und Transitions ermoglichen das Priorisieren von UI-Updates, was INP-Werte deutlich verbessern kann.

Praxistipp: Nutzen Sie das Chrome DevTools Performance Panel, um Long Tasks zu identifizieren, die länger als 50 Millisekunden laufen und Nutzerinteraktionen blockieren. Reduzieren Sie die Ausführungszeit von Event-Handlern auf das Minimum und verschieben Sie nicht-dringende Berechnungen in den Hintergrund.