Interaction to Next Paint (INP)

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.

Gute Reaktionszeiten bedeutet, dass eine Seite schnell auf Interaktionen reagiert, die mit ihr erfolgen. Wenn eine Seite auf eine Interaktion reagiert, entsteht als Ergebnis visuelles Feedback. Dieses wird vom Browser im nächsten Frame eingeblendet. 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.

Einige Interaktionen dauern natürlich länger als andere. Besonders bei komplexen Interaktionen ist es jedoch wichtig, schnell ein erstes visuelles Feedback zu geben, um den Nutzer darauf hinzuweisen, dass etwas passiert. Die Zeit bis zum nächsten Mal ist die früheste Gelegenheit, dies zu tun. Die Absicht von INP besteht daher nicht darin, alle letztendlichen Auswirkungen der Interaktion zu messen (z. B. Netzwerkabrufe und UI-Aktualisierungen von anderen asynchronen Vorgängen), sondern die Zeit, in der der next Paint blockiert wird. Durch das verzögerte visuelle Feedback vermitteln Sie den Nutzern möglicherweise den Eindruck, dass die Seite nicht auf ihre Aktionen reagiert.

Das Ziel von INP ist es, dafür zu sorgen, dass die Zeit vom Initiieren einer Interaktion bis zum nächsten Frame für alle oder die meisten Interaktionen des Nutzers so kurz wie möglich ist.

Im folgenden Video siehst du anhand des Beispiels auf der rechten Seite sofort, dass sich ein Akkordeon öffnet. Es zeigt auch, dass eine schlechte Reaktionszeit zu mehreren unbeabsichtigten Antworten führen kann, weil die Nutzenden der Meinung sind, dass die User Experience nicht gegeben ist.

Beispiel für schlechtes im Vergleich zu guter Reaktionszeit. 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.

In diesem Artikel erfahren Sie, wie INP funktioniert und wie Sie sie messen können. Außerdem finden Sie Tipps zu Verbesserungsmöglichkeiten.

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.

Hinweis zur Berechnung des INP

Wie oben erwähnt, wird der INP-Wert 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 auf einer ansonsten responsiven Website jedoch zu einer ungewöhnlich hohen Interaktion führen. Je mehr Interaktionen, desto wahrscheinlicher ist es, dass dies eintritt. Um dem entgegenzuwirken und ein besseres Maß für die tatsächliche Reaktionsgeschwindigkeit dieser Seiten zu erhalten, ignorieren wir jeweils eine höchste Interaktion pro 50 Interaktionen. Da es bei den meisten Seiten der Website nicht mehr als 50 Interaktionen gibt, wird die schlechteste Interaktion 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 steuert – vom Beginn der Interaktion durch den Nutzer bis zu dem Moment, in dem der nächste Frame mit visuellem Feedback angezeigt wird.

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 Ihre Seite gut reagiert.
  • Wenn der INP über 200 Millisekunden und unter 500 Millisekunden liegt, bedeutet dies, dass die Reaktionszeit Ihrer Seite verbesserungswürdig ist.
  • Ein INP über 500 Millisekunden bedeutet, dass die Seite schlecht reaktionsschnell ist.
Gute INP-Werte sind 200 Millisekunden oder weniger, schlechte Werte über 500 Millisekunden und alles dazwischen muss verbessert werden.

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. Es tritt eine Eingabeverzögerung auf, bis die Event-Handler ausgeführt werden. Dies kann durch Faktoren wie lange Aufgaben im Hauptthread verursacht werden. Die Event-Handler 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.

In Bezug auf 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. JavaScript Web APIs haben keinen Zugriff auf die iFrame-Inhalte und können deshalb möglicherweise INP in einem iFrame nicht messen. Hier wird ein Unterschied zwischen CrUX und RUM angezeigt.

Interaktionen können aus zwei Teilen mit jeweils mehreren Ereignissen bestehen. Beispielsweise besteht ein Tastenanschlag aus den Ereignissen keydown, keypress und keyup. Tippinteraktionen enthalten pointerup- und pointerdown-Ereignisse. Das Ereignis mit der längsten Dauer innerhalb der Interaktion wird als Latenz der Interaktion ausgewählt.

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.

INP wird berechnet, wenn der Nutzer die Seite verlässt. So entsteht ein einzelner Wert, der für die Reaktionsfähigkeit der Seite während des gesamten Lebenszyklus der Seite repräsentativ ist. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Nutzereingaben reagiert.

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

Während INP alle Seiteninteraktionen berücksichtigt, wird beim First Input Delay (FID) nur die erste Interaktion berücksichtigt. Außerdem wird nur die Eingabeverzögerung der ersten Interaktion gemessen, nicht die Zeit, die zum Ausführen von Event-Handlern benötigt wird, oder die Verzögerung bei der Darstellung des nächsten Frames.

Da FID auch ein Messwert für die Ladereaktion ist, lautet der Grund dafür, dass die Seite einen guten ersten Eindruck gemacht hat, wenn die erste Interaktion mit einer Seite in der Ladephase wenig oder keine spürbare Eingabeverzögerung aufweist.

INP ist mehr als nur der erste Eindruck. Durch die Stichprobenerhebung aller Interaktionen kann die Reaktionsfähigkeit umfassend bewertet werden, sodass INP ein zuverlässigerer Indikator für die Reaktionsfähigkeit insgesamt ist als FID.

Was passiert, wenn kein INP-Wert gemeldet wird?

Unter Umständen kann eine Seite keinen INP-Wert zurückgeben. Das kann verschiedene Ursachen 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 interagierte mit der Seite mithilfe von Gesten, bei denen kein Klicken, Tippen oder Verwenden der Tastatur erforderlich war. Wenn Sie beispielsweise scrollen oder den Mauszeiger auf Elemente bewegen, wird die INP-Berechnung nicht berücksichtigt.
  • 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 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, den Typ der Interaktion (Klicken, Tastendruck oder Tippen) und andere nützliche Informationen.

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 Seitenebene abrufen.

Obwohl CrUX hilfreich ist, um auf allgemeiner Ebene ein Problem auf ein Problem zu geben, bietet es häufig nicht genügend Details, um das Problem vollständig zu verstehen. Eine RUM-Lösung kann Ihnen dabei helfen, die Seiten, Nutzer oder Nutzerinteraktionen, bei denen langsame Interaktionen stattfinden, detaillierter aufzuschlüsseln. 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 auf langsame Interaktionen hindeuten. Sind keine Felddaten vorhanden, gibt es jedoch einige Strategien, um langsame Interaktionen im Labor zu reproduzieren. Zu diesen Strategien gehören das Verfolgen gängiger Aufrufabfolgen und das Testen von Interaktionen während des Ladevorgangs sowie die Interaktion mit der Seite während des Ladevorgangs – wenn der Hauptthread oft am stärksten frequentiert ist –, um langsame Interaktionen während dieses entscheidenden Teils der User Experience zu erkennen.

INP verbessern

Es gibt eine Sammlung von Leitfäden zur Optimierung von INP, die Sie durch den Prozess zur Identifizierung langsamer Interaktionen in der Praxis und durch die Nutzung von Labdaten führen, um sie auf verschiedene Weise aufzuschlüsseln 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.