Smart-CDN OptiPic — Mehr als Kompression. Komplexe On-the-Fly-Bildoptimierung mit Convert to WebP [Mehr]
Previous Next

Interaktion bis zur nächsten Darstellung (INP)

Die Nutzung von Chrome zeigt, dass 90% der Zeit eines Benutzers auf einer Seite nach dem Laden verbracht wird. Daher ist eine sorgfältige Messung der Reaktionsfähigkeit während des Seitenlebenszyklus wichtig. Das ist es, was die INP-Metrik bewertet.

Gute Reaktionsfähigkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, erfolgt das Ergebnis in Form von visuellem Feedback, welches vom Browser im nächsten dargestellten Frame präsentiert wird. Visuelles Feedback gibt Ihnen Auskunft darüber, ob beispielsweise ein Artikel, den Sie einem Online-Warenkorb hinzufügen, tatsächlich hinzugefügt wird, ob sich ein mobiles Navigationsmenü geöffnet hat, ob die Inhalte eines Anmeldeformulars vom Server authentifiziert werden usw.

Einige Interaktionen dauern naturgemäß länger als andere, aber bei besonders komplexen Interaktionen ist es wichtig, schnell ein erstes visuelles Feedback als Signal für den Benutzer zu präsentieren, dass etwas geschieht. Die Zeit bis zur nächsten Zeichnung ist die früheste Gelegenheit dafür. Daher soll INP nicht alle möglichen Auswirkungen der Interaktion messen (wie z. B. Netzwerkabrufe und UI-Aktualisierungen aus anderen asynchronen Operationen), sondern die Zeit, in der die nächste Zeichnung blockiert wird. Durch Verzögerung des visuellen Feedbacks könnten Sie Benutzern den Eindruck vermitteln, dass die Seite nicht auf ihre Aktionen reagiert.

Das Ziel von INP ist es, sicherzustellen, dass die Zeit von der Benutzerinitiierung einer Interaktion bis zur nächsten Bildwiederholung so kurz wie möglich ist, für alle oder die meisten Interaktionen, die der Benutzer durchführt.

Im folgenden Video gibt das Beispiel auf der rechten Seite unmittelbares visuelles Feedback, dass sich ein Akkordeon öffnet. Es verdeutlicht auch, wie eine schlechte Reaktionsfähigkeit zu mehreren unbeabsichtigten Reaktionen auf Eingaben führen kann, da der Benutzer glaubt, dass die Erfahrung fehlerhaft ist.

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

Dieser Artikel erklärt, wie INP funktioniert, wie man es misst und verweist auf Ressourcen zur Verbesserung.

INP ist eine Metrik, die die Gesamtreaktionsfähigkeit einer Seite auf Benutzerinteraktionen bewertet, indem die Latenz aller Klick-, Tippen- und Tastaturinteraktionen beobachtet wird, die während des gesamten Aufenthalts eines Benutzers auf einer Seite auftreten. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

Wie oben erwähnt, wird INP durch Beobachtung aller Interaktionen mit einer Seite berechnet. Bei den meisten Websites wird die Interaktion mit der längsten Latenz als INP gemeldet. Bei Seiten mit vielen Interaktionen können jedoch zufällige Störungen zu einer ungewöhnlich hohen Interaktion auf einer ansonsten reaktionsfähigen Website führen. Je mehr Interaktionen es gibt, desto wahrscheinlicher ist dies. Um dem entgegenzuwirken und ein besseres Maß für die tatsächliche Reaktionsfähigkeit dieser Arten von Seiten zu geben, ignorieren wir bei jeder 50. Interaktion eine höchste Interaktion. Die überwiegende Mehrheit der Seiteninteraktionen hat nicht mehr als 50 Interaktionen, sodass die schlechteste Interaktion gemeldet wird. Das 75. Perzentil aller Seitenaufrufe wird wie üblich gemeldet, was Ausreißer weiter entfernt, um einen Wert zu liefern, den die überwiegende Mehrheit der Benutzer erlebt oder besser.

Eine Interaktion ist eine Gruppe von Ereignisverarbeitern, die während der gleichen logischen Benutzergeste aktiviert werden. Beispielsweise umfassen "Tippen"-Interaktionen auf einem Touchscreen-Gerät 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 Ereignishandlern, die die Interaktion steuern, von dem Zeitpunkt an, an dem der Benutzer die Interaktion beginnt, bis zum Zeitpunkt, an dem der nächste Frame mit visuellem Feedback präsentiert wird.

Das Anbringen von Etiketten wie "gut" oder "schlecht" an eine Reaktionsfähigkeitsmetrik ist schwierig. Einerseits möchten Sie Entwicklungsmethoden fördern, die eine gute Reaktionsfähigkeit priorisieren. Andererseits müssen Sie berücksichtigen, dass es erhebliche Unterschiede in den Fähigkeiten der Geräte gibt, die Menschen verwenden, um realistische Entwicklungserwartungen zu setzen.

Um sicherzustellen, dass Sie Benutzererlebnisse mit guter Reaktionsfähigkeit bieten, ist eine gute Messlatte der 75. Perzentil der Seitenaufzeichnungen im Feld, aufgeschlüsselt nach mobilen und Desktop-Geräten:

  • Ein INP unter oder gleich 200 Millisekunden bedeutet, dass Ihre Seite eine gute Reaktionsfähigkeit hat.
  • Ein INP über 200 Millisekunden und unter oder gleich 500 Millisekunden bedeutet, dass die Reaktionsfähigkeit Ihrer Seite verbessert werden muss.
  • Ein INP über 500 Millisekunden bedeutet, dass Ihre Seite eine schiefe Reaktionsfähigkeit hat.


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

