Interaction to Next Paint (INP)
Interaction to Next Paint (INP) ist eine Core-Web-Vitals-Kennzahl, die misst, wie lange eine Seite benötigt, um nach einer Nutzerinteraktion — Klick, Tippen oder Tastendruck — visuell zu reagieren. Im März 2024 erhob Google INP zu einem offiziellen Ranking-Faktor und ersetzte damit First Input Delay (FID).
Interaction to Next Paint (INP) ist eine Core-Web-Vitals-Kennzahl, die misst, wie lange eine Seite benötigt, um nach einer Nutzerinteraktion — Klick, Tippen oder Tastendruck — visuell zu reagieren. Im März 2024 erhob Google INP zu einem offiziellen Ranking-Faktor und ersetzte damit First Input Delay (FID).
Warum es wichtig ist
FID erfasste nur die Verzögerung der ersten Interaktion, doch INP verfolgt jede Interaktion über den gesamten Lebenszyklus der Seite und bewertet anhand der langsamsten. Das spiegelt wider, was Nutzer tatsächlich empfinden. Laut Google scheitern Stand 2026 etwa 36 % der Desktop-Seiten und 45 % der mobilen Seiten weiterhin am Schwellenwert "Gut" — was die INP-Optimierung zu einem klaren Unterscheidungsmerkmal gegenüber konkurrierenden Seiten macht.
Schwellenwerte
| Bewertung | INP-Wert |
|---|---|
| Gut | ≤ 200 ms |
| Verbesserungsbedürftig | 200 bis 500 ms |
| Schlecht | > 500 ms |
Bewertet am 75. Perzentil (p75) der Daten realer Nutzer aus dem Chrome User Experience Report (CrUX).
Was INP verlangsamt
Lange JavaScript-Aufgaben: Jede Aufgabe, die den Hauptthread länger als 50 ms blockiert, verhindert die nächste Interaktion.
Eingabeverzögerung: Die Zeit, bevor ein Event-Handler ausgeführt wird, weil der Hauptthread mit anderer Arbeit beschäftigt ist.
Darstellungsverzögerung: Die Zeit zwischen dem Abschluss der Ereignisbehandlung und dem Zeichnen des nächsten Frames durch den Browser — typischerweise durch komplexe DOM- oder Layout-Änderungen verursacht.
So optimieren Sie
Lange Aufgaben aufteilen: Verwenden Sie setTimeout, scheduler.yield() oder requestIdleCallback, um Aufgaben aufzuteilen, die länger als 50 ms dauern.
Event-Handler schlank halten: Führen Sie keine aufwendige Arbeit innerhalb eines Klick-Handlers aus — verschieben Sie sie hinter den nächsten requestAnimationFrame.
Unnötige Re-Renderings verhindern: Verwenden Sie in React memo, useMemo und useCallback, um redundante Aktualisierungen zu vermeiden.
CSS contain verwenden: Eigenschaften wie contain: content begrenzen den Layout- und Paint-Bereich und machen das Rendern von Frames günstiger.
Skripte von Drittanbietern verschieben: Laden Sie Anzeigen, Analyse-Tools und Chat-Widgets mit async/defer, damit sie Interaktionen nicht blockieren.
Messwerkzeuge: Verwenden Sie PageSpeed Insights, die Web-Vitals-Chrome-Erweiterung und den Core-Web-Vitals-Bericht der Search Console für echte INP-Daten.
Sources: