Core Web Vitals und SEO

"Core Web Vitals"

Was sind Core Web Vitals?

Core Web Vitals sind bestimmte Messwerte, die die Benutzererfahrung auf einer Website quantifizieren. Die drei Hauptmessgrößen sind:

• Largest Contentful Paint (LCP): Die Zeit, die vergeht, bis der größte sichtbare Inhalt auf einer Seite geladen ist.
• First Input Delay (FID): Die Zeit zwischen dem ersten Interaktionsversuch eines Users (z. B. Klick auf einen Link) und der tatsächlichen Reaktion der Website.
• Cumulative Layout Shift (CLS): Das Maß für unerwartete Layoutverschiebungen während des Seitenladens.

Warum sind Core Web Vitals wichtig?

Web Vitals spielen eine entscheidende Rolle bei der Bestimmung der gesamten Benutzererfahrung auf einer Website, und ihre Bedeutung wird durch verschiedene Fakten und Studien unterstützt. Laut Forschungen von Google steigt die Wahrscheinlichkeit eines Absprungs um 32%, wenn die Ladezeit einer Seite von 1 Sekunde auf 3 Sekunden ansteigt. Jenseits von 3 Sekunden nimmt die Absprungrate weiterhin rapide zu. (Quelle: "The Need for Mobile Speed" von Google)

Andererseits tragen schneller ladende Seiten zu einer gesteigerten Benutzerbindung und verbesserten Konversionsraten bei. Amazon berichtete von einem Anstieg des Umsatzes von 1% für jede Verbesserung von 100 Millisekunden bei der Ladezeit der Seite. Ebenso verzeichnete Walmart eine Zunahme der Konversionen um 2% für jede Verbesserung von 1 Sekunde bei der Ladezeit der Seite. (Everts, "Walmart.com: Boosting Performance with Front-End Optimizations")

"Seitenladezeit versus Konversionsrate einer Website"

(Quelle: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/)

Warum sind Core Web Vitals für Google-Suchergebnisse wichtig?

Google kündigte im Mai 2020 an, dass Core Web Vitals als Teil der allgemeinen Page Experience berücksichtigt würden, und sie wurden offiziell im Juni 2021 zu Ranking-Faktoren. Websites mit besseren Core Web Vitals haben tendenziell höhere Chancen, in den Suchergebnissen besser platziert zu werden. Das liegt daran, dass Google bestrebt ist, seinen Usern eine optimale Online-Erfahrung zu bieten.

Eine weitere interessante Entwicklung ist, dass Google auf mobiles First-Indexing umgestellt hat, wobei mobile und leistungsstarke Websites priorisiert werden. Dies macht die Leistung auf mobilen Geräten, einschließlich der Core Web Vitals, zu einem entscheidenden Faktor.

Largest Contentful Paint

LCP ist eine entscheidende Metrik bei der Bewertung der Nutzererfahrung auf Websites. Ein optimaler LCP-Wert liegt unter 2,5 Sekunden, und ein schneller LCP trägt zu einer verbesserten Nutzererfahrung bei, da dann die Hauptinhalte einer Seite schnell geladen werden.

Der LCP-Wert wird erfasst, wenn das größte sichtbare Element auf der Seite vollständig geladen und gerendert ist. Dies betrifft typischerweise Bilder, Videos oder große Textblöcke, die für den User sofort sichtbar sind. Dabei können auch Elemente in Frames oder iFrames in die Berechnung einfließen. LCP ist dabei nicht mit dem First Contentful Paint (FCP)-Messwert zu vertauschen. Dieser gibt an wie schnell der Browser das erste sichtbare Element rendert, unabhängig davon, ob alle Inhalte vollständig geladen sind. Dies kann beispielsweise das erste Bild oder ein initialer Textblock sein.

Ein Beispiel dafür, wie LCP auf einigen Seiten auftritt, wird auf der Website web.dev veranschaulicht:

"Beispiel des Ladevorgangs für den First and Largest Contentful Paint"

(Quelle: web.dev)

FCP lädt, wie es auf der Abbildung zu sehen ist, vor dem LCP mit verschiedenen Textelementen, während das LCP als großes Bild im Anschluss geladen wird.

Wie kann LCP gemessen werden?

Die Messung des LCP erfolgt mittels JavaScript, indem die Zeit vom Beginn des Seitenladevorgangs bis zur Fertigstellung des größten sichtbaren Elements erfasst wird. Tools wie die Web Vitals API und Lighthouse ermöglichen diese Messung und liefern detaillierte Leistungsberichte.

