Interaction to Next Paint (INP)

Jeremy Wagner

Chrome-Nutzungsdaten zeigen, dass 90 % der Zeit, die ein Nutzer auf einer Seite verbringt, nach dem Laden der Seite vergehen. Daher ist es wichtig, die Reaktionsfähigkeit während des gesamten Seitenlebenszyklus sorgfältig zu messen. Dies wird anhand des INP-Messwerts bewertet.

Eine gute Reaktionsfähigkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, gibt der Browser im nächsten von ihm dargestellten Frame visuelles Feedback aus. Anhand des visuellen Feedbacks erfahren Sie, ob ein Artikel, den Sie einem Online-Einkaufswagen hinzufügen, tatsächlich hinzugefügt wird, ob ein mobiles Navigationsmenü geöffnet wurde, ob der Inhalt eines Anmeldeformulars vom Server authentifiziert wird usw.

Einige Interaktionen dauern natürlich länger als andere. Bei besonders komplexen Interaktionen ist es jedoch wichtig, dem Nutzer schnell ein erstes visuelles Feedback zu geben, damit er weiß, dass etwas passiert. Die nächste Frame, die der Browser anzeigt, ist die früheste Gelegenheit dazu.

Daher soll mit INP nicht alle möglichen Auswirkungen einer Interaktion gemessen werden, z. B. Netzwerkabrufe und UI-Aktualisierungen durch andere asynchrone Vorgänge, sondern die Zeit, in der die nächste Darstellung blockiert wird. Wenn das visuelle Feedback verzögert wird, haben Nutzer möglicherweise den Eindruck, dass die Seite nicht schnell genug reagiert. Der INP wurde entwickelt, um Entwicklern zu helfen, diesen Teil der Nutzerfreundlichkeit zu messen.

Das Beispiel rechts im folgenden Video gibt sofort visuelles Feedback, dass ein Akkordeon beginnt. Im Beispiel auf der linken Seite wird eine schlechte Reaktionsfähigkeit veranschaulicht und wie sich dies auf die Nutzerfreundlichkeit auswirken kann.

In diesem Leitfaden wird erklärt, wie INP funktioniert und wie es gemessen wird. Außerdem enthält es Hinweise auf Ressourcen zur Verbesserung.

Was ist INP?

INP ist ein Messwert, der die Reaktionsfähigkeit einer Seite auf Nutzerinteraktionen insgesamt bewertet, indem die Latenz aller Klicks, Tippen und Tastaturinteraktionen während des gesamten Besuchs eines Nutzers auf einer Seite erfasst wird. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

Eine Interaktion ist eine Gruppe von Ereignishandlern, die während derselben logischen Nutzergeste ausgelöst werden. Interaktionen vom Typ „Tippen“ auf einem Touchscreen-Gerät umfassen beispielsweise mehrere Ereignisse, z. B. pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, integrierte Browsersteuerelemente (z. B. Formularelemente) oder eine Kombination aus diesen Elementen ausgelöst werden.

Die Latenz einer Interaktion besteht aus der längsten Dauer einer Gruppe von Ereignishandlern, die die Interaktion steuern, vom Beginn der Interaktion durch den Nutzer bis zum nächsten Mal, wenn der Browser einen Frame zeichnen kann.

Was ist ein guter INP-Wert?

Es ist schwierig, Labels wie „gut“ oder „schlecht“ auf einen Messwert für die Reaktionsschnelligkeit anzupinnen. Einerseits sollten Sie Entwicklungspraktiken fördern, bei denen eine gute Reaktionsfähigkeit im Vordergrund steht. Andererseits müssen Sie berücksichtigen, dass die Funktionen der Geräte, die Nutzer verwenden, sehr unterschiedlich sind, um realistische Entwicklungserwartungen zu setzen.

Um eine gute Nutzerfreundlichkeit zu gewährleisten, ist der 75. Perzentilwert der Seitenladezeiten, die im Feld erfasst wurden, ein guter Messwert. Dieser Wert wird nach Mobilgeräten und Computern segmentiert:

