Interaction to Next Paint (INP)

Jeremy Wagner

Barry Pollard

Veröffentlicht: 6. Mai 2022, zuletzt aktualisiert: 9. September 2025

Nutzungsdaten von Chrome zeigen, dass Nutzer 90% ihrer Zeit auf einer Seite nach dem Laden verbringen. Daher ist es wichtig, die Reaktionsfähigkeit während des gesamten Seitenlebenszyklus sorgfältig zu messen. Das ist der Messwert, den INP bewertet.

Eine gute Reaktionsfähigkeit bedeutet, dass eine Seite schnell auf Interaktionen reagiert. Wenn eine Seite auf eine Interaktion reagiert, stellt der Browser im nächsten Frame, den er rendert, visuelles Feedback bereit. Visuelles Feedback informiert Sie beispielsweise darüber, ob ein Artikel, den Sie in einen Online-Einkaufswagen legen, tatsächlich hinzugefügt wird, ob ein mobiles Navigationsmenü geöffnet wurde oder ob die Inhalte eines Anmeldeformulars vom Server authentifiziert werden.

Einige Interaktionen dauern naturgemäß länger als andere. Bei besonders komplexen Interaktionen ist es jedoch wichtig, dem Nutzer schnell ein erstes visuelles Feedback zu geben, um ihm zu signalisieren, dass etwas passiert. Der nächste Frame, den der Browser rendert, ist die frühestmögliche Gelegenheit dazu.

Der INP-Messwert soll daher nicht alle Auswirkungen einer Interaktion messen, z. B. Netzwerkabrufe und UI-Aktualisierungen durch andere asynchrone Vorgänge, sondern die Zeit, in der das nächste Rendering blockiert wird. Wenn visuelles Feedback verzögert wird, kann es für Nutzer so aussehen, als würde die Seite nicht schnell genug reagieren. INP wurde entwickelt, um Entwicklern zu helfen, diesen Teil der Nutzerfreundlichkeit zu messen.

Im folgenden Video wird im Beispiel rechts sofort visuell angezeigt, dass sich ein Akkordeon öffnet. Das Beispiel links zeigt, wie eine schlechte Reaktionsfähigkeit zu einer schlechten Nutzererfahrung führen kann.

In diesem Leitfaden wird erläutert, wie INP funktioniert, wie Sie INP messen und wie Sie INP verbessern können.

Was ist INP?

INP ist ein Messwert, mit dem die Reaktionszeit einer Seite auf Nutzerinteraktionen insgesamt bewertet wird. Dazu wird die Latenz aller Klicks, Berührungen und Tastaturinteraktionen erfasst, die während des Besuchs eines Nutzers auf einer Seite stattfinden. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

Eine Interaktion ist eine Gruppe von Event-Handlern, die während derselben logischen Nutzeraktion ausgelöst werden. Beispiel: „Tippen“-Interaktionen auf einem Touchscreen-Gerät umfassen mehrere Ereignisse wie pointerup, pointerdown und click. Eine Interaktion kann durch JavaScript, CSS, integrierte Browsersteuerelemente (z. B. Formularelemente) oder eine Kombination davon 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 das nächste Mal einen Frame rendern kann. In seltenen Fällen gibt es keinen Frame, der gerendert werden kann. Die Interaktion endet jedoch, wenn der Browser einen Frame rendern könnte.

Was ist ein guter INP-Wert?

Es ist schwierig, Labels wie „gut“ oder „schlecht“ an einen Messwert für die Reaktionsschnelligkeit anzuhängen. Einerseits möchten Sie Entwicklungspraktiken fördern, bei denen eine gute Reaktionsfähigkeit im Vordergrund steht. Andererseits müssen Sie die erhebliche Variabilität bei den Funktionen der Geräte berücksichtigen, die Nutzer verwenden, um realistische Entwicklungsziele festzulegen.

Damit Sie für Nutzer eine gute Reaktionsfähigkeit bieten, sollten Sie das 75. Perzentil der im Feld aufgezeichneten Seitenaufrufe messen und nach Mobilgeräten und Computern segmentieren:

