Was ist Interaction to Next Paint (INP)

Interaction to Next Paint (INP) ist eine ausstehende Core Web Vitals Hauptmetrik, die ab März 2024 den First Input Delay (FID) ersetzen wird. INP bewertet die Reaktionsfähigkeit mithilfe von Daten aus der Event Timing API. Wenn eine Interaktion die Seite blockiert, entsteht eine schlechte Nutzererfahrung. INP beobachtet die Latenz aller Interaktionen, die der Nutzer auf der Seite ausführt, und meldet einen einzelnen Wert, unter dem (oder für den Großteil) aller Interaktionen lagen. Ein niedriger INP-Wert bedeutet, dass die Seite in der Lage war, schnell und konsistent auf alle oder die meisten Nutzerinteraktionen zu reagieren.

Chrome-Nutzungsdaten zeigen, dass 90 % der Zeit, die ein Nutzer auf einer Seite verbringt, nach dem Laden der Seite stattfinden. Daher ist eine sorgfältige Messung der Reaktionsfähigkeit während des Seitenlebenszyklus wichtig. Genau das bewertet die Metrik INP.

Gute Reaktionsfähigkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, erhält der Nutzer visuelles Feedback, das der Browser im nächsten Frame darstellt. Das visuelle Feedback signalisiert beispielsweise, ob ein Artikel im Onlineshop tatsächlich zum Warenkorb hinzugefügt wurde, ob sich ein mobiles Navigationsmenü geöffnet hat, ob die Inhalte eines Login-Formulars vom Server authentifiziert wurden, und so weiter.

Einige Interaktionen benötigen natürlich mehr Zeit als andere, aber bei besonders komplexen Interaktionen ist es wichtig, schnell ein erstes visuelles Feedback zu geben, um dem Nutzer zu signalisieren, dass etwas geschieht. Die Zeit bis zum nächsten Paint ist die erste Gelegenheit dafür. INP hat daher nicht das Ziel, alle möglichen Folgeeffekte einer Interaktion zu messen (wie das Nachladen von Netzressourcen oder UI-Updates durch andere asynchrone Vorgänge), sondern die Zeit, in der der nächste Paint blockiert ist. Verzögert sich das visuelle Feedback, kann dies den Eindruck erwecken, die Seite reagiere nicht auf die Aktionen des Nutzers.

Ziel von INP ist es sicherzustellen, dass die Zeit vom Beginn einer Nutzerinteraktion bis zum nächsten dargestellten Frame für alle oder die meisten Interaktionen so kurz wie möglich ist.

Im folgenden Video zeigt das Beispiel rechts ein sofortiges visuelles Feedback beim Öffnen eines Akkordeon-Elements. Es demonstriert außerdem, wie schlechte Reaktionsfähigkeit zu mehrfachen unerwünschten Eingaben führen kann, weil der Nutzer denkt, die Seite funktioniere fehlerhaft.

Was ist INP?

INP ist eine Metrik, die die Gesamtreaktionsfähigkeit einer Seite auf Nutzerinteraktionen bewertet, indem sie die Latenz aller Klick-, Tap- und Tastaturinteraktionen beobachtet, die während eines Besuchs auf einer Seite auftreten. Der finale INP-Wert entspricht der längsten Dauer aller Interaktionen, wobei Ausreißer ignoriert werden.

Eine Anmerkung zur Berechnung von INP

Eine Interaktion ist eine Gruppe von Event-Handlern, die während derselben logischen Nutzeraktion ausgelöst werden. Beispielsweise umfassen „Tap“-Interaktionen auf Touch-Geräten mehrere Ereignisse wie pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, browserinterne Steuerelemente (wie Formularelemente) oder eine Kombination davon gesteuert werden.

Die Latenz einer Interaktion entspricht der längsten Dauer unter den Event-Handlern, die die Interaktion steuern, vom Beginn der Interaktion durch den Nutzer bis zum Zeitpunkt, an dem der nächste Frame mit visuellem Feedback präsentiert wird.

Was ist ein guter INP-Wert?

