Interaction to Next Paint (INP)

Was bedeutet INP?

INP ist eine Metrik, die darauf abzielt, die Latenz der gesamten Interaktionen auf einer Website abzubilden. Hierbei wird die Interaktion mit der längsten Reaktionszeit ausgewählt, die bei dem Besuch einer Website durch einen Nutzer auftritt.

Bei Websites mit durchschnittlich weniger als 50 Interaktionen pro Sitzung ist INP die Interaktion mit der schlechtesten Latenz. Bei Websiten, die mehr als 50 Interaktionen pro Sitzung aufweisen, ist der INP meist das 98. Perzentil der Interaktionslatenz.

Wichtig ist an dieser Stelle, dass die Interaktion mit der schlechtesten Latenz als Referenzwert genutzt wird. Selbst wenn also Interaktionen von einer Website schnell beantwortet werden, können Verzögerungen bei anderen Interaktionen zu einem schlechten INP-Wert führen.

Wie ist eine Interaktion definiert?

Unter einer Interaktion versteht man eine Reihe von zusammenhängenden Ereignissen, die ein Nutzer durch das Interagieren mit einer Webseite auslöst. Ein einfaches „Tap“-Event auf einem Smartphone umfasst beispielsweise mehrere einzelne Ereignisse wie „Pointerup“, „Pointerdown“ und „Click“. All diese Ereignisse beeinflussen die Latenzzeit der gesamten Interaktion.

Die Latenz einer Interaktion bemisst sich nach der längsten Dauer eines einzelnen Ereignisses, welches Teil der gesamten Interaktion ist. Hierbei wird die Dauer von dem Punkt an gemessen, an dem der Nutzer mit der Webseite interagiert bis hin zur Auslieferung des Frames (nachdem alle verbundenen Event Handler ausgeführt wurden).

In der Regel ist der Treiber einer Interaktion auf einer Webseite JavaScript. Interaktionen sind beispielsweise:

• • Anklicken eines interaktiven Elements (z.B. ein Button) mit der Maus
• • Tippen auf ein interaktives Element auf einem Gerät mit Touchscreen (z.B. Smartphone oder Tablet)
• • Drücken einer Taste auf einer physischen Tastatur

Quelle: Google

Wie bemisst sich die Dauer einer Interaktion?

Die Dauer einer Interaktion ergibt sich aus der Summe der folgenden Zeitspannen:

• • Input Delay: die Zeitspanne zwischen der Interaktion des Nutzers mit der Webseite bis zur Ausführung des Event-Handlers
• • Verarbeitungszeit: die Zeitspanne für das Ausführen des Event-Handlers
• • Presenation Delay (bzw. Präsentationsverzögerung): die Zeitspanne zwischen der Ausführung des Event-Handlers bis zur visuellen Darstellung des nächsten Frames durch den Browser

Die Dauer einer Interaktion ergibt sich somit aus der Summe der Zeit, die zur Ausführung der einzelnen Event-Callbacks benötigt wird.

Ähnlich wie beim CLS (Cumulative Layout Shift) wird der INP berechnet, sobald der Nutzer die Website verlässt. Ein Wert steht hierbei repräsentativ für die allgemeine (auf die Metrik bezogenen) Responsiveness einer Website. Das bedeutet: wenn Interaktionen auf Webseiten mit einem hohen Perzentil schnell beantwortet werden, dann werden Interaktionen auf allen niedrigeren Perzentilen ebenfalls schnell beantwortet.

Was ist ein guter INP-Wert?

Google betont,  dass es nicht einfach ist, Metriken für die Responsiveness im Bereich Gut oder Schlecht anzusiedeln. Grundsätzlich sollte es das Ziel von Webmastern sein, eine gute Responsiveness sicherzustellen, um wiederum eine möglichst gute User Experience auf der Website zu bieten. Andererseits muss bedacht werden, dass die Endgeräte der Nutzer sehr unterschiedlich sein können. Dementsprechend sollte man sich als Webmaster Zielvorhaben festlegen, die auf Low-End-Geräten nicht unmöglich zu erreichen sind.

Vor diesem Hintergrund ist es wichtig, dass die Responsiveness für ein möglichst großes Feld an Endgeräten gegeben ist.

Google definiert die Spanne von INP-Werten wie folgt:

• • Gute Responsiveness: eine INP unterhalb von 200 Millisekunden („good responsiveness“)
• • Verbesserungswürdig: eine INP zwischen 201 und 500 Millisekunden („needs improvement“)
• • Schlechte Responsiveness: eine INP von mehr als 500 Millisekunden („poor responsiveness“)

Quelle: Google

Wieso schlechte Interaktionslatenzen differenziert betrachtet werden sollten

Für Websites, die relativ wenige Nutzerinteraktionen aufweisen, eignet sich die schlechteste Latenz aller Interaktionen gut. Dennoch ist zu bedenken, dass einige Website mehr Interaktivität erfordern. Ein Texteditor ist beispielsweise nicht mit einem klassischen Blog vergleichbar.

Wenn man sich bei Websites, die viele Interaktionen während einer User Session aufweisen, nur auf die schlechteste Interaktionslatenz fokussiert, könnte das irreführend sein. Google weist darauf hin, dass Websites mit hoher Interaktivität Aussetzer in der Responsiveness haben können. In solchen Fällen solle man über die ein oder andere schlechte Interaktionslatenz hinwegsehen.

Stattdessen solle man sich auf ein hohes Perzentil konzentrieren und dies als Beurteilungsgrundlage nutzen. Sofern die überwiegende Mehrheit der Interaktionen zeitnah beantwortet werden, bewegt sich die Website in einem guten Bereich.

Wie unterscheidet sich der INP vom First Input Delay?

Der Unterschied besteht darin, dass der INP alle Interaktionen auf einer Website berücksichtigt. Der First Input Delay (FID) berücksichtigt hingegen nur die erste Interaktion. Zudem wird beim FID nur die Eingabeverzögerung gemessen. Die Verabeitungszeit von Event-Handlern oder die Verzögerung der visuellen Darstellung des nächsten Frames wird beim FID nicht hinzugezogen.

Anders als beim FID wird beim INP demnach das gesamte Spektrum der Nutzerinteraktionen – vom ersten Laden der Website bis hin zum Verlassen der Website – abgedeckt und gemessen.

So optimierst Du den INP-Wert

Beim Laden der Website kann der INP ein Faktor sein. Das ist dann der Fall, wenn Nutzer mit der Website interagieren, während JavaScript ausgeführt wird und die Interaktivität mit der Website herzustellen.

Während des Ladevorgangs

Folgende Punkte können die Responsiveness im Hinblick auf den INP verbessern:

• • Ungenutzten Code entfernen
• • Code aufteilen, damit JavaScript, das zum Laden der Seiten nicht mehr benötigt wird, nach und nach geladen werden kann
• • Langsames JavaScript von Drittanbtieren identifizieren, um den Ladevorgang ggf. aufzuschieben
• • Browser-Rendering nicht zu sehr beanspruchen, nachdem das JavaScript bereits geladen ist, durch effizientes CCS-Styling und Komprimierung von Bilddateien

Nach dem Ladevorgang

• • Verwendung der postTask API, um Tasks zu priorisieren
• • Langsamen JavaScript-Code von Drittanbeiteren optmieren
• • Mit dem requestIdleCallback weniger relevante Arbeiten im Leerlauf des Browsers ausführen