INP (Interaction to Next Paint) erklärt

Was ist INP?

Interaction to Next Paint misst, wie lange es dauert, bis eine Webseite nach einer Eingabe sichtbar reagiert. Eine Interaktion umfasst drei Phasen: die Verzögerung, bis der Browser die Eingabe überhaupt bearbeiten kann (Input Delay), die Zeit für die Ausführung der Event-Handler (Processing Time) und die Zeit, bis der Browser das neue Bild zeichnet (Presentation Delay). Die Summe ist die Latenz einer Interaktion.

Anders als sein Vorgänger First Input Delay, der nur die Verzögerung der ersten Eingabe betrachtete, berücksichtigt INP alle Klicks, Tipps und Tastendrücke während der gesamten Zeit auf der Seite. Als Wert wird bei vielen Interaktionen ein Wert nahe der längsten gemeldet; seltene Ausreißer werden herausgerechnet. Scrollen und Hover zählen nicht. Seit dem 12. März 2024 ist INP offizieller Core Web Vital und hat FID abgelöst.

Welche Werte sind gut?

Google definiert drei Bereiche, jeweils bewertet am 75. Perzentil der echten Seitenaufrufe, getrennt nach Mobil und Desktop:

Die echten Nutzerdaten stammen etwa aus dem Chrome User Experience Report oder aus eigener Messung. Laborwerkzeuge wie Lighthouse kennen keinen INP im selben Sinn, weil dort keine echten Eingaben passieren; sie liefern stattdessen Hinweise über lange Aufgaben. Für belastbare Aussagen brauchst du Felddaten.

Warum ist INP schlecht, und was hilft?

Typische Ursachen:

• Lange Aufgaben im Main Thread: JavaScript-Blöcke über 50 ms verhindern, dass der Browser auf Eingaben reagiert.
• Zu viel Hydration: Das Framework verbringt nach dem Laden Zeit mit dem Aufbau der Komponenten.
• Großer DOM: Jede Änderung löst teure Stil- und Layoutberechnungen aus. Das ist bei Pagebuildern wie Elementor häufig.
• Drittanbieter-Skripte: Tracking, Chat, Banner und Widgets laufen im selben Thread.
• Aufwendige Event-Handler: Berechnungen, die bei jedem Tastendruck laufen.

Gegenmaßnahmen folgen derselben Logik: Arbeit aufteilen (lange Aufgaben zerlegen und dem Browser zwischendurch Luft lassen), weniger JavaScript ausliefern, Komponenten ohne Interaktion nicht hydrieren, DOM verkleinern und Fremdskripte nur laden, wenn sie nötig sind. Ein CDN hilft kaum, weil es Dateien schneller ausliefert, nicht aber die Arbeit im Browser verkürzt.

Warum ist INP für Anfragen und KI-Sichtbarkeit relevant?

Für Besucher zählt das Gefühl: Ein Menü, das zögert, oder ein Formular, das nach dem Tippen hängt, kostet Vertrauen und Anfragen. Gerade mobile Nutzer mit schwächeren Geräten sind betroffen. Core Web Vitals gehören außerdem zu den Signalen, die Google für die Seitenerfahrung berücksichtigt, ohne dass sie Relevanz ersetzen.

Indirekt zählt INP auch für GEO: Eine Webseite, die mit schlankem HTML und wenig Client-Code arbeitet, ist meist zugleich gut extrahierbar. Dieselben Maßnahmen, die INP verbessern, reduzieren Ballast für Crawler und Abrufer.

Wie gehen wir bei Modern Stack mit INP um?

Wir messen vor und nach dem Umbau und streben für kritische Seiten Werte im grünen Bereich an. Konkret setzen wir auf Next.js mit statischem oder serverseitigem HTML, hydrieren nur interaktive Komponenten, laden Skripte von Dritten sparsam und vermeiden Pagebuilder-Markup. Wie die Messung und Verbesserung der drei Vitals im Zusammenhang abläuft, beschreibt das Thema Core Web Vitals & Modernisierung.

Verwandte Themen

• Core Web Vitals
• LCP
• CLS
• Hydration
• Core Web Vitals & Modernisierung