Interaction to Next Paint (INP)

Unterstützte Browser

  • 96
  • 96
  • x
  • x

Quelle

<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>
Ein Beispiel für eine schlechte oder eine gute Reaktionsfähigkeit. Auf der linken Seite können lange Aufgaben das Akkordeon nicht öffnen. Dies führt dazu, dass der Nutzer mehrfach klickt und glaubt, dass die Nutzererfahrung nicht optimal ist. Wenn der Hauptthread aufholt, verarbeitet er die verzögerten Eingaben, was dazu führt, dass das Akkordeon unerwartet geöffnet und geschlossen wird. Auf der rechten Seite wird das Akkordeon auf einer reaktionsschnelleren Seite schnell und ohne Zwischenfälle geöffnet.

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.

Details zur Berechnung der INP

Der INP-Wert wird anhand aller Interaktionen mit einer Seite berechnet. Bei den meisten Websites wird die Interaktion mit der schlechtesten Latenz als INP gemeldet.

Bei Seiten mit einer großen Anzahl von Interaktionen können jedoch willkürliche Probleme zu einer Interaktion mit ungewöhnlich hoher Latenz auf einer ansonsten responsiven Seite führen. Je mehr Interaktionen auf einer Seite stattfinden, desto wahrscheinlicher ist es, dass dies geschieht.

Um die tatsächliche Reaktionszeit von Seiten mit einer hohen Anzahl von Interaktionen besser messen zu können, wird eine höchste Interaktion pro 50 Interaktionen ignoriert. Für die meisten Nutzer gibt es nicht mehr als 50 Interaktionen. Daher wird die schlechteste Interaktion am häufigsten gemeldet. Das 75. Perzentil aller Seitenaufrufe wird dann wie gewohnt erfasst. Dabei werden Ausreißer weiter entfernt, sodass ein Wert angegeben wird, der für die Mehrheit der Nutzer oder besser geeignet ist.

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> Gute INP-Werte liegen bei maximal 200 Millisekunden, schlechte Werte über 500 Millisekunden und alles dazwischen muss verbessert werden.
Gute INP-Werte liegen bei 200 Millisekunden oder weniger. Schlechte Werte liegen über 500 Millisekunden.

Was beinhaltet eine Interaktion?

<ph type="x-smartling-placeholder">
</ph> Ein Diagramm, das eine Interaktion im Hauptthread darstellt. Der Nutzer gibt etwas ein, während die Ausführung von Aufgaben blockiert wird. Die Eingabe wird verzögert, bis diese Aufgaben abgeschlossen sind. Anschließend werden die Pointerup-, Mouseup- und Click-Event-Handler ausgeführt. Anschließend werden Rendering- und Paint-Arbeiten gestartet, bis der nächste Frame dargestellt wird. <ph type="x-smartling-placeholder">
</ph> Das Leben einer Interaktion. Eine Eingabeverzögerung tritt auf, bis die Ausführung von Event-Handlern beginnt. Sie wird möglicherweise durch Faktoren wie lange Aufgaben im Hauptthread verursacht. Anschließend werden die Event-Handler-Rückrufe der Interaktion ausgeführt und es tritt eine Verzögerung auf, bevor der nächste Frame angezeigt wird.

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> Darstellung einer komplexeren Interaktion mit zwei Interaktionen. Das erste ist ein Mousedown-Ereignis, das einen Frame erzeugt, bevor die Maustaste losgelassen wird. Dadurch wird mehr Arbeit ausgelöst, bis ein weiterer Frame als Ergebnis angezeigt wird. <ph type="x-smartling-placeholder">
</ph> Darstellung einer Interaktion mit mehreren Event-Handlern. Der erste Teil der Interaktion erhält eine Eingabe, wenn der Nutzer auf eine Maustaste klickt. Bevor sie jedoch die Maustaste loslassen, wird ein Frame angezeigt. Wenn der Nutzer die Maustaste loslässt, muss eine weitere Reihe von Ereignis-Handlern ausgeführt werden, bevor der nächste Frame angezeigt wird.

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

Was ist das Hauptziel des INP-Messwerts?

Um zu messen, wie lange es dauert, bis der erste Inhalt einer Seite angezeigt wird.
Falsch. Dies beschreibt First Contentful Paint.
Um die visuelle Stabilität einer Seite zu quantifizieren und unerwartete Layoutverschiebungen zu minimieren
Falsch. Dies beschreibt Cumulative Layout Shift.
Um zu ermitteln, wie lange es dauert, bis eine Seite vollständig interaktiv ist
Falsch: Dies bezieht sich auf die Zeit bis zur Interaktivität, aber bei INP liegt der Schwerpunkt auf der Reaktionsfähigkeit auf Nutzereingaben.
Um die Zeit zwischen dem Initiieren einer Interaktion durch den Nutzer und dem Zeichnen des nächsten Frames für alle oder die meisten vom Nutzer initiierten Interaktionen zu minimieren.
Richtig!

