Die Interaktion zum nächsten Bild ersetzt die erste Eingabeverzögerung

Ab dem 12. März 2024 gibt es eine Änderung in der Core Web Vitals Metrik, nämlich die Interaction to Next Paint ersetzt die First Input Delay. Google nimmt diese Änderung vor, um die Messbarkeit von Statistiken über die Reaktionsfähigkeit einer Website zu verbessern.

Wir haben diese Änderung bereits vor sechs Monaten in unserer Kurzmeldung angekündigt, aber jetzt ist sie tatsächlich eingeführt worden.

Hintergrundinformationen zu den Core Web Vitals

Die Einführung der Core Web Vitals fand Anfang 2020 statt. Für ein gutes Nutzererlebnis legte Google Wert auf eine Reihe von Metriken, die das Nutzererlebnis in Echtzeit für Ladeleistung, Interaktivität und visuelle Stabilität einer Seite messen.

Die Core Web Vitals bestanden aus den folgenden Komponenten:

• Größtes inhaltsreiches Bild (LCP)
• Erste Eingabeverzögerung (FID)
• Die kumulative Layout-Verschiebung (CLS)

Nun wird die FID offiziell durch die Komponente Interaction to Next Paint (INP) ersetzt.

Warum wird die FID abgeschafft?

First Input Delay misst nur die Verzögerung zwischen der ersten Interaktion eines Ereignisses und dem Beginn des Ereignisses. Da ein Website-Besuch in der Regel (und hoffentlich) nicht aus einem Klick, sondern aus mehreren Klicks besteht, hat Google die Richtlinien hierfür geändert, um eine bessere Metrik für die Gesamtnutzererfahrung einer Website innerhalb der allgemeinen Core Web Vitals bereitzustellen.

Untersuchungen (Chrome-Nutzungsdaten) haben gezeigt, dass 90 % der Zeit eines Besuchers auf einer Webseite verbracht werden, nachdem sie geladen wurde. Daher ist es wichtig, die Reaktionsfähigkeit während des gesamten Lebenszyklus einer Seite sorgfältig zu messen. Aus diesem Grund schenkt Google diesem Aspekt von nun an mehr Aufmerksamkeit.

Was bedeutet INP (Interaction to Next Paint)?

INP steht für Interaction to Next Paint (Interaktion bis zum nächsten Bild): Diese Statistik erfasst die Reaktionszeit aller Klick-, Berührungs- und Tastaturinteraktionen des Nutzers während des Besuchs der Webseite eines Nutzers. Der endgültige INP-Wert ist die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden.

• Der Zeitraum (Zeit) zwischen den Schritten eins und drei ist die Verzögerung eines Ereignisses, dies ist die FID (First Input Delay) in Core Web Vitals.
• Der Zeitraum zwischen Schritt eins und fünf ist die Dauer des gesamten Ereignisses, die den INP-Wert darstellt.

Nicht unwichtig ist, dass die INP-Scores zu dem Zeitpunkt berechnet werden, zu dem der Besucher die Seite verlässt. Daraus ergibt sich die Gesamtbewertung der Reaktionsfähigkeit der Seite. Ein niedriger INP-Wert bedeutet, dass die Seite gut auf Benutzereingaben reagiert.

Der INP bewertet die Reaktionsfähigkeit anhand von Daten aus der Event Timing API. Die Event Timing API zeigt Zeitinformationen für bestimmte Ereignisse an. Unter Berücksichtigung bestimmter Ereignistypen werden Zeitinformationen angezeigt, wenn die Zeitdifferenz zwischen Benutzereingabe und Zeichenoperationen, die auf die Eingabeverarbeitung folgen, einen bestimmten Schwellenwert überschreitet.

(c) via https://nitropack.io/

Was ist eine Interaktion?

Unten sehen Sie eine Visualisierung einer Interaktion, eine Eingabeverzögerung gilt vom “Trigger” bis zur Ausführung der Event-Handler. Diese werden ausgeführt. Dann erfolgt eine weitere Verzögerung (Rendern und Malen), bevor das nächste Bild (Frame) angezeigt wird.