• Ein INP von unter oder bei 200 Millisekunden bedeutet, dass eine Seite gut reagiert.
• Ein INP über 200 Millisekunden und unter oder bei 500 Millisekunden bedeutet, dass die Reaktionsfähigkeit einer Seite verbessert werden muss.
• Ein INP von über 500 Millisekunden bedeutet, dass eine Seite schlecht reagiert.

Was ist eine Interaktion?

Der Hauptfaktor für Interaktivität ist oft JavaScript. Browser bieten jedoch auch Interaktivität über Steuerelemente, die nicht von JavaScript unterstützt werden, z. B. Kästchen, Optionsfelder und Steuerelemente, die von CSS unterstützt werden.

Im Zusammenhang mit INP werden nur die folgenden Interaktionstypen beobachtet:

• Mit der Maus klicken.
• Tippen auf ein Gerät mit Touchscreen.
• Drücken einer Taste auf einer physischen oder Bildschirmtastatur.

Interaktionen können im Hauptdokument oder in im Dokument eingebetteten Iframes erfolgen, z. B. wenn Sie auf die Wiedergabeschaltfläche eines eingebetteten Videos klicken. Die Endnutzer wissen nicht, was sich in einem iFrame befindet. Daher wird INP in iFrames benötigt, um die Nutzererfahrung für die Seite der obersten Ebene zu messen. Da JavaScript Web APIs keinen Zugriff auf die Inhalte von iFrames haben, wird dies als Unterschied zwischen CrUX und RUM angezeigt.

Interaktionen können aus mehreren Ereignissen bestehen. Ein Tastenanschlag umfasst beispielsweise die Ereignisse keydown, keypress und keyup. Tippinteraktionen enthalten die Ereignisse pointerup und pointerdown. Das Ereignis mit der längsten Dauer innerhalb der Interaktion trägt zur Gesamtlatenz der Interaktion bei.

Der INP der Seite wird berechnet, wenn der Nutzer die Seite verlässt. Das Ergebnis ist ein einzelner Wert, der die Gesamtreaktionszeit der Seite während ihres gesamten Lebenszyklus repräsentiert. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Nutzereingaben reagiert hat.

Wie unterscheidet sich INP von First Input Delay (FID)?

INP ist der Nachfolger des Messwerts First Input Delay (FID). Beide sind Messwerte für die Reaktionsfähigkeit, aber mit FID wurde nur die Eingabeverzögerung der ersten Interaktion auf einer Seite gemessen. INP verbessert den FID, indem alle Interaktionen auf einer Seite erfasst werden, angefangen bei der Eingabeverzögerung über die Zeit, die zum Ausführen von Ereignishandlern erforderlich ist, bis hin zum Zeitpunkt, an dem der Browser den nächsten Frame gerendert hat.

Aufgrund dieser Unterschiede sind sowohl INP als auch FID unterschiedliche Arten von Reaktionsmesswerten. Während der FID ein Messwert für die Reaktionsfähigkeit beim Laden war, der den ersten Eindruck der Seite auf den Nutzer bewertet, ist der INP ein zuverlässigerer Indikator für die Gesamtreaktionsfähigkeit, unabhängig davon, wann während der Lebensdauer einer Seite Interaktionen stattfinden.

Was passiert, wenn kein INP-Wert gemeldet wird?

Es ist möglich, dass eine Seite keinen INP-Wert zurückgibt. Dafür kann es verschiedene Gründe geben, darunter:

• Die Seite wurde geladen, aber der Nutzer hat nie geklickt, getippt oder eine Taste auf der Tastatur gedrückt.
• Die Seite wurde geladen, aber der Nutzer hat mit ihr über Touch-Gesten interagiert, die nicht gemessen werden, z. B. durch Scrollen oder Bewegen des Mauszeigers auf Elemente.
• Auf die Seite wird von einem Bot zugegriffen, z. B. von einem Suchcrawler oder einem headless Browser, der nicht für die Interaktion mit der Seite programmiert wurde.

INP messen

Die Nutzerfreundlichkeit kann sowohl im Feld als auch im Labor gemessen werden, sofern realistische Nutzerinteraktionen simuliert werden können.

