Interaction to Next Paint (INP)

Jeremy Wagner

Unterstützte Browser

  • 96
  • 96
  • x
  • x

Quelle

Aus den Chrome-Nutzungsdaten geht hervor, dass Nutzer nach dem Laden 90% der Zeit auf einer Seite verbringen. Daher ist es wichtig, die Reaktionszeit während des gesamten Lebenszyklus der Seite genau zu messen. Dies wird beim INP-Messwert bewertet.

Eine gute Reaktionszeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, zeigt der Browser im nächsten Frame ein visuelles Feedback an. Durch visuelles Feedback erfahren Sie beispielsweise, ob ein Artikel, den Sie zu einem Online-Einkaufswagen hinzugefügt haben, 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. Besonders bei komplexen Interaktionen ist es jedoch wichtig, schnell ein erstes visuelles Feedback zu geben, um den Nutzenden mitzuteilen, dass etwas passiert. Der nächste Frame, den der Browser malt, ist die beste Möglichkeit, dies zu tun.

Die Absicht von INP besteht daher nicht darin, alle letztendlichen Auswirkungen einer Interaktion wie Netzwerkabrufe und UI-Aktualisierungen von anderen asynchronen Vorgängen zu messen, sondern die Zeit, in der die nächste Paint-Funktion blockiert wird. Wenn visuelles Feedback verzögert wird, haben Nutzer möglicherweise den Eindruck, dass die Seite nicht schnell genug reagiert. INP wurde entwickelt, um Entwicklern dabei zu helfen, diesen Teil der Nutzererfahrung zu messen.

Im folgenden Video siehst du anhand des Beispiels auf der rechten Seite sofort, dass sich ein Akkordeon öffnet. Im Beispiel links wird eine schlechte Reaktionszeit verdeutlicht und es kann zu einer schlechten Nutzererfahrung führen.

Beispiel für schlechte und gute Reaktionszeiten. Links verhindern lange Aufgaben, dass sich das Akkordeon öffnen lässt. Dies führt dazu, dass der Nutzer mehrmals klickt und denkt, dass die Website nicht optimal angezeigt wird. 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 das Akkordeon auf einer reaktionsschnelleren Seite schnell und ununterbrochen geöffnet.

In diesem Leitfaden erfahren Sie, wie INP funktioniert und wie Sie ihn messen können. Außerdem finden Sie hier Ressourcen, wie Sie ihn verbessern können.

Was ist INP?

INP ist ein Messwert, der die allgemeine Reaktionsfähigkeit einer Seite auf Nutzerinteraktionen bewertet. Dazu wird die Latenz aller Klick-, Tipp- und Tastaturinteraktionen während des Besuchs eines Nutzers auf der Seite beobachtet. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

Details zur Berechnung von INP

INP wird berechnet, indem alle Interaktionen mit einer Seite berücksichtigt werden. Bei den meisten Websites wird die Interaktion mit der niedrigsten Latenz als INP gemeldet.

Bei Seiten mit einer großen Anzahl von Interaktionen können zufällige Fehler jedoch 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 dies.

Um ein besseres Maß für die tatsächliche Reaktionsgeschwindigkeit von Seiten mit vielen Interaktionen zu erhalten, ignorieren wir jeweils eine Interaktion mit der höchsten Anzahl pro 50 Interaktionen. Da bei den meisten Seiten nicht mehr als 50 Interaktionen stattfinden, wird die schlechteste Interaktion am häufigsten erfasst. Das 75. Perzentil aller Seitenaufrufe wird dann wie gewohnt erfasst, wodurch Ausreißer weiter entfernt werden, um einen Wert zu erhalten, den die große Mehrheit der Nutzer sieht oder besser.

Eine Interaktion ist eine Gruppe von Event-Handlern, die während derselben logischen Nutzergeste ausgelöst werden. Interaktionen vom Typ „Tippen“ auf einem Gerät mit Touchscreen umfassen beispielsweise mehrere Ereignisse wie pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, integrierte Browsersteuerelemente (z. B. Formularelemente) oder eine Kombination davon gesteuert 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 rendert.