Es ist schwierig, einer Reaktivitätsmetrik Labels wie „gut“ oder „schlecht“ zuzuweisen. Einerseits möchte man Entwicklungspraktiken fördern, die gute Reaktionsfähigkeit priorisieren. Andererseits muss berücksichtigt werden, dass die Fähigkeiten der Geräte, die Nutzer verwenden, stark variieren, sodass realistische Entwicklungsziele nötig sind.

Um sicherzustellen, dass du nutzerfreundliche, reaktionsschnelle Erlebnisse lieferst, ist ein nützlicher Referenzwert das 75. Perzentil der im Feld gemessenen Seitenladezeiten, aufgeteilt nach Mobil- und Desktop-Geräten:

• Ein INP von höchstens 200 Millisekunden zeigt an, dass deine Seite eine gute Reaktionsfähigkeit hat.
• Ein INP größer als 200 Millisekunden und höchstens 500 Millisekunden zeigt, dass die Reaktionsfähigkeit deiner Seite verbessert werden sollte.
• Ein INP größer als 500 Millisekunden zeigt, dass deine Seite eine schlechte Reaktionsfähigkeit hat.

Was umfasst eine Interaktion?

Ein Diagramm, das eine Interaktion im Haupt-Thread darstellt. Der Nutzer führt eine Eingabe aus, während blockierende Aufgaben ausgeführt werden. Die Eingabe wird verzögert, bis diese Aufgaben abgeschlossen sind; anschließend werden die Event-Handler pointerup, mouseup und click ausgeführt, dann werden Rendering- und Painting-Vorgänge gestartet, bis der nächste Frame präsentiert wird. Der Lebenszyklus einer Interaktion: Es tritt eine Eingabeverzögerung bis zum Start der Event-Handler auf, die durch Faktoren wie lange Aufgaben im Haupt-Thread verursacht werden kann. Danach werden die Event-Handler der Interaktion ausgeführt, und es kommt zu einer Verzögerung, bevor der nächste Frame dargestellt wird. Der Hauptmotor der Interaktivität ist häufig JavaScript, obwohl Browser auch Interaktivität über nicht-JavaScript-gesteuerte Controls bieten, wie Checkboxen, Radiobuttons und CSS-gesteuerte Controls.

Für INP werden nur die folgenden Interaktionstypen beobachtet:

• Klicks mit der Maus.
• Tippen auf einem Touchscreen-Gerät.
• Drücken einer Taste auf einer physischen oder virtuellen Tastatur.

Worin unterscheidet sich INP vom First Input Delay (FID)?

Während INP alle Interaktionen auf der Seite berücksichtigt, erfasst der First Input Delay (FID) nur die erste Interaktion. FID misst nur die Eingabeverzögerung der ersten Interaktion, nicht die Zeit, die zur Ausführung der Event-Handler oder zur Darstellung des nächsten Frames benötigt wird.

Da FID ebenfalls eine Lade-Reaktivitätsmetrik ist, beruht seine Logik auf der Annahme, dass, wenn die erste Interaktion während der Ladephase einer Seite kaum oder gar keine Eingabeverzögerung aufweist, die Seite einen guten ersten Eindruck gemacht hat.

INP geht über den ersten Eindruck hinaus. Indem alle Interaktionen abgetastet werden, kann die Reaktionsfähigkeit umfassend bewertet werden, wodurch INP im Vergleich zu FID ein zuverlässigerer Indikator für die Gesamtreaktionsfähigkeit ist.

Was passiert, wenn kein INP-Wert gemeldet wird? Es ist möglich, dass eine Seite keinen INP-Wert zurückgibt. Das kann aus verschiedenen Gründen vorkommen:

Die Seite wurde geladen, aber der Nutzer hat nicht geklickt, getippt oder eine Taste gedrückt. Die Seite wurde geladen, aber der Nutzer hat mit Gesten interagiert, die keine Klicks, Taps oder Tastatureingaben beinhalten. Zum Beispiel beeinflussen Scrollen oder Mouseover den INP nicht. Die Seite wurde von einem Bot geladen, etwa einem Suchcrawler oder einem Headless-Browser, der nicht dafür programmiert ist, mit der Seite zu interagieren.