SEO-Glossar: Google Core Web Vitals

Welche Core Web Vitals gibt es, und was sind ihre Funktion?

Google hat drei Core Web Vitals definiert, die sich insbesondere mit den technischen Voraussetzungen einer Website befassen: Wie schnell werden die Inhalte bereitgestellt, wann reagiert die Webseite auf den Nutzer, und wie stabil sind visuelle Inhalte? Um dies zu messen, gibt es folgende Core Web Vitals:

 

1. Largest Contentful Paint (LCP)
2. Interaction to Next Paint (INP)
3. Cumulative Layout Shift (CLS)

 

Hast du dich bereits mit dem Thema auseinandergesetzt, dann fällt dir möglicherweise auf, dass ein Web Vital verschwunden und ein neuer Wert hinzugekommen ist. Und tatsächlich: Im März 2024 hat Google den Web Vital First Input Delay (FID) durch den Messwert Interaction to Next Paint (INP) ersetzt. Warum das so ist, erklären wir dir gleich. Nun geht aber erstmal um die aktuellen Core Web Vitals und ihren Funktionen.

 

LCP: Die Ladegeschwindigkeit einer Website

Der Largest Contentful Paint (LCP) beschreibt die Zeit, die vergeht, bis der Haupt-Content bzw. das größte nutzerrelevante Element nach dem Klick auf eine Seite sichtbar wird. Dabei geht es erst einmal nur um den Content Above The Fold – also um Textblöcke oder Bilder, die ohne Scrollen auf der Webseite erscheinen.

 

Früher wurde statt des LCP meist die Dauer bis zum Erscheinen des ersten Elements auf der Webseite gemessen: der First Contentful Paint (FCP). Dabei konnte es sich zum Beispiel um das Erscheinen von Ladeleisten, dem Inhaltsverzeichnis oder der Eingabeleiste in Suchmaschinen handeln. Der LCP ist nun deutlich nutzerfreundlicher, da die Absicht des Nutzers berücksichtigt wird. Denn dieser interessiert sich in erster Linie für den Haupt-Content auf der Webseite.

 

Schaust du dir deine Metrik an, dann wirst du dich fragen: Was ist ein guter Wert für meinen LCP? Dazu gibt Google folgende Anhaltspunkte:

 

• Gut: Ladegeschwindigkeiten unter 2,5 Sekunden
• Verbesserungswürdig: Ladegeschwindigkeiten zwischen 2,5 und 4 Sekunden
• Schlecht: Ladegeschwindigkeiten über 4 Sekunden

 

Wie du Core Web Vitals wie den Largest Contentful Paint verbessern kannst, erfährst du ebenfalls in unserem Beitrag.

 

INP: Die Reaktionsgeschwindigkeit einer Website

Der Web Vital Interaction to Next Paint ist ein Messwert für die Interaktivität einer Webseite. Dabei werden sämtliche Aktionen des Nutzers erfasst – also Klicks, Tastatureingaben und Berührungen auf Touch-Displays. Nun wird gemessen, wie viel Zeit vergeht, bis die gewünschte Reaktion für den Nutzer sichtbar wird.

 

Ein niedriger INP gibt an, dass die Webseite bei über 75 % aller Nutzer flüssig und schnell reagiert. Das bedeutet, dass die Aktionen in unter 200 Millisekunden ausgeführt werden. Ausreißer werden dabei nicht berücksichtigt. Bei einer Reaktionszeit von über 500 Millisekunden ist der INP schlecht, alles zwischen 200 und 500 Millisekunden ist verbesserungswürdig.

 

Warum ersetzte der INP Messwert den Core Web Vital FID?

Wie bereits erwähnt, stellt der INP einen recht neuen Web Vital dar und ersetzte im März 2024 den FID Messwert (First Input Delay). Erstmals wurde der INP im Jahr 2022 von Google zum Testen zugänglich gemacht. Nach seiner Einführung wurde schnell deutlich, dass dieser Web Vital die User Experience besser berücksichtigt als der FID. Aber warum ist das so?

 