Was ist ein guter INP-Score?

Das Anheften von Labels wie „gut“ oder „schlecht“ ist für einen Messwert für die Reaktionsfähigkeit schwierig. Auf der einen Seite möchten Sie Entwicklungspraktiken fördern, die eine gute Reaktionsfähigkeit priorisieren. Andererseits müssen Sie berücksichtigen, dass es erhebliche Unterschiede bei den Fähigkeiten der Geräte gibt, mit denen Nutzer erreicht werden können, um die Erwartungen an die Entwicklung zu erfüllen.

Damit Sie schnell reagieren können, empfehlen wir, das 75. Perzentil der Seitenladevorgänge zu messen, die im Feld erfasst wurden, aufgeschlüsselt nach Mobilgeräten und Computern:

  • Ein INP unter oder bei 200 Millisekunden bedeutet, dass die Seite gut reagiert.
  • Wenn der INP über 200 Millisekunden und unter bzw. 500 Millisekunden liegt, bedeutet dies, dass die Reaktionszeit einer Seite verbesserungsbedürftig ist.
  • Ein INP über 500 Millisekunden weist auf eine schlechte Reaktionsfähigkeit hin.
Gute INP-Werte sind 200 Millisekunden oder weniger, schlechte Werte über 500 Millisekunden und alles dazwischen muss verbessert werden.
Gute INP-Werte sind 200 Millisekunden oder weniger. Schlechte Werte liegen über 500 Millisekunden.

Was ist eine Interaktion?

Diagramm, das eine Interaktion im Hauptthread zeigt. Der Nutzer gibt eine Eingabe vor, während die Ausführung von Tasks blockiert wird. Die Eingabe wird verzögert, bis diese Aufgaben abgeschlossen sind. Anschließend werden die Event-Handler für Zeiger-, Mouse-Up- und Klick-Ereignisse ausgeführt. Anschließend wird das Rendern und Darstellen gestartet, bis der nächste Frame angezeigt wird.
Die Lebensdauer einer Interaktion. Eine Eingabeverzögerung tritt auf, bis die Event-Handler ausgeführt werden, was möglicherweise durch Faktoren wie lange Aufgaben im Hauptthread verursacht wird. Die Event-Handler-Callbacks der Interaktion werden dann ausgeführt, und es tritt eine Verzögerung auf, bevor der nächste Frame angezeigt wird.

Der Hauptgrund für die Interaktivität ist häufig JavaScript. Browser bieten jedoch Interaktivität über Steuerelemente, die nicht von JavaScript gesteuert werden, wie Kästchen, Optionsfelder und CSS-Steuerelemente.

Für INP werden nur die folgenden Interaktionstypen beobachtet:

  • Klicken mit der Maus.
  • Tippen auf ein Gerät mit Touchscreen
  • Drücken einer Taste auf einer physischen oder auf einer Bildschirmtastatur

Interaktionen finden im Hauptdokument oder in in das Dokument eingebetteten iFrames statt, z. B. Klicken auf „Wiedergabe“ bei einem eingebetteten Video. Endnutzer wissen nicht, was sich in einem iFrame befindet. Daher ist INP in iFrames erforderlich, um die Nutzerfreundlichkeit für die Seite der obersten Ebene zu messen. Da JavaScript Web APIs keinen Zugriff auf die Inhalte von iFrames haben, ist dies möglicherweise ein Unterschied zwischen CrUX und RUM.

Interaktionen können aus mehreren Ereignissen bestehen. Ein Tastenanschlag enthält 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.

Darstellung einer komplexeren Interaktion mit zwei Interaktionen. Das erste ist ein Mousedown-Ereignis, bei dem ein Frame erzeugt wird, bevor die Maustaste losgelassen wird, wodurch mehr Arbeit gestartet wird, 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 Event-Handlern ausgeführt werden, bevor der nächste Frame angezeigt wird.

Die INP der Seite wird berechnet, wenn der Nutzer die Seite verlässt. Das Ergebnis ist ein einzelner Wert, der für die Reaktionszeit der Seite während ihres gesamten Lebenszyklus repräsentativ ist. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Nutzereingaben reagiert hat.