Vor Ort

Idealerweise beginnen Sie mit der Optimierung von INP mit Felddaten. Idealerweise liefern Felddaten aus dem Real User Monitoring (RUM) nicht nur den INP-Wert einer Seite, sondern auch Kontextdaten, die Aufschluss darüber geben, welche Interaktion für den INP-Wert selbst verantwortlich war, ob die Interaktion während oder nach dem Laden der Seite stattgefunden hat, die Art der Interaktion (Klick, Tastenanschlag oder Tippen) und andere wertvolle Zeitangaben, mit denen Sie feststellen können, welcher Teil der Interaktion sich auf die Reaktionsfähigkeit ausgewirkt hat.

Wenn Ihre Website die Voraussetzungen für die Aufnahme in den Chrome User Experience Report (CrUX) erfüllt, können Sie schnell Felddaten für INP über CrUX in PageSpeed Insights und anderen Core Web Vitals abrufen. Sie können mindestens ein Bild der INP Ihrer Website auf Ursprungsebene abrufen. In einigen Fällen sind auch Daten auf URL-Ebene verfügbar.

CrUX kann Ihnen zwar sagen, ob ein Problem vorliegt, aber nicht, was die Ursache dafür ist. Mit einer RUM-Lösung können Sie mehr Details zu Seiten, Nutzern oder Nutzerinteraktionen mit Reaktionsproblemen ermitteln. Die Möglichkeit, INP einzelnen Interaktionen zuzuordnen, vermeidet Spekulationen und verschwendeter Aufwand.

Im Labor

Am besten sollten Sie mit den Tests im Lab beginnen, sobald Sie Felddaten haben, die darauf hindeuten, dass die Interaktionen auf einer Seite langsam sind. Felddaten machen die Reproduktion problematischer Interaktionen im Lab wesentlich einfacher.

Es ist jedoch durchaus möglich, dass Sie keine Felddaten haben. Der INP kann in einigen Lab-Tools gemessen werden. Der resultierende INP-Wert für eine Seite während der Lab-Tests hängt davon ab, welche Interaktionen während des Messzeitraums ausgeführt werden. Das Nutzerverhalten kann unvorhersehbar und sehr variabel sein. Das bedeutet, dass Ihre Tests im Lab möglicherweise nicht auf dieselbe Weise wie Felddaten problematische Interaktionen aufzeigen. Außerdem erfassen einige Lab-Tools den INP einer Seite nicht, da sie nur das Laden einer Seite ohne Interaktionen beobachten. In solchen Fällen kann die Gesamtblockierungszeit (Total Blocking Time, TBT) ein geeigneter Proxymesswert für INP sein, ist aber kein Ersatz für INP.

Auch wenn es Einschränkungen bei Lab-Tools gibt, wenn es um die Bewertung des INP einer Seite geht, gibt es einige Strategien, um langsame Interaktionen im Lab zu reproduzieren. Zu den Strategien gehören das Nachvollziehen gängiger Nutzerflüsse und das Testen von Interaktionen, sowie das Interagieren mit der Seite während des Ladevorgangs, wenn der Hauptthread oft am stärksten ausgelastet ist, um langsame Interaktionen während dieses wichtigen Teils der User Experience zu identifizieren.

INP verbessern

In einer Sammlung von Anleitungen zur Optimierung von INP erfahren Sie, wie Sie langsame Interaktionen im Feld erkennen und mithilfe von Lab-Daten die Ursachen ermitteln und optimieren können.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs gefunden, die zum Erfassen von Messwerten verwendet werden, und manchmal auch in den Definitionen der Messwerte selbst. Daher müssen manchmal Änderungen vorgenommen werden. Diese Änderungen können sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Rückschritte zeigen.

Alle Änderungen an der Implementierung oder Definition dieser Messwerte werden in diesem Changelog aufgeführt.

Wenn Sie Feedback zu diesen Messwerten haben, geben Sie es in der Google-Gruppe „web-vitals-feedback“ an.

Wissen testen