Der First Input Delay konnte nur den ersten Eindruck einer Webseite veranschaulichen, weil ausschließlich die erste Nutzerinteraktion gemessen wurde. Der INP gibt nun ein deutlich umfassenderes Bild von der Reaktionsgeschwindigkeit, da er sämtliche Interaktionen des Nutzers auf einer Webseite erfasst.

 

Zudem misst der INP die Zeit, bis der Konsument eine visuelle Darstellung bzw. eine erkennbare Reaktion auf seinem Bildschirm erhält. Auch dies war beim Web Vital FID anders. Dieser erfasste lediglich die Zeit, bis der Browser anfing, die Interaktion zu verarbeiten. Wann der Nutzer tatsächlich eine Reaktion auf seine Handlung erhielt, stellte der FID nicht dar.

 

CLS: Die visuelle Stabilität einer Webseite

Der Cumulative Layout Shift (CLS) ist der dritte Web Vital, den Google zur Messung der User Experience auf einer Webseite definiert hat. Dabei geht es um die visuelle Stabilität von Textblöcken, Bildelementen und Grafiken. Sobald sich das Layout beim Laden, Scrollen oder anderen Nutzerinteraktionen unerwartet verschiebt, werden die folgenden beiden Messungen vorgenommen:

 

1. Wie viel Prozent des Darstellungsbereichs nimmt das Element inklusive der Verschiebung ein? Bei einer Impact Fraction von 60 % läge der Messwert bei 0,6.
2. Um welche Entfernung hat sich das Element, gemessen an der Größe des Darstellungsbereichs, verschoben? Bei einer Distance Fraction von 20 % läge der Messwert bei 0,2.

 

Multipliziert man die Werte miteinander, dann erhält man den Layout Shift Score. Liegt er unter 0,1, dann spricht man von einem guten CLS-Wert. Alles darüber ist verbesserungswürdig. In unserem Beispiel liegt der Layout Shift bei 0,12 (0,6 * 0,2). Er wäre also optimierungsbedürftig. Wo du die Metriken deiner Core Web Vitals finden kannst, erklären wir von Timo Specht dir jetzt.

 

Wie lassen sich Core Web Vitals messen?

Die Core Web Vitals werden von Google sowohl hinsichtlich der Mobile Friendliness als auch für die Desktop-Versionen einer Seite gemessen. Zudem sind die Werte dank ihrer Nutzerorientierung auch für Laien leicht nachzuvollziehen.

 

Möchtest du nun die Core Web Vitals für deine Websites messen, dann fragst du dich möglicherweise, wie du dabei am besten und einfachsten vorgehst. Dafür gibt es zwei Varianten: die Erhebung von Labordaten und das Messen echter Nutzererfahrungen. Am besten ist es, beide Varianten zu kombinieren.

 

Labordaten (Lab Data)

Bei der Messung von Labordaten werden Tools genutzt, die Nutzerzugriffe auf deine Website imitieren und so die Core Web Vitals messen. Dies ist insbesondere vor der Veröffentlichung einer oder mehrerer Seiten sinnvoll, um Probleme in Bezug auf die echte Page Experience gar nicht erst entstehen zu lassen.

 

Folgende Tools werden bei der Erhebung von Labordaten am häufigsten genutzt:

 

• Entwickler-Tools von Chrome (Google Lighthouse)
• Google PageSpeed Insights

 

Der Nachteil von Lighthouse-Daten und anderen Lab Data ist, dass sie keinen Ranking-Faktor darstellen und somit für die Platzierung in den Suchmaschinen-Ergebnissen irrelevant sind. Es kommt lediglich auf die Felddaten an. Zudem kann der Web Vital INP nicht gemessen werden, weil es dafür eine echte Nutzereingabe braucht. Stattdessen wird ein ähnlicher Wert erhoben: TBT (Total Blocking Time). Sie sollte unter 300 Millisekunden liegen.

 

