Interaction to Next Paint (INP)

Unterstützte Browser

  • 96
  • 96
  • x
  • x

Quelle

Interaction to Next Paint (INP) ist ein stabiler Core Web Vitals-Messwert, mit dem die Reaktionsfähigkeit der Seite anhand von Daten aus der Event Timing API bewertet wird. INP beobachtet die Latenz aller Klick-, Tipp- und Tastaturinteraktionen mit einer Seite während ihrer gesamten Lebensdauer und meldet die längste Dauer und ignoriert Ausreißer. Ein niedriger INP bedeutet, dass die Seite durchweg schnell auf die überwiegende Mehrheit der Nutzerinteraktionen reagieren kann.

Eine gute Reaktionszeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, zeigt der Browser im nächsten gerenderten Frame visuelles Feedback an, um zu zeigen, dass die Interaktion erfolgreich war. Sie kann beispielsweise Feedback zu folgenden Aspekten geben:

  • Gibt an, ob ein Artikel, den Sie zu einem Online-Einkaufswagen hinzugefügt haben, tatsächlich hinzugefügt wird.
  • Ob ein mobiles Navigationsmenü geöffnet wurde
  • Gibt an, ob der Inhalt einer Anmeldung vom Server authentifiziert wird.

Manche Interaktionen dauern normalerweise länger als andere. Besonders bei komplexen Interaktionen ist es jedoch wichtig, schnell ein erstes visuelles Feedback zu geben, um dem Nutzer mitzuteilen, dass etwas passiert. Die beste Gelegenheit, dafür zu werden, ist die Zeit bis zum nächsten Mal. Die Absicht von INP besteht daher darin, nicht alle letztendlichen Auswirkungen der Interaktion (z. B. Netzwerkabrufe und UI-Aktualisierungen von anderen asynchronen Vorgängen) zu messen, sondern die Zeit zu messen, in der die nächste Farbe blockiert wird. Verzögertes visuelles Feedback vermittelt den Nutzern das Gefühl, dass die Seite nicht auf ihre Aktionen reagiert.

Das Ziel von INP ist es, für alle oder die meisten vom Nutzer initiierten Interaktionen die Zeit zwischen der Initiierung einer Interaktion durch den Nutzer und dem Rendern des nächsten Frames zu minimieren.

Beispiel für schlechte und gute Reaktionszeiten. Links verhindern lange Aufgaben, dass sich das Akkordeon öffnet. Dies führt dazu, dass der Nutzer mehrmals klickt und denkt, dass die Erfahrung nicht gestört ist. 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 ohne Zwischenfälle geöffnet.
Hinweis zur Berechnung des 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 auf einer ansonsten responsiven Website jedoch zu einer Interaktion mit ungewöhnlich hoher Latenz führen. Je mehr Interaktionen, desto wahrscheinlicher ist dies. Um dem entgegenzuwirken und ein besseres Maß für die tatsächliche Reaktionsfähigkeit dieser Seiten zu erhalten, ignorieren wir jeweils eine Interaktion mit der höchsten Interaktion pro 50 Interaktionen. Da es für den Großteil der Seiten nicht mehr als 50 Interaktionen gibt, meldet der Browser fast immer die schlechtesten Interaktionen. Das 75. Perzentil aller Seitenaufrufe wird dann wie gewohnt erfasst, wodurch Ausreißer weiter entfernt werden, um einen Wert zu erhalten, der die allgemeine Nutzererfahrung besser darstellt.

Eine Interaktion ist eine Gruppe von Event-Handlern, die während derselben logischen Nutzergeste ausgelöst werden. Interaktionen vom Typ „Tippen“ auf einem Touchscreengerät umfassen beispielsweise mehrere Ereignisse wie pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, integrierte Browsersteuerelemente wie Formularelemente oder eine Kombination dieser Elemente gesteuert werden.

Die Latenz einer Interaktion besteht aus der längsten Dauer einer Gruppe von Event-Handlern, die die Interaktion steuert, und zwar vom Beginn der Interaktion durch den Nutzer bis zu dem Moment, in dem der nächste Frame mit visuellem Feedback angezeigt wird.

Wichtiger Hinweis: Weitere Informationen zur Messung des INP finden Sie unter Was ist eine Interaktion?.

Was ist ein guter INP-Score?

Damit Sie schnell reagieren können, sollten Sie den 75. Perzentil der Seitenladevorgänge, die nach Mobilgeräten und Computern segmentiert wurden, erfassen.

  • Eine INP von maximal 200 Millisekunden bedeutet, dass Ihre Seite gut reagiert.
  • Ein INP zwischen 200 Millisekunden und 500 Millisekunden bedeutet, dass die Reaktionszeit deiner 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 ms oder weniger. Schlechte Werte sind größer als 500 ms.

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 dauert an, bis die Event-Handler ausgeführt werden, was möglicherweise durch Faktoren wie lange Aufgaben im Hauptthread verursacht wird. Die Event-Handler der Interaktion werden dann ausgeführt und es tritt eine weitere 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 mit JavaScript gesteuert werden. Dazu gehören beispielsweise 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