Die Google Search Console bietet einen Core Web Vitals-Bericht an, der Einblicke in die LCP-Performance einer Website liefert. Durch die Analyse dieser Daten können Website-Betreiber gezielt Optimierungen vornehmen, um die Benutzererfahrung zu verbessern. Insgesamt ist die Messung und Optimierung des LCP von großer Bedeutung für die Performance und Usability einer Webseite.

First Input Delay

First Input Delay spielt eine entscheidende Rolle bei der Messung der Benutzerinteraktion auf Websites. Diese Metrik misst die Zeit zwischen der ersten Aktion eines Users, wie einem Klick, und der tatsächlichen Reaktion der Webseite. Ein niedriger FID-Wert ist dabei entscheidend, um eine reaktionsschnelle Benutzererfahrung zu gewährleisten und kann sich positiv auf die Conversion-Rate auswirken.

Wie kann FID gemessen werden?

Um FID zu messen stehen verschiedene Werkzeuge zur Verfügung, darunter Lighthouse, PageSpeed Insights und Chrome DevTools. Darüber hinaus zeigt Google Analytics im Core Web Vitals-Bericht ebenfalls den FID-Wert an. Webentwickler können auch manuelle Messungen durchführen, indem sie JavaScript-Ereignisse überwachen, die Benutzerinteraktionen verarbeiten.

Cumulative Layout Shift

Google berücksichtigt CLS als einen der Core Web Vitals bei der Bewertung der Seitenqualität, weil Cumulative Layout Shift die Menge an unerwarteten Verschiebungen von visuellen Elementen während des Ladevorgangs misst. Ein niedriger CLS-Wert deutet auf eine stabile Benutzererfahrung hin, während ein hoher Wert auf störende Layoutverschiebungen hinweist.

"Bestellbestätigungsseite mit hohem CLS"

(Quelle: web.dev)

Wie kann CLS optimiert werden?

Die Verbesserung der visuellen Stabilität auf Webseiten erfordert gezielte Optimierungen, insbesondere im Hinblick auf Cumulative Layout Shift. Hier sind einige praktische Schritte zur Optimierung von CLS und zur Gewährleistung einer bestmöglichen Benutzererfahrung:

Es ist entscheidend, feste Breiten und Höhen für Bilder und eingebettete Medien festzulegen, um Platzhalter-Effekte zu vermeiden die durch dynamische Dimensionen entstehen können. Die Implementierung von Lazy Loading für Bilder und Videos stellt sicher, dass Inhalte nur geladen werden, wenn sie im sichtbaren Bereich sind, wodurch nachträgliche Verschiebungen vermieden werden.

Die korrekte Optimierung von Schriftarten spielt eine wesentliche Rolle, um Textverschiebungen zu minimieren. Durch die Nutzung von CSS-Animationen und Transitions können abrupte Änderungen in der Größe oder Position von Elementen vermieden werden. Allerdings sollten Animationen nicht zu lang sein, um Verzögerungen zu vermeiden.

Neuer Core Web Vital Messwert ab 2024

Google hat im Jahr 2022 einen neuen Core Web Vitals-Messwert eingeführt, der ab 2024 neben den anderen drei die SEO-Rankings von Websites beeinflussen soll. Dieser Messwert heißt Interaction to Next Paint, oder kurz geschrieben INP.

Interaction to Next Paint

Webnutzer verbringen einen erheblichen Teil ihrer Online-Zeit nach dem Laden einer Webseite. Um sicherzustellen, dass diese Zeit optimal genutzt wird, spielt die Reaktionsfähigkeit der Seite eine entscheidende Rolle. Hier kommt der Interaction to Next Paint ins Spiel, ein Messwert, der die gesamte Reaktionsfähigkeit von Webseiten bewertet.

INP erfasst die Latenz aller Klicks, Tippvorgänge und Tastatureingaben über den gesamten Seitenbesuch hinweg. Der resultierende INP-Wert repräsentiert die längste beobachtete Interaktion, wobei Ausreißer ignoriert werden. Im Vergleich zum First Input Delay berücksichtigt INP alle Interaktionen, nicht nur die erste. Das macht INP zu einem umfassenderen Maßstab für die Reaktionsfähigkeit einer Seite.

Ein INP unter oder bei 200 Millisekunden zeigt an, dass die Seite gut reagiert. Ein Wert über 500 Millisekunden weist auf eine schlechte Reaktionsfähigkeit hin.

Fazit

Die Core Web Vitals sind wichtige Messgrößen, aus denen sich Erkenntnisse über die Benutzerfreundlichkeit einer Webseite ableiten lassen. Es macht durchaus Sinn sich diese Werte regelmäßig anzuschauen, da eine Optimierung an dieser Stelle nicht nur den Usern die Interaktion mit der Seite erleichtert, sondern es sich auch um relevante Faktoren im Google SEO Ranking handelt.