Google: Interaction to Next Paint (INP) - Wechsel in den Core Web Vitals

Vor einigen Wochen kündigte Google eine bedeutende Änderung seiner Core Web Vitals an: die Einführung einer neuen Metrik, Interaction to Next Paint (INP), die ab März 2024 den bestehenden First Input Delay (FID) ersetzen wird. Diese Ankündigung wurde von vielen Webseitenbetreibern übersehen.

Am 11. Juli 2023 wurdest du mit einer E-Mail von Google überrascht: “Core Web Vitals-INP-Problem auf Ihrer Website erkannt“. In dieser Mitteilung wurde angekündigt, dass der INP ab dem kommenden Jahr (ab März 2024) an Bedeutung gewinnen wird und die betroffenen Websites derzeit schlechte Werte aufweisen. Interessanterweise wurde diese E-Mail auch an viele Betreiber versendet, deren Websites eigentlich gute Werte haben.

Core Web Vitals (CWV) sind eine Reihe von Metriken, die Google eingeführt hat, um die Qualität der Nutzererfahrung auf einer Website zu messen. Sie umfassen Aspekte wie die Ladezeit der Seite, die Interaktivität und die visuelle Stabilität beim Laden.

Die CWV haben direkte Auswirkungen auf die Suchmaschinenoptimierung (SEO) und Suchmaschinenwerbung (SEA). Websites, die gut auf den CWV abschneiden, werden von Google als benutzerfreundlicher eingestuft und können daher in den Suchergebnissen höher eingestuft werden. Dies kann zu mehr organischen Traffic und höheren Conversion-Raten führen. Bei SEA kann eine gute Performance in den CWV zu niedrigeren Kosten pro Klick und einer höheren Anzeigenposition führen.

Die aktuellen CWV Messwerte

Die Core Web Vitals umfassen derzeit drei Hauptmetriken, die verschiedene Aspekte der Nutzererfahrung messen:

• Largest Contentful Paint (LCP): Diese Metrik misst die Zeit, die benötigt wird, um den größten Inhaltselement auf der Seite zu laden. Ein guter LCP-Wert liegt unter 2,5 Sekunden.

• First Input Delay (FID): Diese Metrik misst die Zeit von der ersten Interaktion eines Nutzers mit einer Seite (zum Beispiel das Klicken auf einen Link oder das Tippen auf einen Button) bis zur Reaktion des Browsers auf diese Interaktion. Ein guter FID-Wert liegt unter 100 Millisekunden.

• Cumulative Layout Shift (CLS): Diese Metrik misst die visuelle Stabilität der Seite, also wie oft und wie stark sich Elemente auf der Seite während des Ladens verschieben. Ein guter CLS-Wert liegt unter 0,1.

Diese Metriken sind entscheidend für die Bewertung der Nutzererfahrung auf einer Webseite. Sie sind jedoch nicht statisch und Google plant, sie im Laufe der Zeit anzupassen und zu erweitern, um die sich ändernden Anforderungen und Erwartungen der Nutzer besser zu erfüllen. Ein Beispiel dafür ist die geplante Einführung der Interaction to Next Paint (INP) Metrik im März 2024, die den FID ersetzen wird.

Wo kann ich meine CWV (Core Web Vitals) Werte sehen?

Es gibt verschiedene Tools und Plattformen, auf denen Sie die Core Web Vitals Ihrer Website überprüfen können:

• Google Search Console: Die Google Search Console bietet einen speziellen Bericht zu den Core Web Vitals, der Informationen zu LCP, FID und CLS enthält. Sie können hier auch sehen, ob Ihre Website irgendwelche Probleme in Bezug auf diese Metriken hat.

• PageSpeed Insights: PageSpeed Insights ist ein Online-Tool von Google, das die Leistung einer Website sowohl auf Mobilgeräten als auch auf Desktops bewertet. Es bietet auch Informationen zu den Core Web Vitals.

• Lighthouse: Lighthouse ist ein Open-Source-Tool, das von Google bereitgestellt wird und das Sie in Chrome DevTools finden können. Es bietet eine detaillierte Analyse der Performance Ihrer Website, einschließlich der Core Web Vitals.

• Chrome User Experience Report (CrUX): CrUX ist eine öffentliche Datenbank von Google, die Nutzererfahrungsdaten für Millionen von Websites enthält. Sie können CrUX verwenden, um die Core Web Vitals Ihrer Website zu überprüfen und zu sehen, wie sie sich im Laufe der Zeit verändern.

• Web Vitals Extension: Diese Chrome-Erweiterung ermöglicht es Ihnen, die Core Web Vitals direkt in Ihrem Browser zu überprüfen, während Sie durch das Web navigieren.

Diese Tools können Ihnen helfen, die Performance Ihrer Website zu überwachen und Bereiche zu identifizieren, die Verbesserungen benötigen.