Visualisierung einer Interaktion durch z.B. einen Mausklick, der komplette Pfad vom Klick bis zur Bilddarstellung bestimmt den INP-Score. Quelle: https://web.dev/articles/inp

Gut zu wissen: Für INP-Zwecke werden nur die folgenden Interaktionstypen berücksichtigt:

• Klicken mit einer Maus.
• Tippen auf einem Touchscreen-Gerät.
• Das Drücken einer Taste auf einer physischen Tastatur oder einer Bildschirmtastatur.

Der Hauptantrieb für die Interaktivität ist oft Javascript. Browser bieten auch standardmäßig Interaktivität, z. B. Kontrollkästchen, Optionsschaltflächen und CSS-gesteuerte Steuerelemente. Letztere verursachen fast nie INP-Probleme.

Was ist ein guter INP-Wert?

Um sicherzustellen, dass Sie den Nutzern eine gute Reaktionsfähigkeit bieten, ist ein guter Schwellenwert von 75 % der Anzahl der im Feld registrierten Seitenaufrufe, aufgeteilt nach Mobilgeräten und Desktop-Geräten, zu messen:

• Ein INP von 200 Millisekunden oder weniger bedeutet, dass Ihre Seite eine gute Reaktionszeit hat.
• Ein INP zwischen 200 Millisekunden und 500 Millisekunden bedeutet, dass die Reaktionsfähigkeit Ihrer Seite verbessert werden muss.
• Ein INP von mehr als 500 Millisekunden bedeutet, dass Ihre Seite eine schlechte Reaktionszeit hat.

Wie misst man den INP?

Der INP-Wert kann auf zwei Arten gemessen werden: in der Praxis und mit einem Tool. Der Ausgangspunkt ist natürlich, wie echte Nutzer den INP wahrnehmen. Daher werden wir diesen Punkt zuerst erklären.

Bevor Sie mit der Optimierung des INP beginnen, sollten die Testdaten idealerweise mit einem Tool analysiert worden sein. Im besten Fall erhalten Sie RUM-Daten (Real User Monitoring), aber auch die spezifische Interaktion, die für den INP-Score verantwortlich ist. Dies sind wertvolle Informationen, damit Sie wissen, wo Sie mit der Optimierung durch das Tooling beginnen müssen.

Ein nützliches Tool für erste Hinweise ist der Chrome User Experience Report (auch bekannt als Chrome UX Report oder kurz CrUX). CrUX ist ein Datensatz, der darstellt, wie echte Chrome-Nutzer beliebte Ziele im Internet erleben. CrUX ist der offizielle Datensatz des Web Vitals-Programms. Es werden alle nutzerzentrierten Core Web Vitals-Statistiken dargestellt.

Quelle: https://pagespeed.web.dev/

Analyse des INP-Scores mit Hilfe von Werkzeugen

Wenn das obige Tool gezeigt hat, dass Sie keine gute INP-Bewertung haben, müssen Sie analysieren, welche Maßnahmen dies verursachen. Ein praktisches Tool, um dies herauszufinden, ist die Google Dev Tools-Erweiterung.

Screenshot der Core Web Vitals-Erweiterung für Google Chrome

Auf dieser Grundlage können Sie sehen, wie die Gesamtbewertung lautet. Wenn dies nicht ausreicht, können Sie es mit derLeuchtturm Zeitspannen. Dabei handelt es sich um den Leistungsprofiler von Chrome, mit dem Sie das Verhalten aufschlussreich und messbar machen können.

Sie können ihn wie folgt verwenden.