• Ein INP-Wert unter oder bei 200 Millisekunden bedeutet, dass eine Seite eine gute Reaktionsfähigkeit hat.
• Ein INP-Wert über 200 Millisekunden und unter oder gleich 500 Millisekunden bedeutet, dass die Reaktionsfähigkeit einer Seite verbessert werden muss.
• Ein INP über 500 Millisekunden bedeutet, dass eine Seite eine schlechte Reaktionsfähigkeit hat.

Was ist eine Interaktion?

Die Interaktivität wird häufig durch JavaScript ermöglicht. Browser bieten jedoch auch Interaktivität durch Steuerelemente, die nicht auf JavaScript basieren, z. B. Kästchen, Optionsfelder und Steuerelemente, die auf CSS basieren.

Da es bei INP um die Interaktion geht, werden nur die folgenden Interaktionstypen berücksichtigt:

• Klicken mit einer Maus
• Tippen auf ein Gerät mit Touchscreen
• Wenn Sie eine Taste auf einer physischen oder einer Bildschirmtastatur drücken.

Interaktionen finden im Hauptdokument oder in in das Dokument eingebetteten iFrames statt, z. B. wenn ein Nutzer auf die Wiedergabeschaltfläche eines eingebetteten Videos klickt. Endnutzer wissen nicht, was sich in einem iFrame befindet und was nicht. Daher ist INP in iFrames erforderlich, um die Nutzerfreundlichkeit der Seite der obersten Ebene zu messen. Da JavaScript-Web-APIs keinen Zugriff auf den Inhalt von iFrames haben, kann dies zu Unterschieden zwischen CrUX und RUM führen.

Interaktionen können aus mehreren Ereignissen bestehen. Ein Tastendruck 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.

Wie im Diagramm dargestellt, umfasst die Verarbeitungsdauer von INP alle Event-Handler-Callbacks innerhalb dieses Frames. Die Eingabeverzögerung ist also die Zeit, die vergeht, bis ein Callback für eine Interaktion verarbeitet wird. Die Verarbeitungsdauer ist die Zeit, die für die Ausführung aller Callbacks benötigt wird. Die Darstellungsverzögerung ist die Zeit, die nach der Ausführung der Callbacks vergeht, bis der Frame auf dem Bildschirm des Nutzers dargestellt wird.

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

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

INP ist der Nachfolgemesswert von First Input Delay (FID). Beide sind Messwerte für die Reaktionsschnelligkeit, aber FID hat nur die Eingabeverzögerung der ersten Interaktion auf einer Seite gemessen. INP ist eine Verbesserung gegenüber FID, da alle Interaktionen auf einer Seite beobachtet werden, angefangen bei der Eingabeverzögerung über die Zeit, die zum Ausführen von Ereignishandlern benötigt wird, bis hin zum Zeitpunkt, an dem der Browser den nächsten Frame gerendert hat.

Diese Unterschiede bedeuten, dass INP und FID unterschiedliche Arten von Reaktionsfähigkeitsmesswerten sind. FID war ein Messwert für die Reaktionsfähigkeit beim Laden, mit dem der erste Eindruck der Seite auf den Nutzer bewertet werden sollte. INP ist ein zuverlässigerer Indikator für die Reaktionsfähigkeit insgesamt, unabhängig davon, wann Interaktionen auf einer Seite stattfinden.

Was ist, wenn kein INP-Wert gemeldet wird?

Es ist möglich, dass für eine Seite kein INP-Wert zurückgegeben wird. Das kann verschiedene Gründe haben:

• Die Seite wurde geladen, der Nutzer hat aber nie auf etwas geklickt, getippt oder eine Taste auf der Tastatur gedrückt.
• Die Seite wurde geladen, aber der Nutzer hat mit ihr durch nicht gemessene Gesten interagiert, z. B. durch Scrollen oder Bewegen des Mauszeigers über Elemente.
• Auf die Seite wird von einem Bot wie einem Suchcrawler oder einem Headless-Browser zugegriffen, der nicht für die Interaktion mit der Seite programmiert wurde.