Der Haupttreiber für Interaktivität ist oft JavaScript, obwohl Browser auch Interaktivität durch Steuerelemente bereitstellen, die nicht von JavaScript gesteuert werden, wie z.B. Kontrollkästchen, Optionsfelder und durch CSS gesteuerte Steuerelemente.

Was INP betrifft, werden nur die folgenden Interaktionstypen beobachtet:

  • Klicken mit der Maus.
  • Tippen auf einem Gerät mit Touchscreen.
  • Drücken einer Taste auf einer physischen oder virtuellen Tastatur.

Interaktionen finden im Hauptdokument oder in in das Dokument eingebetteten iframes statt – zum Beispiel durch Klicken auf Wiedergabe bei einem eingebetteten Video. Endbenutzer werden nicht bemerken, ob sich etwas in einem iframe befindet oder nicht. Daher sind INP-Werte innerhalb von iframes erforderlich, um die Benutzererfahrung für die erstklassige Seite zu messen. Beachten Sie, dass JavaScript Web-APIs keinen Zugriff auf die Inhalte des iframes haben und daher möglicherweise nicht in der Lage sind, INP-Werte innerhalb eines iframes zu messen. Dies führt zu Unterschieden zwischen CrUX und RUM.

Interaktionen können aus zwei Teilen bestehen, von denen jeder mehrere Ereignisse enthält. Zum Beispiel besteht eine Tastatureingabe aus den Ereignissen keydown, keypress und keyup. Tipperaktionen enthalten die Ereignisse pointerup und pointerdown. Das Ereignis mit der längsten Dauer innerhalb der Interaktion wird als Latenz der Interaktion gewählt.

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

INP wird berechnet, wenn der Benutzer die Seite verlässt, und ergibt einen einzigen Wert, der die gesamte Reaktionsschnelligkeit der Seite während des gesamten Lebenszyklus repräsentiert. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Benutzereingaben reagiert.

Where INP considers all page interactions, First Input Delay (FID) only accounts for the first interaction. It also only measures the first interaction's input delay, not the time it takes to run event handlers, or the delay in presenting the next frame.

Given that FID is also a load responsiveness metric, the rationale behind it is that if the first interaction made with a page in the loading phase has little to no perceptible input delay, the page has made a good first impression.

INP ist mehr als nur ein erster Eindruck. Durch die Erfassung aller Interaktionen kann die Reaktionsfähigkeit umfassend bewertet werden, was INP zu einem zuverlässigeren Indikator für die Gesamtreaktionsfähigkeit macht als FID.

Es ist möglich, dass eine Seite keinen INP-Wert zurückgibt. Dies kann aus verschiedenen Gründen geschehen:

  • Die Seite wurde geladen, aber der Benutzer hat weder geklickt, getippt noch eine Taste auf der Tastatur gedrückt.
  • Die Seite wurde geladen, aber der Benutzer hat mit der Seite interagiert, indem er Gesten verwendet hat, die kein Klicken, Tippen oder Verwenden der Tastatur beinhalteten. Zum Beispiel fließendes Scrollen oder Überfahren von Elementen wird nicht in die Berechnung des INP einbezogen.
  • Die Seite wird von einem Bot wie einem Suchroboter oder einem scriptfreien Browser aufgerufen, der nicht zum Interagieren mit der Seite programmiert wurde.

INP kann sowohl auf dem Feld als auch im Labor mit einer Vielzahl von Tools gemessen werden.

Idealerweise beginnt Ihre Reise zur Optimierung des INP mit Felddaten. Im besten Fall liefert Ihnen Felddaten aus der Überwachung realer Benutzer (RUM) nicht nur den INP-Wert einer Seite, sondern auch kontextbezogene Daten, die hervorheben, welche spezifische Interaktion für den INP-Wert selbst verantwortlich war, ob die Interaktion während oder nach dem Laden der Seite aufgetreten ist, den Typ der Interaktion (Klicken, Tastendruck oder Tippen) und andere wertvolle Informationen.

Wenn Ihre Website für die Aufnahme in den Chrome User Experience Report (CrUX) qualifiziert ist, können Sie über CrUX in PageSpeed Insights (und andere Core Web Vitals) schnell Felddaten für INP erhalten. Mindestens erhalten Sie ein bild des Standorts INP, in einigen Fällen erhalten Sie jedoch auch Seitenebene Daten.

Allerdings liefert CrUX oft nicht genügend Details, um das Problem vollständig zu verstehen, obwohl es auf höchster Ebene eine nützliche Information darüber gibt, dass ein Problem besteht. Eine RUM-Lösung kann Ihnen helfen, detailliertere Informationen zu den Seiten, Benutzern oder Benutzerinteraktionen zu erhalten, die langsame Interaktionen verursachen. Wenn Sie INP einzelnen Interaktionen zuordnen können, vermeiden Sie Vermutungen und unnötigen Aufwand.

Am besten beginnen Sie mit Tests im Labor, sobald Sie Felddaten haben, die darauf hindeuten, dass langsame Interaktionen auftreten. Wenn jedoch keine Felddaten vorliegen, gibt es einige Strategien, um langsame Interaktionen im Labor zu reproduzieren. Diese Strategien umfassen das Nachverfolgen üblicher Benutzerabläufe und das Testen von Interaktionen entlang des Weges sowie die Interaktion mit der Seite während des Ladens - wenn der Hauptthread oft am stärksten ausgelastet ist - um langsame Interaktionen während dieses wichtigen Teils der Benutzererfahrung zu erkennen.

Eine Sammlung von Leitfäden zur Optimierung von INP steht zur Verfügung, um Sie durch den Prozess der Identifizierung langsamer Interaktionen im Feld und der Verwendung von Labordaten zur Optimierung in verschiedenen Bereichen zu führen.

?