Echte Nutzererfahrungen (Field Data)

Die Labordaten sind für das Ranking deiner Seiten in den SERPs nicht nur uninteressant, sondern führen im Vergleich zu den Feldmessungen auch häufig zu abweichenden Ergebnissen. Das liegt daran, dass Nutzer unterschiedliche Geräteverwenden und andere Netzwerkbedingungen haben.

 

Auch der Arbeitsspeicher und die CPU-Leistung sowie die Interaktionen mit der Seite unterscheiden sich von Nutzer zu Nutzer und vor allem von Nutzer zu Labor. Die Felddaten liefern im Gegensatz zu den Labormessungen also ein realistischeres Bild.

 

Um echte Nutzererfahrungen zu messen, eignet sich eine Reihe unterschiedlicher Tools wie:

 

• Bericht zur Nutzererfahrung in Chrome (Google PageSpeed Insights)
• Google Core Web Vitals-Bericht
• JavaScript (Web Vitals-Bibliothek)
• Web Vitals-Erweiterung für Chrome
• Externe RUM-Anbieter (Real User Monitoring)

 

Aber auch Field Data haben ihre Nachteile. So sind neue Probleme auf Webseiten erst nach etwa einem Monat in den Berichten ersichtlich. Um die Kennzahlen regelmäßiger einzusehen, können Labordaten sehr hilfreich sein. Vor allem nach Optimierungen bzw. Änderungen an der Seite geben sie sofortigen Aufschluss über potenzielle Auswirkungen auf die Core Web Vitals.

 

Die wichtigsten Tipps zum Verbessern der Core Web Vitals

Wer einzelne oder alle Core Web Vitals verbessern möchte, der muss zunächst die Ursache eines schlechten LCP, INP oder CLS ausfindig machen. Das Gute: Mit Google PageSpeed Insights kannst du nicht nur die Metrik aller Core Web Vitals für deine Internetseiten einsehen, sondern findest auch eine Diagnose der einzelnen Web Vitals sowie Tipps, um sie zu verbessern.

Möglichkeiten, den LCP zu optimieren

Der Largest Contentful Paint, also das größte nutzerrelevante Element auf deiner Seite, kann aus Schrift oder einem Bildelement bestehen. Um die Ladezeiten zu verbessern, solltest du zunächst herausfinden, welches Element Google als das Hauptelement definiert. Dies kann je nach Endgerät des Nutzers anders aussehen. Bei PageSpeed Insights solltest du deine Seite deshalb sowohl für die mobile als auch für die Desktop-Ansicht analysieren.

 

Im Diagnostics-Abschnitt findest du neben weiteren hilfreichen Tipps zur Verbesserung deiner Web Vitals auch das Largest Contentful Paint-Element. Um deine LCP-Zeit zu verbessern, sollte dieses Content-Element möglichst schnell geladen werden. Dafür kannst du in Content-Management-Systemen wie WordPress folgende Einstellungen vornehmen:

 

• Browser Cashing einrichten, um eine schnellere Server-Antwort zu erhalten
• Hosting deiner Website für eine kürzere TTFB (Time to First Bite) optimieren
• Content Delivery Network verwenden, um Content schneller bereitzustellen
• Unnötiges JavaScript & CSS für ein schnelleres Rendering der LCP-Elemente entfernen/verschieben
• Falls dein LCP-Element ein Bild ist, solltest du dieses komprimieren.

 

Auch wenn die Verbesserung des LCP viel technisches Know-how erfordern kann, solltest du dich zunächst auf zwei Dinge konzentrieren: Sorg für eine schnellere Antwortzeit deines Servers und stell dem Nutzer das LCP-Element so schnell wie möglich zur Verfügung.

 

Wie du einen besseren INP erreichen kannst