INP messen

INP kann sowohl in der Praxis als auch im Labor gemessen werden, sofern Sie realistische Nutzerinteraktionen simulieren können.

Im Außendienst

Im Idealfall beginnen Sie mit der Optimierung von INP mit Felddaten. Im besten Fall erhalten Sie mit Felddaten aus Real User Monitoring (RUM) nicht nur den INP-Wert einer Seite, sondern auch Kontextdaten, aus denen hervorgeht, welche spezifische Interaktion für den INP-Wert verantwortlich war, ob die Interaktion während oder nach dem Laden der Seite stattgefunden hat, welche Art von Interaktion (Klick, Tastendruck oder Tippen) es war und andere wertvolle Zeitangaben, mit denen Sie ermitteln können, welcher Teil der Interaktion sich auf die Reaktionszeit ausgewirkt hat.

Wenn Ihre Website für die Aufnahme in den Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX) 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 eine Übersicht über den INP Ihrer Website auf Ursprungsebene erhalten. In einigen Fällen sind auch Daten auf URL-Ebene verfügbar.

CrUX kann Ihnen zwar sagen, ob ein Problem vorliegt, aber nicht, was die Ursache dafür ist. Mit einer RUM-Lösung können Sie mehr Details zu Seiten, Nutzern oder Nutzerinteraktionen mit Reaktionsfähigkeitsproblemen ermitteln. Wenn INP einzelnen Interaktionen zugeordnet werden kann, sind keine Schätzungen und kein unnötiger Aufwand erforderlich.

Im Labor

Idealerweise beginnen Sie mit dem Testen im Labor, sobald Sie Felddaten haben, die darauf hindeuten, dass die Interaktionen auf einer Seite langsam sind. Mit Felddaten wird es viel einfacher, problematische Interaktionen im Labor zu reproduzieren.

Es ist jedoch durchaus möglich, dass Sie keine realen Daten haben. Der INP kann zwar in einigen Labortools gemessen werden, der resultierende INP-Wert für eine Seite während Labortests hängt jedoch davon ab, welche Interaktionen während des Messzeitraums ausgeführt werden. Nutzerverhalten kann unvorhersehbar und sehr unterschiedlich sein. Daher werden bei Labortests möglicherweise nicht dieselben Interaktionsprobleme erkannt wie bei Feldtests. Außerdem wird für einige Labortools kein INP-Wert für eine Seite angegeben, da sie nur das Laden einer Seite ohne Interaktionen beobachten. In solchen Fällen kann die Gesamtblockierungszeit (Total Blocking Time, TBT) ein angemessener Proxy-Messwert für INP sein, aber sie ist an sich kein Ersatz für INP.

Auch wenn es Einschränkungen bei Labortools gibt, wenn es darum geht, den INP einer Seite zu bewerten, gibt es einige Strategien, um langsame Interaktionen im Labor zu reproduzieren. Zu den Strategien gehören das Folgen gängiger Nutzerflüsse 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 ausgelastet ist. So lassen sich langsame Interaktionen während dieses wichtigen Teils der Nutzererfahrung erkennen.

INP in JavaScript messen

Um INP in JavaScript zu messen, müssen Sie die Ereigniszeitpunkte für alle Interaktionen erfassen und dann beim Entladen der Seite das 98. Perzentil aller Interaktionen berechnen. Sie können sich den Quellcode der JavaScript-Bibliothek web vitals ansehen, der eine Referenzimplementierung für die Berechnung von INP enthält.

In den meisten Fällen ist der aktuelle INP-Wert zum Zeitpunkt des Entladens der Seite der endgültige INP-Wert für diese Seite. Es gibt jedoch einige wichtige Ausnahmen, die im nächsten Abschnitt beschrieben werden. Die web vitals-JavaScript-Bibliothek berücksichtigt diese so weit wie möglich, innerhalb der Einschränkungen der Web-APIs.

Unterschiede zwischen dem Messwert und der API