1. Öffnen Sie DevTools in Ihrem Google Chrome-Browser und klicken Sie auf die Registerkarte “Lighthouse”.
2. Wählen Sie unter dem Abschnitt “Modus” die Option “Zeitspanne”.
3. Wählen Sie im Abschnitt “Gerät” aus, auf welchem Gerät Sie testen möchten: Desktop oder Mobile.
4. Vergewissern Sie sich unter “Kategorien”, dass das Kontrollkästchen unter “Leistung” aktiviert ist.
5. Klicken Sie auf “Zeitspanne starten”.
6. Testen Sie nun die Interaktionen auf der entsprechenden Seite, für die Sie Testdaten sammeln möchten.
7. Klicken Sie dann auf “Zeitspanne beenden” und warten Sie, bis die Prüfung angezeigt wird.
8. Sobald das Audit auf der Registerkarte “Lighthouse” abgeschlossen ist, können Sie die Audits nach INP filtern, wodurch die Ursache des INP sowie nützliche Tipps zu dessen (möglicher) Behebung aufgedeckt werden.

Screenshot eines Beispielergebnisses der durchgeführten INP-Zeitspanne.

Es gibt auch Alternativen, um noch tiefer in die Materie einzusteigen, aber die lasse ich jetzt mal beiseite.

Tipps zur Verbesserung Ihres INP

Wenn Ihre Website mit INP-Problemen zu kämpfen hat, haben wir bereits einige Tipps ausgearbeitet, die für Sie nützlich sein könnten. Natürlich steht der gesunde Menschenverstand immer an erster Stelle, eine Website sollte gut funktionieren und dem Benutzer ein gutes Erlebnis bieten.

Versuchen Sie also nicht, die grüne Kugel um jeden Preis zu erreichen, wenn dies auf Kosten der ultimativen Benutzerfreundlichkeit geht.

1. Beschränken Sie die Verwendung von externen Skripten (von Dritten)

Sie wirken sich nicht nur auf den INP, sondern auch auf die gesamte Ladezeit aus. Vor allem, wenn Skripte von externen Websites die Hauptaufgabe des Browsers beeinträchtigen.

• Analysieren Sie kritisch, welche Skripte geladen werden und ob sie notwendig sind.
• Tools zum Heatmapping (Hotjar), sind sehr schwer. Verwenden Sie sie nur vorübergehend, z. B. in den ersten Tagen, wenn eine neue Funktion hinzugefügt wird.

2. DOM-Größe begrenzen

Vermarkter wollen oft viele Informationen auf einer Seite anzeigen, aber bedenken Sie, dass die Größe des DOM-Dokuments auch die Ladezeit (Rechenleistung) des Browsers beeinflusst. Eine zu große DOM-Größe bedeutet, dass Sie zu viele DOM-Knoten (HTML-Tags) auf Ihrer Seite verwendet haben oder dass diese HTML-Tags zu tief “verschachtelt” sind.

Während des Ladens der Seite benötigt ein Browser oft mehr Rechenleistung, um die Seite zu ‘rendern’, was dazu führt, dass die Seite später auf dem Bildschirm angezeigt wird. JavaScript und CSS werden oft langsamer ausgeführt, weil der Browser mehr “Knoten” betrachten muss.

3. Begrenzen Sie die Verwendung von JavaScript

Wie bereits erwähnt, erfordert Javascript mehr Rechenleistung von Ihrem Gerät, um Elemente anzuzeigen. Berücksichtigen Sie dies bei der Entwicklung einer Website. Einige Javascripts sind notwendig und funktionell, so dass Sie nicht auf sie verzichten sollten, aber statt Javascript zu verwenden, kann eine Animation sehr gut über die CSS-Eigenschaft “transform” angezeigt werden.

Die Interaktion zum nächsten Bild

Zunächst einmal hoffe ich, dass mein Artikel Ihnen Klarheit über den INP verschafft hat und wie er das Nutzererlebnis des Besuchers auf Ihrer Website beeinflussen kann. Jenseits aller Tools und Bewertungen ist es immer noch am wichtigsten, was Ihr Publikum wirklich erlebt.

Dies kann durch RUM (Real User Monitoring) ermittelt werden. Obwohl die Core Web Vitals von Google einen guten Hinweis darauf geben, was der Besucher erlebt, muss dies nicht die Wahrheit sein. Starren Sie also nicht blind darauf. Haben Sie Fragen zu meinem Artikel oder sind Sie neugierig auf eine technische Analyse Ihrer Website? Nehmen Sie Kontakt mit uns auf und erkundigen Sie sich nach den Möglichkeiten.