Interaction to Next Paint (INP)

<ph type="x-smartling-placeholder">

Chrome-Nutzungsdaten zeigen, dass 90% der Zeit eines Nutzers auf einer Seite nach dem Laden verbracht wird. Daher ist es wichtig, die Reaktionsfähigkeit über den gesamten Lebenszyklus der Seite sorgfältig zu messen. Dies wird anhand des INP-Messwerts bewertet.

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.

Manche Interaktionen dauern normalerweise länger als andere, aber bei besonders komplexen Interaktionen ist es wichtig, schnell ein erstes visuelles Feedback zu geben, um den Nutzenden mitzuteilen, dass etwas passiert. Der nächste Frame, den der Browser darstellt, ist die früheste Möglichkeit, dies zu tun.

Der Zweck von INP besteht daher nicht darin, alle Auswirkungen einer Interaktion zu messen, z. B. Netzwerkabrufe und UI-Aktualisierungen anderer asynchroner Vorgänge. Vielmehr soll der Zeitpunkt, zu dem der nächste Paint blockiert wird, blockiert werden. Durch das Verzögern des visuellen Feedbacks kann der Eindruck entstehen, dass die Seite nicht schnell genug reagiert. INP wurde entwickelt, damit Entwickler diesen Teil der Nutzererfahrung messen können.

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 gezeigt und wie dies zu einer schlechten Nutzererfahrung führen kann.

<ph type="x-smartling-placeholder">

</ph>

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 interaction ist eine Gruppe von Event-Handlern, 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 den nächsten Frame erfasst.

<ph type="x-smartling-placeholder">

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 die Tatsache berücksichtigen, dass es erhebliche Unterschiede in den Funktionen der Geräte gibt, die die Menschen verwenden, um erreichbare 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-Wert unter oder bei 200 Millisekunden bedeutet, dass eine Seite eine gute Reaktionsfähigkeit aufweist.
• 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 eine Seite schlechte Reaktionsfähigkeit aufweist.

<ph type="x-smartling-placeholder"></ph>

Was beinhaltet eine Interaktion?

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Der wichtigste Grund für die Interaktivität ist häufig JavaScript, obwohl Browser Interaktivität über Steuerelemente bieten, die nicht auf JavaScript basieren, z. B. Kästchen, Optionsfelder und Steuerelemente mit CSS.

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 Tastatur oder Bildschirmtastatur

Interaktionen finden im Hauptdokument oder in iFrames statt, die im Dokument eingebettet sind, z. B. durch Klicken auf die Wiedergabeschaltfläche bei einem eingebetteten Video. 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 pointerup- und pointerdown-Ereignisse. Das Ereignis mit der längsten Dauer innerhalb der Interaktion trägt zur Gesamtlatenz der Interaktion bei.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Der INP-Wert 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 First Input Delay (FID)?

INP ist der Nachfolgemesswert First Input Delay (FID). Beide Werte sind Messwerte zur 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.

Diese Unterschiede bedeuten, dass sowohl INP als auch FID unterschiedliche Arten von Messwerten für die Reaktionszeit sind. 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. Dies kann verschiedene Gründe haben, darunter:

• Die Seite wurde geladen, aber der Nutzer hat nie auf der Tastatur geklickt, getippt oder eine Taste 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.

Messung von INP

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

<ph type="x-smartling-placeholder">

Vor Ort

Im Idealfall beginnt Ihr Weg bei der INP-Optimierung mit Felddaten. Im Idealfall liefern Felddaten aus dem 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.

<ph type="x-smartling-placeholder">

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 sich mindestens ein Bild des INP auf Ursprungsebene Ihrer Website anzeigen lassen, in einigen Fällen aber auch Daten auf URL-Ebene.

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 ermitteln, bei denen die Reaktionsfähigkeit Probleme aufweist. Die Möglichkeit, INP einzelnen Interaktionen zuzuordnen, vermeidet Spekulationen und unnötigen Aufwand.

Im Labor

Idealerweise sollten Sie mit den Tests im Labor beginnen, sobald Sie Felddaten haben, die darauf hinweisen, dass eine Seite langsame Interaktionen aufweist. Felddaten machen die Reproduktion problematischer Interaktionen im Lab wesentlich einfacher.

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 und stark variieren. Das bedeutet, dass Ihre Tests im Labor Probleminteraktionen möglicherweise nicht auf die gleiche Weise wie Felddaten darstellen. Außerdem melden einige Lab-Tools den INP einer Seite nicht, da sie nur das Laden einer Seite ohne Interaktion 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 Verfolgen gängiger User Flows und das Testen von Interaktionen auf dem Weg sowie die Interaktion mit der Seite während des Ladens – wenn der Hauptthread häufig besonders aktiv ist –, um langsame Interaktionen in diesem entscheidenden Teil der User Experience zu identifizieren.

<ph type="x-smartling-placeholder">

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, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst entdeckt. 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.

In der Google-Gruppe „web-vitals-feedback“ können Sie uns Feedback zu diesen Messwerten geben.

Wissen testen