• event-Einträge unter 104 Millisekunden werden standardmäßig nicht mit Leistungsbeobachtern gemeldet. Dieser Standardwert kann geändert werden, wenn ein Leistungsbeobachter mit dem Parameter durationThreshold registriert wird. Auch dann gilt jedoch ein Mindestwert von 16 Millisekunden. Aus diesem Grund empfiehlt es sich, auch den Eintrag first-input zu berücksichtigen. Das ist ebenfalls ein Eintrag für das Ereignis-Timing, der garantiert beobachtbar ist, auch wenn seine Dauer weniger als durationThreshold beträgt. So wird dafür gesorgt, dass für Seiten mit Interaktionen immer ein INP-Wert gemeldet wird.
• Für die perfekte Berechnung von Perzentilen müssen technisch gesehen alle Stichproben im Arbeitsspeicher behalten werden, was kostspielig sein kann. Sie können jedoch Perzentile, insbesondere sehr hohe Perzentile wie p98, schätzen, indem Sie einfach eine kleine Liste der N schlechtesten Interaktionen führen. 10 ist eine gängige Wahl.
• Wenn eine Seite aus dem Back-Forward-Cache wiederhergestellt wird, sollte ihr INP-Wert auf null zurückgesetzt werden, da Nutzer dies als separaten Seitenaufruf wahrnehmen.
• Die API meldet keine event-Einträge für Interaktionen, die in iFrames stattfinden. Der Messwert berücksichtigt sie jedoch, da sie Teil der Nutzerfreundlichkeit der Seite sind. Dies kann zu Unterschieden zwischen CrUX und RUM führen. Um INP richtig zu messen, sollten Sie sie berücksichtigen. Untergeordnete Frames können die API verwenden, um ihre event-timing-Einträge an den übergeordneten Frame zu melden.

Zusätzlich zu diesen Ausnahmen ist INP etwas komplexer, da der gesamte Lebenszyklus einer Seite gemessen wird:

• Nutzer lassen einen Tab möglicherweise sehr lange geöffnet – Tage, Wochen oder Monate. Tatsächlich schließen Nutzer Tabs möglicherweise nie.
• In mobilen Betriebssystemen werden Browser in der Regel nicht für das Entladen von Seiten-Callbacks für Hintergrundtabs ausgeführt. Daher ist es schwierig, den „finalen“ Wert zu erfassen.

Um solche Fälle zu berücksichtigen, sollte INP immer gemeldet werden, wenn eine Seite im Hintergrund ist, zusätzlich zu jedem Zeitpunkt, an dem sie entladen wird (das visibilitychange-Ereignis deckt beide Szenarien ab). Analysesysteme, die diese Daten empfangen, müssen dann den endgültigen INP-Wert im Backend berechnen.

Anstatt sich selbst mit all diesen Fällen auseinanderzusetzen, können Entwickler die web-vitals-JavaScript-Bibliothek verwenden, um INP zu messen. Dabei werden alle oben genannten Fälle berücksichtigt, mit Ausnahme des iFrame-Falls:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

INP verbessern

Eine Reihe von Anleitungen zur Optimierung von INP führt Sie durch den Prozess der Identifizierung langsamer Interaktionen in der Praxis und der Verwendung von Labordaten, um Ursachen zu ermitteln und zu optimieren.

Änderungsprotokoll

Gelegentlich werden Fehler in den APIs entdeckt, die zum Messen von Messwerten verwendet werden, und manchmal auch in den Definitionen der Messwerte selbst. Daher müssen manchmal Änderungen vorgenommen werden, die sich in Ihren internen Berichten und Dashboards als Verbesserungen oder Regressionen bemerkbar machen können.

Damit Sie diese Änderungen besser nachvollziehen können, werden alle Änderungen an der Implementierung oder Definition dieser Messwerte in diesem Änderungsprotokoll aufgeführt.

Wenn Sie Feedback zu diesen Messwerten haben, können Sie es in der Google-Gruppe „web-vitals-feedback“ geben.

Wissen testen