SEO-Glossar: Google Core Web Vitals

Welche Core Web Vitals gibt es und was ist 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 es aber erst einmal um die aktuellen Core Web Vitals und ihre Funktionen.

 

LCP: Die Ladegeschwindigkeit einer Website

Der Largest Contentful Paint (LCP) beschreibt die Zeit, die vergeht, bis der Haupt-Content bzw. das grösste 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. Ausreisser 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 ausschliesslich 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 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össe 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)

Bi dr Messig vo Labordate wärded Tools genutzt, wo Nutzerzugriff uf dini Website imitieren und so d Core Web Vitals messen. Das ist insbesondere vor der Veröffentlichung von einere oder mehrere Syte sinnvoll, zum Problem i Bezug uf d echt Page Experience gar nöd erst entstoh z lah.

 

Folgendi Tools wärded bi dr Erhebig vo Labordate am hüfigschte genutzt:

 

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

 

Dr Nachteil vo Lighthouse-Date und andere Lab Data isch, dass si kei Ranking-Faktor darstelle und somit für d Platzerig in de Suchmaschines-Ergebnis irrelevant sind. Es chunnt lediglich uf d Felddate a. Zudem chan dr Web Vital INP nöd gmesse wärde, wiel s defür e echten Nutzereingab brucht. Stattdessen wird e ähnliche Wärt erhobe: TBT (Total Blocking Time). Sie söll unter 300 Millisekunde liegt.

 

Echti Nutzererfahrige (Field Data)

D Labordate sind fürs Ranking vo dine Syte in de SERPs nöd nur uninteressant, sondern führen im Verglich zu de Feldmessige au hüfig zu abweichende Ergebnis. Das ligt dradra, dass Nutzer unterschiedlichi Geräfverwende und anderi Netzwerkbedingige händ.

 

Au dr Arbeitsspeicher und d CPU-Leischtig sowie d Interaktione mit dr Syte unterscheide sich vo Nutzer zu Nutzer und vor allem vo Nutzer zu Labor. D Felddate lieferet im Gägesatz zu de Labormessige also es realistischers Bild.

 

Zum echti Nutzererfahrige messe, eignät sich e Reihe vo unterschiedliche Tools wie:

 

• Bricht zur Nutzererfahrig in Chrome (Google PageSpeed Insights)
• Google Core Web Vitals-Bricht
• JavaScript (Web Vitals-Bibliothek)
• Web Vitals-Erwyterig für Chrome
• Externi RUM-Anbieter (Real User Monitoring)

 

Aber au Field Data händ iri Nachteil. So sind neui Problem uf Websyte erscht nach etwa einem Monet in de Bricht ersichtlich. Zum d Kennzahle regelmässiger iishe,chönnd Labordate sehr hilfreich sy. Vor allem nach Optimierige bzw. Änderige an dr Syte gäb si sofortige Ufschluss über potenzielli Uswirkige uf d Core Web Vitals.

 

D wichtigschte Tipps zum Verbesseret vo de Core Web Vitals

Wer einzelni oder alli Core Web Vitals verbessere möchte, dä muess zerscht d Ursach von em schlechte LCP, INP oder CLS usfindig mache. S Guete: Mit Google PageSpeed Insights chasch du nöd nur d Metrik aller Core Web Vitals für dini Internetsyte iishe, sondern findsch au e Diagnos vo de einzelne Web Vitals sowie Tipps, zum si z verbessere.

Möglichkeite, de LCP z optimiere

Dr Largest Contentful Paint, also s gröscht nutzerrelevanti Element uf diner Syte, chan us Schrift oder emene Bildelement bstah. Zum d Ladezyte z verbessere, solltest du zerscht usefinde, welches Element Google als s Hauptelement definiert. Das chan je nach Endgärät vom Nutzer anders usgseh. Bi PageSpeed Insights solltest du dini Syte drum sowohl für d mobili als au für d Desktop-Ansicht analysiere.

 

Im Diagnostics-Abschnitt findsch neben wytere hilfreiche Tipps zur Verbesserig vo dine Web Vitals au s Largest Contentful Paint-Element. Zum dini LCP-Zyt z verbessere, söll dises Content-Element möglichst schnäll glade wärde. Dafü chasch in Content-Management-Systeme wie WordPress folgelndi Iistellige vorneh:

 

• Browser Caching iirichte, zum e schnälleri Server-Antwort übercho
• Hosting vo diner Website für e chürzeri TTFB (Time to First Bite) optimiere
• Content Delivery Network verwenden, um Content schneller bereitzustellen
• Unnötiges JavaScript & CSS für es schnällers Rendering vo de LCP-Elemente entfärne / verschiebe
• Falls dis LCP-Element es Bild isch, söttsch du dises komprimiere.

 