Der Web Vital INP kann ausschließlich mit Felddaten gemessen werden. In der Regel reichen dafür die von Google bereitgestellten CrUX-Daten aus, die du im Bericht zur Nutzererfahrung in Chrome findest. Die Reaktionszeit auf die Interaktion eines Nutzers kann dabei an den folgenden drei Stellen beeinträchtigt werden:

 

1. Bei der Eingabe (Eingabeverzögerung)
2. Bei der Verarbeitung (lange Verarbeitungsdauer)
3. Bei der Präsentation (Präsentationsverzögerung)

 

Um die Eingabe der Nutzerinteraktion zu beschleunigen, solltest du den Java Script-Code optimieren. Sorg für weniger Arbeit im Haupt-Thread und lösche unnötige Java Script-Codes von Drittanbietern. Lange Arbeiten von JavaScript sollten zudem in mehrere Stücke aufgeteilt werden. So können Aktionen des Nutzers dazwischen stattfinden, ohne dass JavaScript die Arbeit erst vollständig beenden muss.

 

Für eine schnellere Verarbeitung und Präsentation der Inhalte solltest du Layout-Probleme durch eine asynchrone Bereitstellung der Inhalte ausschließen. Eine kleinere DOM-Größe trägt außerdem zu einem schnelleren Rendering der Seiteninhalte bei.

 

So kannst du den CLS verbessern

Die häufigste Ursache für einen hohen CLS-Messwert ist die fehlende Zuweisung von Bildgrößen. Damit sich das Layout weniger stark verschiebt, solltest du die Breite und die Höhe der Elemente im HTML-Code mittels „width“ und „height“ festlegen. So wird im Seitenlayout ein Platz für deine Bilder und Videos reserviert, auch wenn andere Elemente schon vorher geladen wurden.

 

Für Werbeanzeigen und Banner, auf deren Größenzuweisung du keinen Einfluss hast, solltest du im Seitenlayout schon im Voraus einen ausreichend großen Platz reservieren. Ist auch dies nicht möglich, dann sollten vor allem dynamische Inhalte weiter unten im Darstellungsbereich platziert werden.

 

Bei der Nutzung von Web-Schriftarten kann es nach dem Laden dieser Schriften zu Layout-Verschiebungen kommen. Damit das nicht passiert, kann der Webseitenbetreiber folgende Optimierungen vornehmen:

 

• Sorg dafür, dass die Webschriftart so früh wie möglich lädt (<link rel=preload>).
• Nutze eine Fallback-Schriftart, die der Webschriftart in ihrer Größe und ihrem Stil ähnelt.
• Pass die Fallback- und Webschriftart mittels APIs aneinander an.
• Verkürze die Ladezeit der Webschriftart mittels Font Loading API.

 

Ob die Optimierungen Früchte getragen haben, kannst du dem Bericht zur Nutzererfahrung in Chrome nach 28 Tagen entnehmen.

 

Gute Core Web Vitals und schlechte SERP-Rankings? Daran kann es liegen!

Die Core Web Vitals sind eine der wenigen Möglichkeiten, die Benutzerfreundlichkeit einer Webseite in Zahlen messbar und vergleichbar zu machen. Trotzdem kann es sein, dass deine Seite trotz optimierter Web Vitals nicht in den Top-Suchmaschinen-Ergebnissen rankt. Beachte, dass auch andere Ranking-Faktoren zur User Experience und somit zu besseren Platzierungen bei Google beitragen.

 

Zu guter SEO gehört auch die Onpage-Optimierung, die zum Beispiel durch Linkbuilding-Maßnahmen, ein ansprechendes Design, Keyword-Optimierungen und durch relevanten Content mit Mehrwert erzielt wird. Wenn du diese Punkte berücksichtigst, stellen die Core Web Vitals eine Chance dar, um einige Plätze in den SERPs aufzusteigen. Wir von Timo Specht helfen dir dabei, deine SEO- und SEA-Maßnahmen ganzheitlich zu verbessern und deine Webseiten auf Rang 1 bei Google zu bringen.