Interaction to Next Paint (INP)

Jeremy Wagner

Unterstützte Browser

  • Chrome: 96.
  • Edge: 96.
  • Firefox: nicht unterstützt
  • Safari: Nicht unterstützt.

Quelle

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.

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 die Funktion 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. 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 des INP

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 zu messen, 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, 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.
Gute INP-Werte liegen bei 200 Millisekunden oder weniger, schlechte Werte über 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 gestartet werden. Dies kann durch Faktoren wie lange Aufgaben im Hauptthread verursacht werden. Anschließend werden die Rückrufe des Ereignis-Handlers für die Interaktion 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.

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.

Eine Darstellung einer komplexeren Interaktion mit zwei Interaktionen. Das erste ist ein Mousedown-Ereignis, bei dem ein Frame erzeugt wird, bevor die Maustaste losgelassen wird. Dadurch wird mehr Arbeit ausgelöst, 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 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

Was ist das Hauptziel des INP-Messwerts?

Damit wird die Zeit gemessen, die vergeht, bis die ersten Inhalte einer Seite angezeigt werden.
Falsch – dies beschreibt First Contentful Paint.
Damit lässt sich die visuelle Stabilität einer Seite quantifizieren und unerwartete Layoutänderungen minimieren.
Falsch – dies beschreibt den Cumulative Layout Shift.
Hier sehen Sie, wie lange es dauert, bis eine Seite vollständig interaktiv ist.
Falsch: Dieser Wert bezieht sich auf „Time to Interactive“, der INP-Wert bezieht sich jedoch speziell auf die Reaktionsfähigkeit auf Nutzereingaben.
Minimieren Sie die Zeit zwischen der Nutzerinteraktion und dem Zeichnen des nächsten Frames für alle oder die meisten Interaktionen, die der Nutzer initiiert.
Richtig!

Welche der folgenden Interaktionstypen werden bei der Berechnung von INP beobachtet? (Wählen Sie alle zutreffenden Antworten aus.)

Mit der Maus klicken
Richtig!
Mit dem Mausrad oder dem Touchpad auf der Seite scrollen
Falsch – INP berücksichtigt nicht das Scrollen
Tippen auf einen Touchscreen
Richtig!
Bewegen Sie den Mauszeiger auf Elemente.
Falsch – INP berücksichtigt das Hovering nicht.
Drücken einer Taste auf der Tastatur
Richtig!
Heran- oder herauszoomen
Falsch – INP berücksichtigt nicht das Zoomen.

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

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 bis zum nächsten Frame.
Die durchschnittliche Zeit, die vergeht, bis alle Interaktionen auf einer Seite eine visuelle Reaktion hervorrufen.
Falsch – INP konzentriert sich auf die längste Interaktion, nicht auf den Durchschnitt.
Die Zeit, die der Browser benötigt, um mit der Verarbeitung der Ereignishandler zu beginnen, die mit einer Interaktion verknüpft sind.
Falsch. Hier wird nur die Eingabeverzögerung berücksichtigt, nicht die Verarbeitungs- und Renderingzeit.
Die Zeitspanne vom Beginn der Interaktion bis zum Zeitpunkt, an dem der nächste Frame vollständig angezeigt wird.
Richtig!

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.
Falsch: Dies beschreibt First Contentful Paint, nicht INP.
Bei der INP wird die gesamte Dauer aller Interaktionen berücksichtigt, während die 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 diese 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: Die Impressionen nach aktiver Suche werden automatisch mithilfe von Webplattform-APIs gemessen und nicht durch selbst gemeldete Seitenleistung über benutzerdefinierte Bibliotheken.
Es sind nicht genügend Interaktionsdaten von Chrome-Nutzern vorhanden, um einen aussagekräftigen INP-Wert im CrUX-Datensatz zu berechnen.
Richtig!
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.
Richtig!
Die Seite wurde mit einem Framework erstellt, das automatisch für INP optimiert wird. Sie muss daher nicht gemeldet werden.
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 erst testen, nachdem die Seite vollständig geladen und inaktiv ist.
Falsch – dadurch werden möglicherweise Interaktionen übersehen, die beim Laden langsam sind.
Während des Ladevorgangs mit der Seite interagieren und gängige Nutzerflüsse verfolgen, um potenzielle Engpässe zu identifizieren.
Richtig!
Konzentration auf komplexe Grenzfallinteraktionen, die die meisten Nutzenden wahrscheinlich nicht treffen werden.
Falsch: Gängige Nutzerflüsse sind für die Identifizierung typischer INP-Probleme relevanter.

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