Interaction to Next Paint (INP): Der neue Core Web Vital für Reaktionsfähigkeit

Was ist Interaction to Next Paint?

Interaction to Next Paint (INP) ist Googles neue Metrik für die Messung der Reaktionsfähigkeit einer Website. Im März 2024 ersetzte INP offiziell den First Input Delay (FID) als Core Web Vital. Während FID nur die erste Interaktion maß, bewertet INP die Reaktionszeit aller Benutzerinteraktionen während des gesamten Seitenbesuchs.

INP misst die Zeit zwischen einer Benutzerinteraktion wie einem Klick, Tastendruck oder Tipp auf einem Touchscreen und dem Moment, in dem der Browser das nächste Bild rendert, das das visuelle Ergebnis dieser Interaktion zeigt. Wenn ein Benutzer auf eine Schaltfläche klickt und 300 Millisekunden vergehen, bevor sich visuell etwas ändert, beträgt der INP-Wert 300ms.

Google definiert gutes INP als 200 Millisekunden oder weniger. Werte zwischen 200ms und 500ms benötigen Verbesserung. Werte über 500ms gelten als schlecht. Diese Schwellenwerte gelten für das 75. Perzentil aller Seitenbesuche, was bedeutet, dass 75% der Benutzer diese Reaktionszeit oder besser erleben müssen.

Warum INP FID ersetzt hat

FID hatte eine fundamentale Schwäche: Es maß nur die erste Interaktion. Ein Benutzer konnte eine schnelle erste Klickreaktion erleben, aber bei der zweiten, dritten oder zehnten Interaktion auf massive Verzögerungen stoßen. FID meldete trotzdem einen guten Wert. Websites mit guten FID-Scores boten in Wirklichkeit oft schlechte Benutzererfahrungen.

INP schließt diese Lücke. Es misst die schlechteste Interaktion während des gesamten Seitenbesuchs oder zumindest die langsamste aus einer repräsentativen Stichprobe. Eine Website muss durchgehend reaktionsfähig sein, nicht nur bei der ersten Berührung.

Diese Änderung hat massive Auswirkungen auf JavaScript-lastige Websites. Single Page Applications, unendliche Scroll-Seiten und Websites mit vielen Event-Listenern stehen vor erheblichen Herausforderungen, gute INP-Werte zu erreichen.

Technische Ursachen für schlechtes INP

Lange Aufgaben blockieren den Hauptthread

Der Browser kann immer nur eine Sache gleichzeitig tun. Wenn eine JavaScript-Funktion 300ms läuft, ist der Browser in dieser Zeit blockiert. Klickt ein Benutzer während dieser 300ms, wird der Klick in die Warteschlange gestellt und erst nach Abschluss der Aufgabe verarbeitet. Die Verarbeitungszeit plus die Wartezeit ergeben den INP-Wert.

Zu viele Event-Listener

Jeder Klick, jedes Scrollen, jeder Tastendruck kann dutzende Event-Listener auslösen. Wenn diese Listener nicht optimiert sind, summieren sich ihre Ausführungszeiten. Besonders problematisch sind ineffiziente Event-Delegation und Listener auf sich häufig ändernden DOM-Elementen.

Teure Rendering-Updates

Nachdem JavaScript eine Interaktion verarbeitet hat, muss der Browser oft das Layout neu berechnen und neu rendern. Komplexe Layouts mit vielen verschachtelten Elementen, benutzerdefinierten Schriftarten oder CSS-Animationen verlängern diese Neuberechnung. INP misst die Zeit bis zum fertigen Rendering, nicht nur die JavaScript-Verarbeitungszeit.

Third-Party-Skripte

Analyse-Tools, Chat-Widgets, Werbenetzwerke und Social-Media-Einbettungen führen kontinuierlich Code im Hintergrund aus. Dieser Code konkurriert mit Benutzerinteraktionen um den Hauptthread. Ein Analyse-Skript, das gerade Daten sendet, kann die Reaktion auf einen Klick um Hunderte von Millisekunden verzögern.

INP messen und debuggen