Im Gegensatz zum FID, der nur die erste Interaktion berücksichtigt, nimmt INP alle Interaktionen während eines Nutzerbesuchs auf einer Website in Betracht. Es zielt darauf ab, sicherzustellen, dass die Zeit von der Initiierung einer Interaktion durch einen Benutzer bis zum Anstrich des nächsten Frames so kurz wie möglich ist.

Die Bedeutung von INP

Die Reaktionsfähigkeit einer Website spielt eine entscheidende Rolle für das gesamte Seitenerlebnis. Nutzer sollten unmittelbar nach einer Interaktion, wie einem Klick, eine visuelle Antwort erhalten. INP ist darauf ausgelegt, diese Reaktionsfähigkeit genauer zu messen und ein besseres Verständnis für die Leistung und Benutzerfreundlichkeit einer Website zu liefern.

INP erfasst die Latenz aller Interaktionen während eines Besuchs auf einer Website. Bei Besuchen mit weniger als 50 Interaktionen insgesamt spiegelt INP die Interaktion mit der höchsten Latenz wider. Bei Websites mit vielen Interaktionen ist INP in der Regel das 98. Perzentil der Latenzen für Interaktionen. Dies macht INP zu einem zuverlässigeren Indikator für die Gesamtreaktionsfähigkeit einer Website im Vergleich zum FID.

Wie wird INP bewertet?

Google definiert den Bereich der INP-Werte wie folgt:

• Eine INP unter 200 Millisekunden gilt als gute Reaktionsfähigkeit.
• Eine INP zwischen 201 und 500 Millisekunden muss verbessert werden.
• Eine INP von mehr als 500 Millisekunden weist auf eine schlechte Reaktionsfähigkeit hin.

INP kann sowohl als Labordaten als auch als Felddaten erhalten werden. Labordaten werden von verschiedenen Tools wie dem Lighthouse npm-Modul, Lighthouse User Flows oder der Web Vitals-Erweiterung für Google Chrome bereitgestellt. Echte Nutzerdaten, sogenannte Felddaten, können über Google PageSpeed Insights oder den Chrome User Experience Report (CrUX) erhalten werden.

Ab März 2024 wird INP Teil der Core Web Vitals und ersetzt FID. Obwohl noch nicht feststeht, ob Google INP in die Gruppe der Core Web Vitals aufnehmen wird, kann es sich lohnen, den Wert genauer unter die Lupe zu nehmen. Dies kann Einblicke darüber liefern, wie gut eine Website auf Nutzerinteraktionen reagiert, was sich wiederum positiv auf die Zufriedenheit der Nutzer und damit auf die Konversionen und indirekt auf die Rankings auswirken kann.

Die Optimierung des INP-Werts kann in zwei Phasen unterteilt werden: während des Ladevorgangs der Webseite und nachdem die Webseite vollständig geladen ist.

Optimierung während des Ladevorgangs

Während des Ladevorgangs einer Webseite kann der INP-Wert beeinträchtigt werden, insbesondere wenn die Webseite noch JavaScript für die Event Handler lädt und der Nutzer bereits Interaktionen durchführt. Um den INP-Wert in dieser Phase zu verbessern, können folgende Maßnahmen ergriffen werden:

• Entfernung von unnötigem JavaScript-Code: Überflüssiger Code kann die Ladezeit verlängern und somit den INP-Wert negativ beeinflussen.
• Code-Splitting: Durch das Aufteilen des Codes in kleinere Einheiten kann die Ladezeit verkürzt und somit der INP-Wert verbessert werden.
• Entfernung von langsamem Drittanbieter-Code: Drittanbieter-Skripte, insbesondere für Tracking oder Werbung, können die Ladezeit verlängern und somit den INP-Wert beeinträchtigen. Eine effektive Lösung hierfür kann das Serverside Tracking sein, ein Service, den wir anbieten. Durch die Verlagerung des Trackings auf den Server wird die Last auf dem Client reduziert, was zu einer verbesserten Ladezeit und somit zu einem besseren INP-Wert führen kann.

Optimierung nach dem Ladevorgang

Auch nachdem die Webseite vollständig geladen ist, gibt es verschiedene Möglichkeiten zur Verbesserung des INP-Werts:

• Nutzung von Scheduling APIs: Mit diesen APIs können Aufgaben priorisiert werden, was die Reaktionszeit der Webseite verbessern kann.

Die Scheduling APIs bieten eine Reihe von Funktionen, die zur Optimierung des INP-Werts genutzt werden können. Hier sind einige davon:

• scheduler.postTask(): Diese Funktion ermöglicht es, Aufgaben zu planen und zu steuern. Sie wurde in Chromium M94 eingeführt und kann dazu beitragen, dass Aufgaben in einer Weise ausgeführt werden, die die Reaktionsfähigkeit der Webseite verbessert.