Au wenn d Verbesserig vom LCP viel technisches Know-how erfordere chan, söttsch du di zerscht uf zwöi Ding konzentriere: Sorg für e schnälleri Antwortzyt vo dim Server und stell em Nutzer s LCP-Element so schnäll wie möglich zur Verfügung.

 

Wie du en bessere INP erreiche chasch

Dr Web Vital INP cha ausschliesslich mit Felddate gmesse werde. In dr Regel reiche defür di vo Google bereitgestellte CrUX-Date us, wo du im Bericht zur Nutzertserfahrig in Chrome findsch. D Reaktionszit uf d Interaktion vomene Nutzer cha debi a de folgende drü Stelle biinträchtigt werde:

 

1. Bi dr Iigab (Iigabeverzögerig)
2. Bi dr Verarbeitig (lange Verarbeitigsdür)
3. Bi dr Präsentation (Präsentationsverzögerig)

 

Um d Iigab vo dr Nutzerinteraktion z beschleunige, söttsch de JavaScript-Code optimiere. Sorg für weniger Arbeit im Haupt-Thread und lösch unnötigi JavaScript-Code vo Drittabieter. Längi Arbeite vo JavaScript sötted zudem in mehri Stück ufteilt werde. So chönne Aktionen vom Nutzer dezwüsche stattfinde, ohni dass JavaScript d Arbeit zerscht vollständig beende muess.

 

Für e schnälleri Verarbeitig und Präsentation vom Inhalt söttsch Layout-Problem durch e asynchroni Bereitstellig vom Inhaltusschliesse. E chlèneri DOM-Grössi trät usserdem zu emene schnällere Rendering vom Siteinhalt bi.

 

So chasch de CLS verbessere

D hüfigscht Ursach für en hohe CLS-Messwert isch di fehlendi Zuewisig vo Bildgröndine. Damit sich s Layout weniger stark verschiebt, söttsch d Bräiti und d Höchi vo de Element im HTML-Code mittels „width“ und „height“ feschtlegge. So wird im Sitechopf e Platz für dini Bilder und Videos reserviert, au wenn anderi Element scho vorher glade worde sänd.

 

Für Wärbeazeige und Banner, uf dere Grössenzuewisig du kei Iifluss hesch, söttsch im Sitechopf scho im Voraus en usreichend grosse Platz reserviere. Isch au das nid möglich, dänn sötted vor allem dynamischi Inhalt witer une im Darstellungsbereich platziert werde.

 

Bi dr Nutzig vo Web-Schriftarte cha es nach em Lade vo dene Schrifte zu Layout-Verschiebnige cho. Damit das nid passiert, cha dr Sitebetriiber folgendi Optimierige vorhèbe:

 

• Sorg dafür, dass die Webschriftart so früh wie möglich lädt (<link rel=preload>).
• Nutze e Fallback-Schriftart, wo dr Webschriftart in ihrer Grössi und ihrem Stil ähnelet.
• Pass d Fallback- und Webschriftart mittels APIs anenand aa.
• Verchürz d Ladezit vo dr Webschriftart mittels Font Loading API.

 

Ob d Optimierige Früchte trait händ, chasch em Bericht zur Nutzererfahrig in Chrome nach 28 Täg entnè.

 

Gueti Core Web Vitals und schlechti SERP-Rankings? Dara cha es liege!

D Core Web Vitals sänd eini vo de wenige Möglichekeite, d Benutzerfründlichkeit vonere Websiite in Zahle messbar und vergleichbar z mache. Trotzdem cha es si, dass dini Siite trotz optimierte Web Vitals nid i de Top-Suchmaschinesergebnis rankt. Beacht, dass au anderi Ranking-Faktore zur User Experience und somit zu bessere Platzierige bi Google biiträge.

 

Züe gueter SEO ghört au d Onpage-Optimierig, wo zum Bispil durch Linkbuilding-Massnahme, es asprechendes Design, Keyword-Optimierige und durch relevante Content mit Mehrwert erzielt wird. Wenn du die Pünkt berücksichtigsch, stelle d Core Web Vitals e Chance dar, um einigi Plätz i de SERPs ufzstiige. Mir vo Timo Specht hälfe dir debi, dini SEO- und SEA-Massnahme ganzheitlich z verbessere und dini Websiite uf Rang 1 bi Google z bringe.