Wie unterscheidet sich INP vom First Input Delay (FID)?

INP ist der Nachfolgemesswert von 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 beobachtet werden – angefangen bei der Eingabeverzögerung über die Zeit, die für die Ausführung von Event-Handlern benötigt wird, bis hin zur Ausführung des nächsten Frames im Browser.

Diese Unterschiede bedeuten, dass INP und FID unterschiedliche Arten von Messwerten für die Reaktionsfähigkeit sind. Während FID ein Messwert für die Ladereaktion war, der dazu dient, den ersten Eindruck der Seite auf den Nutzer zu bewerten, ist INP ein zuverlässigerer Indikator für die Reaktionsfähigkeit insgesamt, unabhängig davon, wann während der Laufzeit einer Seiteninteraktion erfolgt.

Was passiert, wenn kein INP-Wert gemeldet wird?

Es ist möglich, dass eine Seite keinen INP-Wert zurückgibt. Dies kann unter anderem folgende Gründe haben:

  • Die Seite wurde geladen, aber der Nutzer hat keine Taste auf der Tastatur angeklickt, angetippt oder gedrückt.
  • Die Seite wurde geladen, aber der Nutzer hat mit Gesten interagiert, die nicht erfasst 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 erstellt wurde.

INP messen

INP kann sowohl im Praxisbereich als auch im Labor mit verschiedenen Tools gemessen werden.

Im Außendienst

Idealerweise beginnen Sie Ihre INP-Optimierung mit Felddaten. Im Idealfall liefern die Felddaten aus Real User Monitoring (RUM) nicht nur den INP-Wert einer Seite, sondern auch Kontextdaten, die zeigen, 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, die Ihnen helfen können, zu ermitteln, welcher Teil der Interaktion sich auf die Reaktionsfähigkeit ausgewirkt hat.

Wenn Ihre Website für die Aufnahme in den Bericht zur Nutzererfahrung in Chrome infrage kommt, können Sie schnell Felddaten für INP über CrUX in PageSpeed Insights und andere Core Web Vitals abrufen. Sie können zumindest ein Bild der INP Ihrer Website auf Ursprungsebene abrufen, in einigen Fällen können Sie aber auch Daten auf URL-Ebene abrufen.

Sie erhalten in CrUX zwar Informationen zu Problemen, aber keine Informationen zur Ursache des Problems. Mit einer RUM-Lösung können Sie mehr Details zu Seiten, Nutzern oder Nutzerinteraktionen ermitteln, bei denen Reaktionsprobleme auftreten. Dadurch, dass INP einzelnen Interaktionen zugeordnet werden kann, vermeiden Sie Spekulationen und unnötigen Aufwand.

Im Labor

Idealerweise sollten Sie mit dem Testen im Labor beginnen, sobald Ihnen Felddaten vorliegen, die darauf hindeuten, dass eine Seite langsame Interaktionen aufweist. Wenn Sie jedoch keine Felddaten haben, gibt es einige Strategien, um langsame Interaktionen im Labor zu reproduzieren. Zu den Strategien gehören das Befolgung gängiger Aufrufabfolgen und das Testen von Interaktionen während des Ladens der Seite – wenn der Hauptthread oft am stärksten ist –, um langsame Interaktionen in diesem entscheidenden Teil der Nutzererfahrung zu erkennen.

INP verbessern

Es gibt eine Sammlung von Leitfäden zur Optimierung von INP, die Sie durch den Prozess zur Identifizierung langsamer Interaktionen vor Ort und zum Verwenden von Labdaten führen, um Ursachen zu identifizieren und zu optimieren.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs entdeckt, die zum Messen von Messwerten verwendet werden, und manchmal in den Definitionen der Messwerte selbst. Aus diesem Grund müssen gelegentlich Änderungen vorgenommen werden, die sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen zeigen lassen.

Alle Änderungen an der Implementierung oder an der Definition dieser Messwerte werden in diesem Änderungsprotokoll angezeigt.

Wenn du Feedback zu diesen Messwerten hast, kannst du es in der Google-Gruppe „web-vitals-feedback“ einreichen.