Interaction to Next Paint (INP)

Jeremy Wagner

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

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 INP-Messwert bewertet.

Eine 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, den er anzeigt, visuelles Feedback an. Visuelles Feedback gibt Aufschluss darüber, ob beispielsweise ein Artikel, den Sie in einen Online-Einkaufswagen legen, tatsächlich hinzugefügt wird, ob ein Navigationsmenü für Mobilgeräte geöffnet wurde oder ob der Inhalt eines Anmeldeformulars vom Server authentifiziert wird.

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, erhalten 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 gibt 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.

Beispiel für schlechte und gute Reaktionsfähigkeit. Auf der linken Seite verhindern lange Aufgaben, dass sich das Akkordeon öffnet. Das führt dazu, dass der Nutzer mehrmals klickt, weil er denkt, dass etwas nicht funktioniert. Wenn der Hauptthread aufgeholt hat, verarbeitet er die verzögerten Eingaben, was dazu führt, dass sich das Akkordeon unerwartet öffnet und schließt. Rechts wird auf einer reaktionsschnelleren Seite das Akkordeon schnell und ohne Probleme geöffnet.

In diesem Leitfaden wird erläutert, wie INP funktioniert, wie es gemessen wird und wo Sie Informationen zur Verbesserung finden.

Was ist INP?

INP ist ein Messwert, mit dem die Reaktionszeit einer Seite auf Nutzerinteraktionen insgesamt bewertet wird. Dazu wird die Latenz aller Klicks, Berührungen und Tastaturinteraktionen erfasst, die während des Besuchs eines Nutzers auf einer Seite stattfinden. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

Der INP wird berechnet, indem alle Interaktionen mit einer Seite beobachtet werden. Bei den meisten Websites wird die Interaktion mit der schlechtesten Latenz als INP erfasst.

Bei Seiten mit einer großen Anzahl von Interaktionen können jedoch zufällige Aussetzer zu einer ungewöhnlich hohen Latenz bei einer ansonsten responsiven Seite führen. Je mehr Interaktionen auf einer bestimmten Seite stattfinden, desto wahrscheinlicher ist dies.

Um die tatsächliche Reaktionsfähigkeit von Seiten mit einer hohen Anzahl von Interaktionen besser messen zu können, wird bei jeder 50. Interaktion die höchste Interaktion ignoriert. Die überwiegende Mehrheit der Seitenaufrufe hat nicht mehr als 50 Interaktionen. Daher wird am häufigsten die schlechteste Interaktion erfasst. Der 75. Perzentil aller Seitenaufrufe wird dann wie gewohnt erfasst. Dadurch werden weitere Ausreißer entfernt, um einen Wert zu erhalten, der für die überwiegende Mehrheit der Nutzer erreicht wird oder besser ist.

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 wie 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.
Gute INP-Werte liegen bei 200 Millisekunden oder weniger, schlechte Werte bei mehr als 500 Millisekunden. Werte dazwischen müssen optimiert werden.
Gute INP-Werte liegen unter 200 Millisekunden. Schlechte Werte sind länger als 500 Millisekunden.

Was ist eine Interaktion?

Ein Diagramm, das eine Interaktion im Hauptthread darstellt. Der Nutzer gibt eine Eingabe ein, während blockierende Aufgaben ausgeführt werden. Die Eingabe wird verzögert, bis diese Aufgaben abgeschlossen sind. Danach werden die Ereignishandler „pointerup“, „mouseup“ und „click“ ausgeführt. Anschließend werden Rendering- und Malvorgänge gestartet, bis der nächste Frame angezeigt wird.
Der Lebenszyklus einer Interaktion. Es tritt eine Eingabeverzögerung auf, bis die Ereignishandler ausgeführt werden. Dies kann durch Faktoren wie lange Aufgaben im Hauptthread verursacht werden. Anschließend werden die Callback-Funktionen des Ereignis-Handlers ausgeführt und es tritt eine Verzögerung auf, bevor der nächste Frame angezeigt wird.

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.

Für die Zwecke der interessenbezogenen Werbung werden nur die folgenden Interaktionstypen erfasst:

  • 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 die Wiedergabeschaltfläche eines eingebetteten Videos klicken. Endnutzer können nicht erkennen, was sich in einem Iframe befindet. Daher sind INP in Iframes erforderlich, um die Nutzerfreundlichkeit der übergeordneten Seite zu messen. Da JavaScript-Web-APIs keinen Zugriff auf den Inhalt von Iframes haben, kann dies zu Unterschieden zwischen CrUX und RUM führen.

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.

Eine Darstellung einer komplexeren Interaktion mit zwei Interaktionen. Das erste ist ein mousedown-Ereignis, das einen Frame erzeugt, bevor die Maustaste losgelassen wird. Dadurch werden weitere Aufgaben gestartet, bis ein weiterer Frame als Ergebnis angezeigt wird.
Darstellung einer Interaktion mit mehreren Ereignishandlern. Der erste Teil der Interaktion erhält eine Eingabe, wenn der Nutzer auf eine Maustaste klickt. Bevor er die Maustaste loslässt, wird jedoch ein Frame angezeigt. Wenn der Nutzer die Maustaste loslässt, muss eine weitere Reihe von Ereignishandlern ausgeführt werden, bevor der nächste Frame angezeigt wird.

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 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 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 ist, wenn kein INP-Wert erfasst 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, 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. 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.