• scheduler.yield(): Diese Funktion ermöglicht es einer Aufgabe, die Ausführung zu unterbrechen und die Kontrolle an den Browser zurückzugeben, um andere Aufgaben auszuführen. Die ursprüngliche Aufgabe wird später vom Scheduler erneut geplant. Diese Funktion ist in Chromium M113 hinter einer Flagge verfügbar und kann dazu beitragen, die Reaktionsfähigkeit der Webseite zu verbessern, indem sie verhindert, dass lange Aufgaben den Hauptthread blockieren.

• scheduler.wait(): Diese Funktion ermöglicht es einer Aufgabe, die Ausführung zu unterbrechen und erst fortzusetzen, nachdem eine bestimmte Zeit vergangen ist oder ein bestimmtes Ereignis eingetreten ist. Diese Funktion wird derzeit gemeinsam mit scheduler.yield() entworfen und kann dazu beitragen, die Reaktionsfähigkeit der Webseite zu verbessern, indem sie verhindert, dass Aufgaben ausgeführt werden, wenn der Hauptthread stark ausgelastet ist.

• scheduler.currentTaskSignal: Diese Funktion ermöglicht es, das TaskSignal der aktuell ausgeführten Aufgabe zu erhalten. Dies kann dazu genutzt werden, abhängige Aufgaben zu planen. Diese Funktion wird derzeit im Kontext von scheduler.yield() neu bewertet.

• isInputPending(): Diese Funktion ermöglicht es zu ermitteln, ob die aktuelle Aufgabe die Verarbeitung von Eingabeereignissen blockiert. Sie wurde in Chrome M87 eingeführt und kann dazu beitragen, die Reaktionsfähigkeit der Webseite zu verbessern, indem sie verhindert, dass Aufgaben ausgeführt werden, die die Verarbeitung von Eingabeereignissen blockieren.

• Suche und Optimierung von langsamem Drittanbieter-JavaScript-Code: Langsam laufender Code von Drittanbietern kann auch nach dem Laden der Webseite die Responsiveness beeinträchtigen. Durch das Identifizieren und Optimieren oder Entfernen solcher Codes kann der INP-Wert verbessert werden.

Es ist wichtig zu beachten, dass die Optimierung des INP-Werts ein fortlaufender Prozess ist, der regelmäßige Überprüfungen und Anpassungen erfordert. Mit den richtigen Werkzeugen und Strategien können Sie jedoch die Reaktionsfähigkeit Ihrer Webseite verbessern und somit ein besseres Nutzererlebnis bieten.

Core Web Vitals-INP-Problem auf Ihrer Website erkannt? Nicht wenn Sie diesen Artikel ganz gelesen haben :) Die Einführung von INP ist ein wichtiger Schritt der CWV und sollte unbedingt berücksichtigt werden. Mit dem Übergang zu einem stärker nutzerzentrierten Web wird das Verständnis und die Optimierung von Metriken wie INP immer wichtiger. Bleiben Sie der Konkurrenz voraus, indem Sie sich mit INP vertraut machen und Ihre Website auf diese bevorstehende Änderung in Googles Core Web Vitals vorbereiten.

Wenn Sie Schwierigkeiten haben, die Performance Ihrer Website zu verbessern, oder wenn Sie einfach nicht wissen, wo Sie anfangen sollen, sind wir hier, um zu helfen. Unsere Experten können eine gründliche Analyse und Bewertung Ihrer Website durchführen, um die aktuellen Probleme zu identifizieren, die Ihre Core Web Vitals beeinträchtigen könnten.

Wir bieten nicht nur eine detaillierte Analyse, sondern auch maßgeschneiderte Lösungen zur Optimierung Ihrer Website. Ob es sich um das Entfernen von unnötigem JavaScript-Code, das Implementieren von Serverside Tracking oder das Optimieren der Ladezeiten handelt, wir haben die Fähigkeiten und das Know-how, um Ihre Website zu optimieren und Ihre Core Web Vitals zu verbessern.

Unser Ziel ist es, Ihnen dabei zu helfen, eine schnellere, reaktionsfähigere und insgesamt benutzerfreundlichere Website zu erstellen, die sowohl Ihre Nutzer als auch Google lieben werden. Kontaktieren Sie uns noch heute, um zu erfahren, wie wir Ihnen helfen können, Ihre Website zu optimieren und Ihre Core Web Vitals zu verbessern.

Für weitere Informationen zu INP und anderen Core Web Vitals empfehlen wir die folgenden Ressourcen:

• Google’s Web Vitals Guide
• Google’s INP Announcement
• Lighthouse User Flows
• Google PageSpeed Insights
• Chrome User Experience Report (CrUX)