Interaction to Next Paint (INP): Definition, Schwellenwerte, Optimierung

Was ist Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) ist ein Core Web Vital, der misst, wie schnell eine Seite auf Eingaben reagiert. Er betrachtet jeden Klick, Tap und Tastendruck während eines Besuchs, stoppt die Zeit von der Eingabe bis zum nächsten gezeichneten Frame und meldet die langsamste Interaktion. Eine Seite gilt als gut, wenn der INP im 75. Perzentil der echten Seitenaufrufe bei 200 Millisekunden oder weniger liegt.

Am 12. März 2024 hat INP den First Input Delay (FID) als Core Web Vital abgelöst. FID erfasste nur die Verzögerung vor der Verarbeitung der ersten Interaktion. INP umfasst alle Interaktionen und die gesamte Zeit bis zum nächsten Paint. Damit zeigt der Wert, wie sich die Seite bei der Nutzung anfühlt, nicht nur beim Laden.

INP-Schwellenwerte

Die Schwellenwerte gelten für Felddaten, getrennt nach Mobilgeräten und Desktop. Eine Seite besteht, wenn mindestens 75 % der Seitenaufrufe den Grenzwert einhalten.

So funktioniert INP

Jede Interaktion besteht aus drei Phasen. Eine Verzögerung in einer davon erhöht den INP:

• Eingabeverzögerung: die Zeit, bevor Event-Handler starten können, meist weil der Main Thread mit anderer Arbeit beschäftigt ist.
• Verarbeitungszeit: wie lange Ihre Event-Handler laufen.
• Darstellungsverzögerung: die Zeit vom Ende der Handler, bis der Browser den nächsten Frame anzeigt.

Nur Klicks, Taps und Tastendrücke zählen. Hovern, Zoomen und Scrollen sind für INP keine Interaktionen. Gemeldet wird die langsamste Interaktion, wobei bei Seiten mit sehr vielen Interaktionen je 50 Interaktionen ein Ausreißer ignoriert wird. Die meisten Seiten erreichen keine 50, daher ist INP in der Praxis die schlechteste Interaktion des Besuchs. Anschließend wird wie bei den anderen Core Web Vitals das 75. Perzentil über alle Seitenaufrufe berichtet.

Beispiel

Eine Shopseite lädt schnell, doch der Button "In den Warenkorb" führt ein großes synchrones Skript aus, das Preise neu berechnet, den Warenkorb aktualisiert und die gesamte Produktliste neu rendert. Nutzer tippen auf den Button, und 600 ms lang ändert sich sichtbar nichts. LCP und CLS sind in Ordnung, der INP dieser Seite liegt aber bei etwa 600 ms und gilt als schlecht. Wird die Arbeit aufgeteilt, sodass der Button zuerst seinen neuen Zustand zeigt und der Rest danach läuft, sinkt die Interaktion wieder unter 200 ms.

INP messen

INP braucht echte Interaktionen und ist deshalb vor allem eine Feldmetrik. Der Chrome UX Report (CrUX) veröffentlicht ihn für Websites mit genug Chrome-Traffic. Real User Monitoring (RUM) mit der Open-Source-Bibliothek web-vitals von Google zeigt, welche Interaktion und welches Element langsam sind:

import { onINP } from 'web-vitals';
onINP((metric) => navigator.sendBeacon('/rum', JSON.stringify(metric)));

Für einen schnellen Blick darauf, wie eine URL bei echten Nutzern abschneidet, nutzen Sie den kostenlosen Core Web Vitals Checker. Er liest CrUX-Daten und zeigt LCP, INP und CLS. In Labortests findet meist kein Klick statt, daher dient häufig die Total Blocking Time (TBT) als Ersatz. web.dev bezeichnet TBT als brauchbaren Laborindikator, aber nicht als Ersatz für die Messung des INP im Feld.

INP verbessern

• Lange Tasks aufteilen. Jeder Task über 50 ms im Main Thread kann Eingaben verzögern. Geben Sie zwischen Arbeitsschritten die Kontrolle ab, damit der Browser zeichnen kann.
• Weniger im Handler tun. Aktualisieren Sie zuerst, was der Nutzer sehen muss, und verschieben Sie Analytics, Logging und unkritischen State.
• Drittanbieter-Skripte reduzieren. Tag-Manager, Chat-Widgets und Werbung laufen im selben Main Thread wie Ihr Code.
• Rechenintensive Arbeit auslagern, zum Beispiel in einen Web Worker.
• Auf Hydration achten. Ein Klick, der während der Hydration eintrifft, muss warten.
• Den DOM klein halten. Große Neu-Renderings nach einem Klick verlängern die Darstellungsverzögerung.

Häufige Fehler

• Nur den Lighthouse-Score ansehen. Ein grüner Laborlauf sagt wenig über Interaktionen, die im Test nie stattfanden.
• Nur auf einem schnellen Laptop testen. Mittelklasse-Smartphones sind mit demselben JavaScript meist deutlich langsamer als ein Entwickler-Laptop.
• Nur die Ladezeit optimieren. INP wird meist nach dem Laden entschieden, durch das, was beim Klick passiert.
• Sofort sichtbare Verbesserung erwarten. CrUX ist ein gleitender Felddatensatz über 28 Tage, Verbesserungen erscheinen daher nur nach und nach.

INP und Performance-Monitoring

INP wird bei echten Nutzern gemessen, ein einmaliger Test genügt daher nicht. Beobachten Sie ihn über die Zeit neben LCP und CLS und erkennen Sie Rückschritte nach einem Release. Das Page-Speed-Monitoring von LoadFocus führt geplante Lighthouse-Audits inklusive TBT aus Cloud-Regionen aus. So erkennen Sie Main-Thread-Rückschritte, die oft einem schlechteren INP vorausgehen. Eine Schritt-für-Schritt-Anleitung finden Sie im Beitrag How to Optimize Interaction to Next Paint, zur Einrichtung von Alarmen im Beitrag How to monitor Core Web Vitals with alerts and reports (beide auf Englisch). Die Referenzdefinition steht auf web.dev.

Häufige Fragen: Interaction to Next Paint

Was ist ein guter INP-Wert?

200 Millisekunden oder weniger im 75. Perzentil der Seitenaufrufe. Zwischen 200 und 500 ms ist er verbesserungswürdig, über 500 ms schlecht.

Hat INP den FID ersetzt?

Ja. INP wurde am 12. März 2024 anstelle des First Input Delay ein Core Web Vital. FID maß nur die Eingabeverzögerung der ersten Interaktion.

Warum ist mein Lighthouse-Score gut, der INP im Feld aber schlecht?

Laborläufe enthalten selten echte Klicks oder Tastendrücke und übersehen daher langsame Interaktionen. Die Total Blocking Time ist ein Laborindikator, den tatsächlichen INP zeigen aber nur Felddaten echter Nutzer.

Welche Interaktionen zählen für INP?

Klicks, Taps und Tastendrücke. Hovern und Scrollen zählen nicht, auch wenn eine Scroll-Geste einen Tap oder Tastendruck enthalten kann, der zählt.

Wie finde ich die langsame Interaktion?

Erfassen Sie den INP mit der web-vitals-Bibliothek in Ihrem eigenen RUM, das Element und die langsame Phase melden kann, oder zeichnen Sie einen Trace in den Chrome DevTools auf und prüfen Sie die Interaktion im Performance-Panel.

Beeinflusst Hydration den INP?

Ja. Hydration ist JavaScript im Main Thread, daher verzögert sich eine Interaktion währenddessen. Kleinere Bundles, partielle Hydration und Server Components mindern den Effekt.