Interaction to Next Paint (INP)

Jeremy Wagner

Unterstützte Browser

  • Chrome: 96.
  • Edge: 96.
  • Firefox: nicht unterstützt
  • Safari: wird 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. 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.

Ein Beispiel für eine schlechte oder eine 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 aufholt, verarbeitet er die verzögerten Eingaben, was dazu führt, dass das Akkordeon unerwartet geöffnet und geschlossen wird. 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 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.

Details zur Berechnung der 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 Verzögerungen auf einer ansonsten responsiven Seite zu einer Interaktion mit ungewöhnlich hoher Latenz 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. 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.
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 etwas ein, während die Ausführung von Aufgaben blockiert wird. 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.
Das Leben einer Interaktion. Eine Eingabeverzögerung tritt auf, bis Event-Handler ausgeführt werden. 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 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.

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 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 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

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.
Damit lässt sich die visuelle Stabilität einer Seite quantifizieren und unerwartete Layoutänderungen minimieren.
Falsch. Dies beschreibt Cumulative Layout Shift.
Hier sehen Sie, wie lange es dauert, bis eine Seite vollständig interaktiv ist.
Falsch – dies hängt mit „Time to Interactive“ zusammen, aber INP konzentriert sich speziell auf die Reaktionsfähigkeit auf Nutzereingaben.
Minimieren Sie für alle oder die meisten vom Nutzer initiierten Interaktionen die Zeit zwischen der Nutzerinteraktion und dem Zeichnen des nächsten Frames.
Richtig!

Welche der folgenden Interaktionstypen werden zur Berechnung des Anzeigenimpressionswerts berücksichtigt? (Wählen Sie 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 – INP berücksichtigt das Hovering nicht.
Drücken einer Taste auf der 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 für die Verarbeitung der Ereignis-Handler einer Interaktion benötigt.
Falsch – hier wird nur die Verarbeitungsdauer berücksichtigt, nicht die Eingabeverzögerung oder die Zeit bis zur Darstellung 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 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 – hier wird First Contentful Paint beschrieben, 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 die Interaktionen stattfinden.
Es gibt keinen Unterschied. INP und FID sind nur zwei verschiedene 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!
Die Nutzer haben nur durch Scrollen und Bewegen des Mauszeigers mit der Seite interagiert. Diese Interaktionen werden bei der Anzahl der Interaktionen pro Sitzung 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 – 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