Neue Metrik "INP" bei den Core Web Vitals

FID und INP in den Core Web Vitals

Die "Core Web Vitals" von Google sind eine Reihe von Metriken, die die Benutzererfahrung einer Webseite in Bezug auf Geschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität bewerten. Diese Metriken wurden von Google entwickelt, um Entwicklern und Website-Betreibern zu helfen, die Nutzererfahrung ihrer Webseiten zu verbessern.

Die Core Web Vitals beziehen sich auf drei wichtige Metriken:

1. Largest Contentful Paint (LCP): LCP misst, wie lange es dauert, bis das größte sichtbare Element einer Webseite geladen wird. Ein schneller LCP-Wert bedeutet, dass die Webseite schnell geladen wird und die Benutzer schnell auf den Inhalt zugreifen können.

2. First Input Delay (FID): FID misst die Reaktionsfähigkeit einer Webseite auf Benutzereingaben wie Klicks oder Berührungen. Ein niedriger FID-Wert bedeutet, dass die Webseite schnell auf Benutzereingaben reagiert und eine reibungslose Benutzererfahrung bietet.

3. Cumulative Layout Shift (CLS): CLS misst, wie stabil die visuelle Darstellung einer Webseite ist, indem es unerwartete Layout-Verschiebungen während des Ladens der Webseite erfasst. Ein niedriger CLS-Wert bedeutet, dass die Webseite visuell stabil ist und eine bessere Nutzererfahrung bietet.

Google hatte im  Juni 2021 die Core Web Vitals als Ranking-Faktoren in den Suchalgorithmus aufgenommen . Daher ist es für Website-Betreiber und Entwickler wichtig, diese Metriken zu überwachen und sicherzustellen, dass ihre Webseiten eine gute Nutzererfahrung bieten, um ihr Ranking in den Suchergebnissen zu verbessern.

Im Mai 2023 hat Google nun angekündigt, dass der FID ab März 2024 durch eine neue Metrik abgelöst werden wird. Dies ist "Interaction to next Paint" (INP).

"First Input Delay" (FID) und "Interaction to Next Paint" (INP) sind beide Metriken, die die Reaktionsfähigkeit einer Webseite auf Benutzereingaben bewerten. Allerdings messen sie unterschiedliche Aspekte der Benutzererfahrung und werden auf unterschiedliche Weise berechnet.

Wie unterscheiden sich FID und INP?

Die Metrik "First Input Delay" (FID) misst, wie lange der Browser benötigt, um mit der Verarbeitung der ersten Benutzerinteraktion auf einer Seite zu beginnen. Insbesondere misst sie den Unterschied zwischen dem Zeitpunkt, an dem der Benutzer mit dem Gerät interagiert, und dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist, Event Handler zu starten.

Events oder Ereignisse treten  in einer Software auf, wenn ein Nutzer z.B den Mauszeiger bewegt, auf einen Button klickt, oder etwas in ein Textfeld eingibt. Event Handler haben die Aufgabe, diese Events zu erkennen und daraufhin eine vorher festgelegt Aktion auszuführen, z. B. ein Button wechselt die Farbe, wenn der Nutzer ihn anklickt.

FID beinhaltet weder die Zeit, die für das Ausführen dieser Event Handler benötigt wird, noch die Arbeit, die der Browser anschließend für die Aktualisierung des Bildschirms durchführt. Es misst die Dauer, in der der Hauptthread beschäftigt war, bevor er die Möglichkeit hatte, eine Eingabe zu verarbeiten. Diese Blockierungszeit wird in der Regel durch lange JavaScript-Aufgaben verursacht, da diese nicht einfach jederzeit unterbrochen werden können. Daher muss die aktuelle Aufgabe abgeschlossen werden, bevor der Browser mit der Verarbeitung der Eingabe beginnen kann.

Im Gegensatz zu FID misst die INP die Latenz der gesamten Interaktionen auf einer Website. Dafür werden alle Reaktionsgeschwindigkeiten des Browsers während der gesamten Besuchszeit berücksichtigt. Sobald der Besucher die Website verlassen hat, werden alle Interaktionen ausgewertet und der INP-Wert ermittelt. Google verwendet dann  die längste Reaktionszeit aller Besucherinteraktionen, um den INP-Wert zu bestimmen.  Das bedeutet, dass Ihre Webseite bei der INP auch schlecht abschneiden kann, wenn sie zwar vielen schnellen Interaktionen hat, es bei einigen anderen Interaktionen aber zu langen Verzögerungen kommt. 

INP beinhaltet neben dem Input Delay auch die Verarbeitungszeit von Event-Handlern und die Zeit, um die Interaktion visuell darzustellen. INP wurde also entwickelt, um die gesamte Verzögerung der Interaktion auf einer Seite darzustellen. Die Messung des INP gibt an, wie lange ein Nutzer warten muss, um mit der gesamten Seite zu interagieren. Das ist ein direkter Gegensatz zu FID (First Input Delay).