Welche der folgenden Interaktionstypen werden bei der Berechnung von INP beobachtet? Wähle alle zutreffenden Antworten aus.

Mit der Maus klicken.
Richtig!
Scrollen der Seite mit einem Mausrad oder Touchpad
Falsch – bei INP wird Scrollen nicht berücksichtigt.
Tippen auf einen Touchscreen.
Richtig!
Bewegen des Mauszeigers über Elemente
Falsch – bei INP wird der Mauszeiger nicht berücksichtigt.
Drücken einer Taste auf einer Tastatur.
Richtig!
Heran- oder herauszoomen
Falsch – INP berücksichtigt kein Zoomen.

Wie ist die „Latenz“? Interaktion definiert für INP?

Die Zeit, die der Browser benötigt, um die Event-Handler einer Interaktion zu verarbeiten.
Falsch – Hier wird nur die Verarbeitungsdauer berücksichtigt, nicht die Eingabeverzögerung oder die Zeit für die Anzeige des nächsten Frames.
Die durchschnittliche Zeit, die für alle Interaktionen auf einer Seite benötigt wird, um eine visuelle Antwort zu generieren.
Falsch – INP konzentriert sich auf die längste Interaktion, nicht auf den Durchschnitt.
Die Zeit, die der Browser benötigt, um die Verarbeitung der einer Interaktion zugeordneten Event-Handler zu starten.
Falsch – Hier wird nur die Eingabeverzögerung berücksichtigt, nicht die Verarbeitungs- und Renderingzeit.
Die Zeit vom Beginn der Interaktion bis zum Moment, in dem der nächste Frame vollständig präsentiert wurde.
Richtig!

Was ist der Unterschied zwischen INP und FID?

INP misst, wie lange es dauert, bis der erste Inhalt einer Seite angezeigt wird, während mit FID die Reaktion auf Nutzereingaben gemessen wird.
Falsch. Dies beschreibt First Contentful Paint, nicht INP.
INP berücksichtigt die gesamte Dauer aller Interaktionen, während FID nur die Eingabeverzögerung der ersten Interaktion misst.
Richtig!
INP und FID messen unterschiedliche Zeitstempel, ab denen eine Seite interaktiv wird.
Falsch. INP und FID geben an, wie schnell die Seite auf Interaktionen reagiert, unabhängig davon, wann die Interaktionen stattfinden.
Es gibt keinen Unterschied. INP und FID sind nur zwei unterschiedliche Namen für denselben Messwert.
Falsch – sie haben unterschiedliche Definitionen

Unter welchen Umständen sind INP-Daten für eine Seite in Tools wie PageSpeed Insights möglicherweise nicht verfügbar?

Für die Seite wird eine benutzerdefinierte Bibliothek zur Leistungsmessung verwendet, über die keine INP-Daten erfasst werden.
Falsch – INP wird automatisch mit Webplattform-APIs gemessen und basiert nicht darauf, dass die Seiten ihre Leistung über benutzerdefinierte Bibliotheken selbst melden.
Es sind nicht genügend Interaktionsdaten von Chrome-Nutzern vorhanden, um einen sinnvollen INP-Wert im CrUX-Datensatz zu berechnen.
Richtig!
Nutzer haben nur durch Scrollen und Bewegen des Mauszeigers mit der Seite interagiert. Bei INP werden diese Interaktionen nicht berücksichtigt.
Richtig!
Die Seite basiert auf einem Framework, das automatisch für INP optimiert wird, sodass es nicht erforderlich ist, die Seite zu melden.
Falsch: Frameworks können bei der INP helfen, aber der Messwert ist weiterhin relevant und wird gemeldet, wenn Daten verfügbar sind.

Was ist die effektivste Strategie, um langsame Interaktionen in einer Lab-Umgebung zu reproduzieren?

Simulieren eines High-End-Geräts mit einer langsamen und unzuverlässigen Netzwerkverbindung, um schwierige Bedingungen zu schaffen
Falsch: Das Netzwerk kann zwar eine Rolle spielen, aber die Gerätefunktionen führen eher zu langsamen Interaktionen.
Interaktionen werden erst getestet, nachdem die Seite vollständig geladen wurde und inaktiv ist.
Falsch – Dabei entgehen möglicherweise Interaktionen, die während des Ladevorgangs langsam sind.
Interaktion mit der Seite während des Ladevorgangs und Befolgen gängiger User Flows, um potenzielle Engpässe zu erkennen
Richtig!
Konzentration auf komplexe Grenzfallinteraktionen, die von den meisten Nutzenden unwahrscheinlich sind.
Falsch: Gängige Aufrufabfolgen sind relevanter für die Identifizierung typischer INP-Probleme.

Dieses Quiz wurde von Gemini 1.5 erstellt und manuell geprüft. Feedback geben