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. Das wird mit dem Messwert „Interesse an Produkt“ bewertet.

Gute Reaktionsfähigkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, zeigt der Browser im nächsten Frame, der gerendert wird, visuelles Feedback an. 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. Der nächste Frame, den der Browser darstellt, ist die früheste Möglichkeit, dies zu tun.

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.

Im folgenden Video zeigt das Beispiel auf der rechten Seite sofort visuelles Feedback, dass sich ein Akkordeon öffnet. 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 erläutert, wie INP funktioniert, wie es gemessen wird und wo Sie Ressourcen zur Verbesserung finden.

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. Beispiel: „tippen“ Zu den Interaktionen auf einem Touchscreen-Gerät gehören mehrere Ereignisse, z. B. pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, integrierte Browser-Steuerelemente (z. B. Formularelemente) oder eine Kombination aus diesen ausgelöst werden.

Die Latenz einer Interaktion besteht aus der längsten Dauer einer Gruppe von Event-Handlern, die die Interaktion steuern, vom Beginn der Interaktion durch den Nutzer bis zu dem Moment, in dem der Browser einen Frame als Nächstes darstellen kann.

Was ist ein guter INP-Wert?

Labels wie „Gut“ anpinnen oder „schlecht“ auf einen Messwert für die Reaktionsfähigkeit ist schwierig. 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 hohe Nutzerfreundlichkeit zu gewährleisten, sollte das 75. Perzentil der vor Ort erfassten Seitenaufrufe, aufgeteilt nach Mobil- und Desktopgeräten, gemessen werden:

• Ein INP von unter oder bei 200 Millisekunden bedeutet, dass eine Seite gut reagiert.
• Ein INP-Wert über 200 Millisekunden und unter bzw. bei 500 Millisekunden bedeutet, dass die Reaktionszeit einer Seite noch verbessert werden muss.
• Ein INP-Wert über 500 Millisekunden bedeutet, dass die 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 einem 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 ein eingebettetes Video 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 den Inhalt von Iframes haben, kann sich dies als Unterschied zwischen CrUX und RUM zeigen.

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 für die allgemeine Reaktionsfähigkeit der Seite während des gesamten Lebenszyklus repräsentativ ist. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Nutzereingaben reagiert hat.

Wie unterscheidet sich INP von der 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 FID, indem alle Interaktionen auf einer Seite erfasst werden, von der Eingabeverzögerung über die Ausführungszeit von Event-Handlern bis hin zu der Zeit, bis der Browser den nächsten Frame dargestellt hat.

Aufgrund dieser Unterschiede sind sowohl INP als auch FID unterschiedliche Arten von Reaktionsmesswerten. Während FID ein Messwert für die Reaktionsfähigkeit beim Laden war, um den ersten Eindruck einer Seite durch einen Nutzer zu bewerten, ist INP ein zuverlässigerer Indikator für die allgemeine Reaktionszeit, unabhängig davon, wann eine Seiteninteraktion stattfindet.

Was passiert, wenn kein INP-Wert gemeldet wird?

Es ist möglich, dass eine Seite keinen INP-Wert zurückgibt. Das kann verschiedene Gründe haben:

• Die Seite wurde geladen, aber der Nutzer hat nie auf etwas geklickt, getippt oder eine Taste auf der Tastatur gedrückt.
• Die Seite wurde geladen, der Nutzer interagiert jedoch mit Gesten, die nicht gemessen werden, z. B. Scrollen oder Bewegen des Mauszeigers über Elemente.
• Die Seite wird von einem Bot aufgerufen, z. B. einem Such-Crawler oder einem monitorlosen Browser, der nicht für die Interaktion mit der Seite vorgesehen ist.

INP messen

INP kann sowohl vor Ort als auch im Labor gemessen werden, soweit sich realistische Nutzerinteraktionen simulieren lassen.

Im Außendienst

Im Idealfall beginnt Ihr Weg bei der Optimierung von INP mit Felddaten. Im Idealfall liefern Felddaten aus dem Echtzeit-Tracking (Real User Monitoring, RUM) nicht nur den INP-Wert einer Seite, sondern auch Kontextdaten, die Aufschluss darüber geben, welche spezifische Interaktion für den INP-Wert selbst verantwortlich war, ob die Interaktion während oder nach dem Seitenaufbau erfolgte, die Art der Interaktion (Klicken, Tastendruck oder Tippen) und andere wertvolle Zeitangaben, mit denen Sie ermitteln 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.

Mithilfe von CrUX können Sie zwar ermitteln, ob ein Problem vorliegt, jedoch nicht die Ursache. Mit einer RUM-Lösung können Sie mehr Details zu Seiten, Nutzern oder Nutzerinteraktionen mit Reaktionsproblemen ermitteln. Wenn Sie die Conversions nach Impressionen einzelnen Interaktionen zuordnen können, müssen Sie nicht mehr raten und unnötige Arbeit leisten.

Im Labor

Idealerweise sollten Sie mit den Tests im Labor beginnen, sobald Sie Felddaten haben, die darauf hinweisen, dass eine Seite langsame Interaktionen aufweist. Mit Felddaten lässt sich die Reproduktion problematischer Interaktionen im Lab viel einfacher gestalten.

Es ist jedoch durchaus möglich, dass Sie über keine Felddaten verfügen. Der INP-Wert kann zwar in einigen Labortools gemessen werden, der resultierende INP-Wert für eine Seite während des Labortests hängt jedoch davon ab, welche Interaktionen während des Messzeitraums durchgeführt werden. Das Nutzerverhalten kann unvorhersehbar sein und stark variieren. Das bedeutet, dass Ihre Tests im Labor Probleminteraktionen möglicherweise nicht auf die gleiche Weise wie Felddaten darstellen. 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 Total Blocking Time (TBT) ein sinnvoller Ersatzmesswert für INP sein, ist aber kein Ersatz für INP an sich.

Auch wenn es bei der Bewertung des INP einer Seite Einschränkungen bei den Labortools gibt, gibt es im Labor einige Strategien, um langsame Interaktionen 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.

Wie kann ich INP verbessern?

Es steht eine Reihe von Leitfäden zur Optimierung von INP zur Verfügung, die Sie durch den Prozess zur Identifizierung langsamer Interaktionen in der Praxis und zur Verwendung von Lab-Daten führen, um Ursachen zu ermitteln und zu optimieren.

Ä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, die sich als Verbesserungen oder Regressionen in Ihren internen Berichten und Dashboards zeigen können.

Alle Änderungen an der Implementierung oder der Definition dieser Messwerte werden in diesem Änderungsprotokoll veröffentlicht, um Ihnen die Verwaltung zu erleichtern.

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

Wissen testen