Im Außendienst

Idealerweise beginnen Sie mit der Optimierung von INP 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 Interaktion für den INP-Wert selbst verantwortlich war, ob die Interaktion während oder nach dem Seitenaufbau stattfand, 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 Reaktionszeit ausgewirkt hat.

Wenn Ihre Website in den Bericht zur Nutzererfahrung in Chrome (Chrome User Experience Report, CrUX) aufgenommen werden kann, können Sie schnell Felddaten für INP über CrUX in PageSpeed Insights (und andere Core Web Vitals) abrufen. Sie können mindestens ein Bild der INP Ihrer Website auf Quellebene 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. Wenn Sie die Conversions nach Impressionen einzelnen Interaktionen zuordnen können, müssen Sie nicht mehr raten und unnötige Arbeit leisten.

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. Mit Felddaten lässt sich die Reproduktion problematischer Interaktionen im Lab viel einfacher gestalten.

Es ist jedoch durchaus möglich, dass Sie keine Felddaten haben. Der INP kann in einigen Lab-Tools gemessen werden. Der daraus 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 geben einige Lab-Tools den INP einer Seite nicht an, da sie nur das Laden einer Seite ohne Interaktionen beobachten. In solchen Fällen kann die Gesamtblockierungszeit (Total Blocking Time, TBT) ein angemessener Proxy-Messwert 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 Nutzererfahrung 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

Was ist das Hauptziel des INP-Messwerts?

Damit wird die Zeit gemessen, die vergeht, bis eine Seite vollständig interaktiv ist.
Damit wird die Zeit gemessen, die vergeht, bis die ersten Inhalte einer Seite angezeigt werden.
Damit lässt sich die visuelle Stabilität einer Seite messen und unerwartete Layoutänderungen minimieren.
Minimieren Sie für alle oder die meisten vom Nutzer initiierten Interaktionen die Zeit zwischen der Nutzerinteraktion und dem Zeichnen des nächsten Frames.

Welche der folgenden Interaktionstypen werden zur Berechnung des Anzeigenimpressionswerts berücksichtigt? (Wählen Sie alle zutreffenden Antworten aus.)

Tippen auf einen Touchscreen
Drücken einer Taste auf der Tastatur
Mit der Maus klicken
Mit dem Mausrad oder dem Touchpad auf der Seite scrollen
Heran- und Herauszoomen auf der Seite
Bewegen Sie den Mauszeiger auf Elemente.

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

Die Zeit, die der Browser für die Verarbeitung der Ereignis-Handler einer Interaktion benötigt.
Die Zeitspanne vom Beginn der Interaktion bis zum Zeitpunkt, an dem der nächste Frame vollständig angezeigt wird.
Die durchschnittliche Zeit, die vergeht, bis alle Interaktionen auf einer Seite eine visuelle Reaktion hervorrufen.
Die Zeit, die der Browser benötigt, um mit der Verarbeitung der Ereignishandler zu beginnen, die mit einer Interaktion verknüpft sind.

Was ist der Unterschied zwischen INP und FID?

Mit INP wird die Zeit gemessen, die vergeht, bis die ersten Inhalte einer Seite angezeigt werden. Mit FID wird die Reaktionsfähigkeit auf Nutzereingaben gemessen.
Es gibt keinen Unterschied. INP und FID sind nur zwei verschiedene Namen für denselben Messwert.
Bei der INP wird die gesamte Dauer aller Interaktionen berücksichtigt, während die FID nur die Eingabeverzögerung der ersten Interaktion misst.
Mit INP und FID werden unterschiedliche Zeitstempel gemessen, zu denen eine Seite interaktiv wird.

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

Die Nutzer haben nur durch Scrollen und Bewegen des Mauszeigers mit der Seite interagiert. Diese Interaktionen werden bei der Anzahl der Interaktionen nicht berücksichtigt.
Auf der Seite wird eine benutzerdefinierte Bibliothek zur Leistungsmessung verwendet, die keine INP-Daten erfasst.
Es sind nicht genügend Interaktionsdaten von Chrome-Nutzern vorhanden, um einen aussagekräftigen INP-Wert im CrUX-Datensatz zu berechnen.
Die Seite wurde mit einem Framework erstellt, das automatisch für INP optimiert wird. Sie muss daher nicht gemeldet werden.

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

Während des Ladevorgangs mit der Seite interagieren und gängige Nutzerflüsse verfolgen, um potenzielle Engpässe zu identifizieren.
Sie konzentrieren sich auf komplexe, Grenzfallinteraktionen, die die meisten Nutzer wahrscheinlich nicht erleben werden.
Interaktionen erst testen, nachdem die Seite vollständig geladen und inaktiv ist.
Simulieren eines High-End-Geräts mit einer langsamen und unzuverlässigen Netzwerkverbindung, um herausfordernde Bedingungen zu schaffen.

✨ Dieses Quiz wurde von Gemini 1.5 generiert und von Menschen überprüft. Feedback geben