INP als Core Web Vital Messwert
Die Core Web Vitals Kennzahl INP (Interaction to Next Paint) war bis vor kurzem (bis zum 10. Mai 2023) noch ein experimenteller Messwert, welcher aber bereits in der Google PageSpeed Insights Prüfung angezeigt wurde. Die neue KPI hat am 12. März 2024 offiziell die Kennzahl FID (First Input Delay) als Teil der Core Web Vitals ersetzt. Bis dahin wurde sie als ausstehende Metrik behandelt. Das bedeutet, dass sie bereits geprüft wurde und fertig ist, um FID zu ersetzen, aber vor dem 12. März 2024 noch nicht im Score gewertet wurde.
Was wird mit Interaction to Next Paint gemessen?
Durch die Kennzahl Interaction to Next Paint wird die Reaktionsfähigkeit der Seite bei allen Benutzerinteraktionen mit dieser gemessen. Eine niedrige Latenz bei der Verwendung einer Website ist für ein gutes Nutzererlebnis wünschenswert. Alle Reaktionszeiten werden in der Kennzahl INP zusammengefasst. Der INP-Wert für eine Seite ist die jeweils längste gemessene Interaktion.
Beispiele für Nutzerinteraktionen
Das Ergebnis der Interaktion mit der Seite ist immer ein visuelles Feedback. Die folgenden Beispiele verdeutlichen, wodurch der INP-Wert beeinflusst wird:
- In Online Shops zeigt häufig eine kleine Zahl am Warenkorb an, ob der Artikel wirklich hinzugefügt wurde.
- Ein weiteres Beispiel ist der Klick auf das häufig verwendete sogenannte Burger-Menü (3 Balken übereinander) als Mobile-Navigation. Wenn es verschachtelte Sub-Menüs gibt, dann sollte man auch diese testen.
- Auch das Öffnen und Schließen einer Akkordeon-Navigation (Aufklapp-Mechanismus) wird durch eine Nutzeraktion herbeigeführt. Hier gibt es häufig Verzögerungen was die Darstellung des Inhalts anbelangt. Häufig werden diese für FAQ-Bereiche eingesetzt.
- Der Klick auf Sprungmarken wird als Nutzerinteraktion mit der jeweiligen Seite gewertet.
- Die Verwendung der internen Website-Suche durch den Nutzer kann zum einen beim Öffnen und Schließen dieser, aber auch bei der Eingabe von Zeichen in das Suchfeld für eine Latenz sorgen. Viele Suchen verfügen außerdem über eine Funktion zur Autovervollständigung oder direkten Anzeigen von möglichen Ergebnissen während der Eingabe durch einen Nutzer. Das ist natürlich äußert hilfreich für den Nutzer, aber ärgerlich, wenn die Suchergebnisvorschau nur sehr langsam funktioniert.
- Slider-Elemente verfügen meist über Navigationspfeile und teilweise auch über Bullets/Punkte unterhalb der Slider-Elemente. Nicht immer reagiert der Slider sofort, wenn der Nutzer das nächste Element angezeigt bekommen möchte.
Was kann für einen schlechten INP-Wert sorgen?
Beispielsweise langsame Reaktion der Website auf Klicks durch Benutzer auf bestimmte Elemente der Seite oder ein Kontaktformular, was beispielsweise durch die Echtzeit-Datenvalidierung der Nutzereingabe dafür sorgt, dass dieses nur langsam auf Klicks oder Tastatureingaben reagiert. Für den Nutzer erweckt das den Eindruck, dass die Seite nicht reagiert, was wiederum zu einer schlechten Nutzererfahrung führt.
Das vorrangige Ziel ist klar definiert: Die Zufriedenheit der Besucher auf der Website zu gewährleisten. Zufriedenere Nutzer bedeuten höhere Conversionrates, einen Wettbewerbsvorteil und eine insgesamt verbesserte Benutzererfahrung, was sich positiv auf das Google-Ranking auswirken kann.
Warum sehe ich die Kennzahl nicht in meiner Google PageSpeed Insights Messung?
Der Messwert kann nur über die Zugriffe echter Nutzer innerhalb der letzten 28 Tage erhoben werden. Deswegen wird die neue KPI nur dann angezeigt, wenn für die URL bereits ausreichend Felddaten (Nutzerdaten als Verlaufsbericht) zur Verfügung stehen. Wichtig ist, darauf zu achten, ob die Daten für die jeweilige URL oder nur für den Origin angezeigt werden.
Weitere Ursachen können sein:
- Keine Nutzerinteraktionen vorhanden
- Interaktion mit der Seite mittels Gesten (Gesten-Steuerung)
- lediglich Bot-Zugriffe (bspw. Crawler), die mit der Seite nicht in Aktion treten
Innerhalb der Labor-Daten des Google PageSpeed Insights Berichts (jeweils aktuelle Messung/Abfrage) wird die KPI nicht angezeigt. Der beste Weg für die Messung sind echte Benutzerdaten (RUM-Tool oder CrUX-Report).
INP in der Google Search Console
In der Google Search Console kann man sowohl für Desktop-Geräte als auch für Mobil-Geräte sehen, ob es Probleme hinsichtlich der Core Web Vital Werte mit einzelnen URLs gibt. Zum Core Web Vitals Bericht gelangt man über den Punkt „Nutzerfreundlichkeit“.
Wie unterscheidet sich INP von FID (First Input Delay)?
INP miss alle Seiten-Interaktionen während des gesamten Besuchs des Nutzers und FID berücksichtigt lediglich die erste Interaktion mit der Seite und auch nur die Eingabeverzögerung, nicht die Ausführungszeit und Ergebnisdarstellung des nächsten Frames. FID misst sozusagen nur den ersten Eindruck, den der Nutzer bei der Verwendung der Seite hat, während INP die allgemeine Reaktionsfähigkeit auf Nutzeraktionen misst.
Wie wird INP gemessen?
Zur Datenerhebung wird die Event Timing API verwendet. Mit Hilfe der Schnittstelle wird sowohl vor als auch nach dem Laden der Seite die Latenz gemessen. Diese ist Bestandteil des Google Chrome Browsers. Die Nutzer des Browsers sorgen somit für die notwendigen Daten.
Start der Messung erfolgt immer mit Beginn der Aktion durch den Nutzer. Die Messung wird beendet, sobald das erste visuelle Feedback auf der Seite sichtbar ist.
Diese Aktionen werden konkret gemessen:
- Mouse-Klicks
- Tipp-Eingaben über Touchscreens
- Tastatur-Eingaben (physische Tastatur und Bildschirm)
- Hovern
- Scrollen
Wichtig ist hier, dass nicht nur der INP-Wert selbst, sondern auch die Kontextdaten (inklusive der Eingabemethode) zu den Nutzer-Interaktionen angezeigt werden, um eine Aussage über die verursachenden Elemente treffen zu können.
Was ist ein guter INP Wert?
- Ein niedriger INP < 200 ms ist das Ziel und wird somit als gute Latenz gewertet. Um sicherzustellen, dass dieses Ziel für die meisten Nutzer erreicht wird, ist ein guter Schwellwert zum Messen das 75. Perzentil der Seiten-Ladezeiten , segmentiert nach Mobil- und Desktop-Geräten.
- Ein INP über 200 ms, aber weniger als 500 ms bedeutet, dass die Reaktionsfähigkeit der Seite verbessert werden muss.
- Ein INP-Wert über 500 ms sagt aus, dass die Seite schlecht auf Benutzerinteraktionen reagiert.
Welche Optimierungsmaßnahmen gibt es für Interaction to Next Paint?
Ganz grundsätzlich ist es sehr wichtig, dass der Nutzer immer sehr schnell ein visuelles Feedback erhält, dass seine Aktion mit der Seite zu einem bestimmten Ergebnis geführt hat oder dass durch sein Handeln gerade etwas passiert.
Wenn in der Google Search Console oder im PageSpeed Insights Report der Felddaten vorliegen, die auf einen hohen INP-Wert hindeuten, wird eine Optimierung erforderlich.
- Ein optimierter HTML-DOM mit möglichst wenig Elementen und Verschachtelungen sorgt für ein schnelles Rendering der Seite und beeinflusst damit den INP positiv. Das Refactoring des HTML-Codes ist natürlich mit etwas Aufwand verbunden, daher kann eine schnelle Lösung sein, zunächst die Menge an Modulen auf der Website generell zu reduzieren (zum Beispiel Produkte auf der Produkt-Listenseite oder Slider-Elemente). Insbesondere die tief verschachtelten Module mit vielen HTML-Elementen sind hier ein Ansatzpunkt sind hier zu optimieren oder zu reduzieren.
- Code-Splitting kann für einen guten INP-Wert sehr nützlich sein, denn damit reduziert man die Datenmenge an JS-Code. Hier macht das Splitting nach Seitentyp/Template sinn.
- Die Entfernung von ungenutztem JS- und CSS-Code sollte in Betracht gezogen werden.
- Identifikation und Optimierung von langsamen JS. Hier sollte man sich insbesondere (aber nicht nur) das 3rd Party JavaScript anschauen.
- Verwendung von WebP-Grafiken.
- Reduzieren oder Entfernung von CSS-Animationen.
Bei Websites mit vielen interaktiven Elementen ist die Verbesserung des INP ein längerer Prozess. Es kann mitunter schwierig sein, herauszufinden, welche Interaktion zu einem schlechten Nutzererlebnis führt.
Beispiel zur Optimierung einer Akkordeon-Navigation:
- Verlinkung des gesamten Elements, sodass der Nutzer nicht ganz genau das Plus-Zeichen zum Aufklappen oder die Überschrift treffen muss, um den Inhalt des Akkordeon sichtbar zu machen.
- Schnelles Aufklappen, anstelle von langsamen Sliden.
Wie setzt sich die Latenzzeit im INP genau zusammen?
Jede einzelne Nutzerinteraktion auf einer Webseite wird in 3 unterschiedliche Phasen unterteilt, die dann zusammengesetzt insgesamt die Gesamtlatenz einer Aktion bildet.
- Eingabeverzögerung: Beginn mit der Aktion durch den Nutzer, endet mit der nächsten Phase
- Verarbeitungszeit: Die Ausführungszeit für die Aktion bis zur Fertigstellung
- Darstellungsverzögerung: Die Verzögerung bis das visuelle Ergebnis für den Nutzer dargestellt ist
Wie lokalisiere ich konkret die INP-Probleme auf der Seite?
Mit Hilfe der Web Vitals Extension im Google Chrome Browser kann man jede einzelne Nutzeraktion auf der Seite sehr gut messen.
Dazu muss man in dem Chrome Browser-Plugin die Einstellung „Console logging“ aktivieren und kann dann während man auf der jeweiligen Seite die Aktionen durchführt in der Developer-Konsole des Firebug-Tools das Browser-Feedback sehen:
Hier werden dann auch die 3 Phasen der Latenzzeit sichtbar, sodass man auch genau weiß, wo man bei der Optimierung ansetzen muss:
Es empfiehlt sich zudem für das Testing im Browser ein mobiles Endgerät (Smartphone) und eine Datendrosselung einzustellen, dann sieht man die Probleme besser, die nur für mobile Endgeräte auftreten.
Long Animation Frames (LoAF) API
Um einen schlechten INP-Score zu verbessern kann man die neue Google Chrome LoAF API nutzen.
Die API ermöglicht es, dass Entwickler schnell, einfach und sehr präzise Informationen darüber erhalten, welche Dateien die Ursache für das schlechte Nutzererlebnis sind. Somit lässt sich herausfinden, ob eigene oder externe Dateien optimiert werden müssen und ob es sich um JavaScript-Dateien handelt oder um andere Ressourcen.
Mit Hilfe der LoAF-API lässt sich das Nutzererlebnis durch neue Informationen somit hervorragend verbessern.
Was ändert sich, wenn man die Google Page Speed Insights API nutzt?
Gebraucht man die Google Page Speed Insights API, so erhält man den identischen Messwert nun zusätzlich mit einer anderen Bezeichnung. INTERACTION_TO_NEXT_PAINT statt EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT. Das Attribut EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT wird am 08. August 2023 dann aus der Antwort für API-Abfragen entfernt.