Wie wird INP gemessen?

INP berücksichtigt die folgenden Interaktionen:

• Jeder Mausklick auf ein interaktives Element
• Jedes Antippen eines interaktiven Elements auf einem beliebigen Gerät mit Touchscreen
• Das Drücken einer Taste auf einer physischen Tastatur oder einer Bildschirmtastatur

INP berücksichtigt nicht:

• Hovering
• Scrolling

Achtung: Interaktionen können im Hauptdokument oder in in das Dokument eingebetteten iframes stattfinden, beispielsweise durch Klicken auf "Wiedergabe" bei einem eingebetteten Video. Endbenutzer sind sich in der Regel nicht bewusst, ob etwas in einem iframe eingebettet ist oder nicht. Daher sind INP-Messungen innerhalb von iframes erforderlich, um die Benutzererfahrung für die gesamte Seite zu bewerten.

Was sind gute/schlechte Werte?

Wie kann ich den INP meiner Webseite messen?

Hierzu ist ein kleiner Exkurs  hilfreich, der uns noch einmal den Unterschied zwischen Feld- und Labordaten ins Gedächtnis ruft.

Exkurs: Felddaten und Labordaten

• Labordaten beschreiben die Nutzererfahrung eines hypothetischen Nutzers. Hierfür werden z.B. Daten in einer kontrollierten Umgebung mit festgelegten Geräte- und Netzwerkeinstellungen gesammelt (z.B. Lighthouse im Chrome).  Der Nutzen liegt hier darin, dass man so viele Faktoren wie möglich kontrollieren kann, so dass bei einer bestimmten Änderung auf der Webseite Auswirkungen direkt und unter den gleichen Bedinungen getestet werden können.
• Felddaten beschreiben die tatsächliche Nutzererfahrung der Besucher einer Webseite.  Sie werden auch als Real User Monitoring (RUM) bezeichnet. Da die Daten auf den Visits realer Nutzer beruhen, spiegeln sie auch die verschiedenen genutzen Geräte, Netzwerkbedinungen etc. der User wieder. Das bedeutet auch, für den einen Nutzer kann die Seite z.B. sehr schnell aufbauen, für den anderen hingegen sehr langsam.  Daher ist der bei den Felddaten angegebene Wert eigentlich eine Reihe von Werten von denen ein bestimmter Prozentsatz herangezogen wird.

Felddaten einfach sammeln mit dem Chrome UX Report

Über Googles "Page Speed Insight" können Sie die INP Ihrer Webseite evaluieren und ihre CrUX einsehen. Dies ist einfach online möglich, indem man die URL der zu testenden Seite eingibt. Allerdings beziehen sich diese Werte nur auf Chrome-Nutzer.

Will man alle Browser und Nutzer seiner Seite mit einbeziehen und/oder ggfs. eine noch nicht öffentliche Webseite testen, kann man hierfür selbst ein Real User Monitoring aufsetzen. (Für weiterführende Infos zu den Field Tools siehe auch https://web.dev/inp/#field-tools)

Laborwerte sammeln 

 Nicht für jede Seite stehen einem jedoch immer Livedaten zur Verfügung. Chrome bietet mit Web Vitals eine praktische Extension  mit deren Hilfe man auch den INP einer Seite simulieren kann.  Nach der Installation erscheint im der Toolbar des Browser ein Symbol. Bei Klick hierauf erhält man eine einfache Übersicht über die Core Web Vital Metriken der Seite, auf der man sich gerade befindet. Durch Interagieren mit der Seite kann man so den INP-Wert (für die eigenen Interaktionen) dieser Seite simulieren.

In Kombination hierzu  ist auch die Total Blocking Time aus dem Lighthouse Report ein guter Indikator. Die TBT ist ein Labormesswert und weist eine hohe Korrelation zur INP aus. Schon zuvor wurde von Google empfohlen, die TBT als Ersatzkennzahl zu verwenden, wenn keine Daten zum FID vorliegen.

Den INP optimieren

Google selbst bietet unter https://web.dev/how-to-optimize-inp/ einen umfassenden Leitfaden zur Diagnose von Problemen und der Optimierung der INP.

Grundsätzlich gilt hierfür Ähnliches, wie bereits für die Optimierung des First Input Delay:

• Entfernen von nicht benötigtem JavaScript
• Entfernen / Optimieren von Drittanbieter-Code (Tracking, Consent, Werbung)
• Die Rechenlast für den Main-Thread durch weniger komplexe Layouts und Verzicht auf Spezialeffekte reduzieren.