1. Chrome DevTools Performance Panel. Öffnen Sie DevTools, gehen Sie zum Performance-Tab und zeichnen Sie eine Sitzung auf, während Sie mit der Seite interagieren. Suchen Sie nach langen Aufgaben und Interaktionsmarkern. Messen Sie die Zeit zwischen Interaktion und nächstem Paint.
2. Web Vitals Extension. Die offizielle Google-Erweiterung für Chrome zeigt INP-Werte in Echtzeit während der Interaktion mit der Seite an. Sie protokolliert jede Interaktion und ihre Latenz.
3. Google Search Console. Der Core Web Vitals-Bericht zeigt INP-Daten aus dem Chrome User Experience Report. Dies sind echte Benutzerdaten, keine Labormessungen.
4. Performance Analyzer. Ein Analyse-Tool misst INP in einer kontrollierten Umgebung und identifiziert die spezifischen Interaktionen und Skripte, die Verzögerungen verursachen.

INP optimieren Schritt für Schritt

1. Lange Aufgaben aufteilen. JavaScript-Funktionen, die länger als 50ms laufen, sollten in kleinere Stücke zerlegt werden. Verwenden Sie setTimeout, requestAnimationFrame oder scheduler.postTask(), um lange Aufgaben dem Browser zu übergeben.
2. Event-Listener optimieren. Verwenden Sie Event-Delegation wo möglich. Entfernen Sie nicht mehr benötigte Event-Listener. Vermeiden Sie passive Event-Listener für Interaktionen, die preventDefault benötigen.
3. Rendering-Kosten reduzieren. Minimieren Sie Layout-Triggers in Event-Handlern. Verwenden Sie CSS-Transforms statt position-Änderungen. Batch-DOM-Änderungen mit requestAnimationFrame.
4. Drittanbieter-Skripte isolieren. Laden Sie nicht-kritische Skripte mit defer oder async. Erwägen Sie, Performance-intensive Drittanbieter in Web Worker auszulagern, wo sie den Hauptthread nicht blockieren.
5. Code-Splitting implementieren. Laden Sie JavaScript nur dann, wenn es benötigt wird. Teilen Sie große Bundles in kleinere Chunks auf, die bei Bedarf nachgeladen werden.
6. Mit einem Performance-Test verifizieren. Führen Sie nach jeder Optimierung einen Performance-Test durch, um die INP-Verbesserung zu messen.

Wie ein Performance Analyzer bei INP-Optimierung hilft

Ein Performance Analyzer misst INP unter realistischen Bedingungen und identifiziert die verursachenden Elemente. Der Bericht zeigt: welche Interaktionen die höchsten INP-Werte erzeugen, welche JavaScript-Funktionen die längste Ausführungszeit haben, welche Drittanbieter-Skripte den Hauptthread blockieren, und wie sich die Optimierung auf andere Core Web Vitals auswirkt.

Jede Empfehlung wird mit geschätzter Zeitersparnis priorisiert. Sie sehen sofort, welche Optimierung den größten Einfluss auf INP haben wird, und können Ihre Entwicklungsressourcen entsprechend einsetzen.

FAQ

Ersetzt INP FID vollständig?

Ja. Seit März 2024 ist INP der offizielle Core Web Vital für Reaktionsfähigkeit. FID wird nicht mehr als Ranking-Signal verwendet.

Beeinflusst INP Desktop- und Mobile-Rankings gleichermaßen?

INP ist auf mobilen Geräten kritischer, da mobile Prozessoren langsamer sind. Eine Seite mit gutem Desktop-INP kann auf mobilen Geräten schlechte Werte zeigen. Mobile-First-Indizierung bedeutet, dass mobile INP-Werte über Rankings entscheiden.

Kann ich INP auf 0ms bringen?

Nein. Es gibt immer minimale Verarbeitungszeit. Ziel ist unter 200ms. Werte unter 100ms sind exzellent und bieten eine Pufferzone für variierende Geräte und Netzwerkbedingungen.

Fazit

INP ist eine anspruchsvollere Metrik als FID. Es erfordert ganzheitliche Optimierung, nicht nur einen schnellen ersten Eindruck. Websites, die kontinuierlich reaktionsfähig sind, werden mit besseren Rankings und höherer Benutzerzufriedenheit belohnt.

Regelmäßige INP-Messungen mit Analyse-Tools stellen sicher, dass neue Funktionen und Inhalte die Reaktionsfähigkeit nicht verschlechtern. Machen Sie INP zu einem festen Bestandteil Ihres Entwicklungs- und SEO-Prozesses.