Wichtig: Beim Bewegen des Mauszeigers und des Scrollens werden INP nicht berücksichtigt. Das Scrollen mit der Tastatur (Leertaste, Bild nach oben, Bild-ab usw.) erfordert jedoch eine Tastenanschläge, die andere Ereignisse auslösen können, die INP erfasst. Mögliche Scrollvorgänge werden bei der INP-Berechnung nicht berücksichtigt.

Interaktionen finden im Hauptdokument oder in in das Dokument eingebetteten iFrames statt, z. B. beim Klicken auf „Wiedergabe“ bei einem eingebetteten Video. Da Endnutzer nicht wissen, welche Teile der Seite sich in iFrames befinden, müssen Sie INP in iFrames messen, um sie für die gesamte Seite genau zu messen. JavaScript Web APIs haben jedoch keinen Zugriff auf die iFrame-Inhalte und sind möglicherweise nicht in der Lage, INP innerhalb eines iFrames zu messen. Das wird als Unterschied zwischen CrUX und RUM angezeigt.

Interaktionen können aus mehreren Ereignissen bestehen. Ein Tastenanschlag umfasst beispielsweise die Ereignisse keydown, keypress und keyup, während Tippinteraktionen die Ereignisse pointerup und pointerdown enthalten. 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.
Wenn der Nutzer zum Klicken die Maustaste drückt, übernimmt der Browser die Interaktion und zeigt einen Frame mit visuellem Feedback an. Wenn der Nutzer die Maustaste loslässt, wird eine weitere Reihe von Event-Handlern ausgeführt, bevor der Browser einen weiteren Frame anzeigen kann.

INP wird berechnet, wenn der Nutzer die Seite verlässt. Dies führt zu einem einzelnen Wert, der für die allgemeine Reaktionsfähigkeit der Seite während des gesamten Lebenszyklus repräsentiert. Ein niedriger INP bedeutet, dass eine Seite zuverlässig auf Nutzereingaben reagiert.

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

INP ist der Nachfolgemesswert des First Input Delay (FID). Beide sind Messwerte für die Reaktionsfähigkeit, aber FID hat nur die Eingabeverzögerung der ersten Interaktion auf einer Seite gemessen. INP verbessert FID, indem alle Seiteninteraktionen von der Eingabeverzögerung über die Zeit bis zum Ausführen von Event-Handlern bis zur Ausführung des nächsten Frames im Browser berücksichtigt werden.

Diese Unterschiede bedeuten, dass INP und FID unterschiedliche Arten von Reaktionsmesswerten sind. Während FID ein Messwert für die Ladereaktion war, der dazu dient, die erste Impression einer Seite auf dem Nutzer zu bewerten, ist INP ein zuverlässigerer Indikator für die Reaktionsfähigkeit insgesamt, unabhängig davon, wann während der Lebensdauer einer Seiteninteraktionen auftreten.

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 nie damit interagiert.
  • Die Seite wurde geladen, aber der Nutzer interagierte mit Gesten, die nicht gemessen werden, z. B. Scrollen oder Bewegen des Mauszeigers auf 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 Skript erstellt wurde.

INP messen

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

Wichtig: Der INP Ihrer Website lässt sich am besten messen, indem Sie Messwerte von tatsächlichen Nutzern vor Ort erfassen. Wenn Sie sich zur Leistungsbewertung normalerweise auf Labdaten gestützt haben, empfehlen wir Ihnen den Artikel Warum Lab- und Felddaten unterschiedlich sein können und was Sie dagegen tun können.

Im Außendienst

Idealerweise beginnt Ihr Weg zur 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 wertvolle Informationen.

Wenn Ihre Website für die Aufnahme in den Bericht zur Nutzererfahrung in Chrome (CrUX) infrage kommt, können Sie über CrUX in PageSpeed Insights schnell INP-Felddaten sowie Daten zu anderen 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 Ihnen zwar auf allgemeiner Ebene ein Problem teilt, liefert es oft nicht genügend Details, um das Problem vollständig zu verstehen. Mit einer RUM-Lösung können Sie mehr Details zu den Seiten, Nutzern oder Nutzerinteraktionen ermitteln, bei denen langsame Interaktionen auftreten. Die Fähigkeit, INP einzelnen Interaktionen zuzuordnen, trägt dazu bei, Unsicherheiten und unnötigen Aufwand zu vermeiden.

Im Labor

Idealerweise sollten Sie mit dem Testen im Labor beginnen, nachdem 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 den Strategien gehören das Befolgung gängiger Aufrufabfolgen und das Testen von Interaktionen im Laufe des Prozesses sowie die Interaktion mit der Seite während des Ladens, wenn der Hauptthread häufig am stärksten frequentiert ist, um langsame Interaktionen während dieses wichtigen Teils der Nutzererfahrung zu erkennen.

INP verbessern

In unseren Leitfäden zur Optimierung von INP finden Sie Hinweise dazu, wie Sie langsame Interaktionen vor Ort erkennen und anhand von Labdaten optimieren können.

Ä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 manchmal Ä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 aufgeführt.

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