Was sind Core Web Vitals?

Google Core Web Vitals sind eine Reihe von Kriterien, die Google als wichtig für das Anwendererlebnis einer Webseite erachtet. Die Core Web Vitals setzen sich aus drei Messwerten zusammen, die sich auf die Geschwindigkeit und die Interaktion mit dem Nutzer beziehen: Größe des Inhalts, Geschwindigkeit und Seitenaufbau.

Kurz gesagt: Die Core Web Vitals sind eine Unterkategorie von Faktoren, die Teil der „Seitenerlebnis“ -Bewertung von Google sind im Grunde die Art und Weise, wie Google die Benutzerfreundlichkeit Deiner Seite insgesamt bewertet.

Du kannst die Core Web Vital-Daten Deiner Website im Abschnitt „Enhancements“ deines Google Search Console-Kontos finden.

Warum sind Core Web Vitals wichtig?

Google plant, die Nutzererfahrung als offiziellen Google-Ranking-Faktor einzuführen.
Die Seitenerfahrung wird ein Zusammenspiel von Aspekten sein, die Google als wichtig für die Nutzererfahrung erachtet, darunter:
•          HTTPS
•          Mobilfreundlichkeit
•          Fehlen von zwischengeschalteten Pop-up-Fenstern
•          „Safe-Browsing“ (im Grunde genommen, keine Malware auf der Seite)

Und Core Web Vitals wird ein superwichtiger Teil dieser Bewertung sein.
Der Ankündigung und dem Namen nach zu urteilen, ist es wahrscheinlich, dass die Core Web Vitals den größten Anteil an der Bewertung der Seitenerfahrung ausmachen werden.

Bitte vergesst nicht, dass eine gute Bewertung des Seitenerlebnisses Euch nicht auf magische Weise auf Platz 1 in der Google-Rangliste befördert.

Tatsächlich hat Google schnell darauf hingewiesen, dass das Seitenerlebnis einer von mehreren (ca. 200) Faktoren ist, die sie für das Ranking von Websites in der Suche verwenden.

Das ist aber kein Grund, jetzt sofort nervös zu werden.
Denn Google sagt, dass Du bis zum nächsten Jahr Zeit hast, die Core Web Vital Scores Deiner Website zu optimieren.
Aber wenn Du vorher die Core Web Vitals verbessern willst, super.
In diesem Leitfaden werde ich Dir die drei werte der core web vitals  vorstellen und Dir zeigen, wie Du jeden von ihnen verbessern kannst.

Largest Contentful Paint (LCP)

LCP ist die Dauer, die eine Webseite für den Seitenaufbau aus Sicht des Benutzers benötigt.

Mit anderen Worten: Es ist die Zeit vom Klicken auf einen Link bis zur Anzeige des Inhalts am Monitor.

LCP unterscheidet sich von anderen Pagespeed-Messungen. Viele andere Page-Speed-Metriken (wie TTFB und First Contextual Paint) repräsentieren nicht, wie es für den Anwender ist, eine Webseite zu öffnen.

Dagegen bezieht sich LCP auf das, was bei Seitengeschwindigkeit wirklich zählt: Dass der Nutzer Deine Seite sieht und mit ihr interagieren kann.

Du kannst Deinen LCP-Score mit Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/) überprüfen. Das ist nützlich, vor allem, wenn es darum geht, Verbesserungspotenziale zu erkennen.

Der Vorteil von Google Pagespeed Insights gegenüber einem Tool wie webpagetest.org ist, dass Du die Performance Deiner Seite unter Praxisbedingungen sehen kannst (basierend auf den Daten des Chrome-Browsers).

Trotzdem empfiehlt es sich, die LCP-Daten in der GSC zu betrachten.
Warum?

Die in der Search Console angezeigten Daten stammen wie bei Google PageSpeed Insights aus dem Chrome User Experience Report.

Doch im Gegensatz zu PageSpeed Insights kannst Du die LCP-Daten für Deine gesamte Website sehen.

Anstatt eine zufällige Seite nach der anderen zu analysieren, bekommst Du eine Liste von URLs, in der Du siehst, ob sie gut oder schlecht sind … Oder irgendwo dazwischen.

Außerdem hat Google spezifische LCP-Richtlinien.

Diese gliedern die LCP-Geschwindigkeit in drei Kategorien: Gut, Verbesserungsbedürftig und Schlecht.

Kurz gesagt, sollten alle Deine Seiten den LCP innerhalb von 2,5 Sekunden erreichen.

Das kann bei großen Webseiten eine echte Herausforderung sein oder bei Seiten mit vielen Funktionen.

Harte Arbeit? Mit Sicherheit. Lohnt es sich? Auf jeden Fall.

Hier sind ein paar Tipps, was Du tun kannst, um die LCP Deiner Seite zu verbessern:

• Entfernen aller unnötigen Skripte von Drittanbietern: In einer Studie zum Thema Pagespeed hat sich gezeigt, dass jedes Skript eines Drittanbieters die Ladezeit einer Seite um 34 ms verlangsamt.
• Wähle einen effizienteren Webhoster: besseres Hosting, = schnellere Ladezeiten insgesamt (einschließlich LCP).
• Implementiere „Lazy Loading“: Lazy Loading sorgt dafür, dass Bilder nur geladen werden, wenn jemand auf Deiner Seite nach unten scrollt. Das bedeutet, dass LCP deutlich schneller erreicht werden kann.
• Große Seitenelemente entfernen: Google PageSpeed Insights zeigt Dir an, ob Deine Seite ein Element enthält, das die LCP Deiner Seite verlangsamt.
• Verschlanke das CSS: Aufwendiges CSS kann die LCP-Zeiten erheblich beeinträchtigen.

First Input Delay (FID)

Werfen wir als Nächstes einen Blick auf das zweite Core Web Vital von Google: First Input Delay (FID)

Zu diesem Zeitpunkt hat Deine Seite also FCP erreicht.

Die Frage ist aber: Können Nutzer mit der Seite interagieren?

Genau das misst FID: Die Zeit, die ein Nutzer tatsächlich zur Interaktion mit Deiner Seite benötigt.

Beispiele für Interaktionen sind:

• Das Auswählen einer Option aus einem Menü
• Das Klicken auf einen Link
• Die Eingabe der E-Mail-Adresse in ein Feld
• Das Aufklappen von „Ziehharmonika-Text“ auf mobilen Geräten

Für Google ist die FID wichtig, weil sie berücksichtigt, wie reale Anwender mit der Website interagieren.
Und wie FCP haben sie spezifische Kriterien dafür, was eine akzeptable FID ausmacht.

Technisch gesehen misst die FID die Zeit, die benötigt wird, um auf einer Seite eine Aktion auszuführen zu können.
So gesehen ist es ein Page Speed Score.

Darüber hinaus wird aber auch die Zeit gemessen, die der Nutzer braucht, um auf Deiner Seite aktiv werden zu können.

Für Seiten, die nur aus Inhalt bestehen (wie z. B. Blogposts oder Newsartikel), spielt der FID keine Rolle.

Die einzig reale „Interaktion“ ist das Scrollen auf der Seite oder das ein und auszoomen.

Aber für eine Seite, die zum Einloggen, Anmelden oder einfach zum schnellen Anklicken gedacht ist, ist FID ein wichtiger Faktor.

Du kannst Dir zum Beispiel das Ladeerlebnis für eine Seite wie „Reddit Log-in Screen“ vorstellen:
Bei einer solchen Log-in-Seite ist die Zeit, die es braucht, um den Inhalt zu laden, weniger wichtig.

Entscheiden ist, wie schnell Du Deine Zugangsdaten eintippen kannst.

Hier ein paar Möglichkeiten, wie Du die FID-Werte Deiner Seite verbessern kannst.

• Reduziere (oder verzichte) auf Javascript: Solange der Browser Javascript lädt, ist es für Nutzer unmöglich, mit einer Seite zu interagieren. Daher ist die Minimierung oder der Verzicht auf Javascript ein wichtiger Aspekt für die FID.
• Alle unwichtigen Skripte von Drittanbietern entfernen: Genau wie bei FCP, können Skripte von Drittanbietern (wie Google Analytics, Heatmaps etc.) die FID negativ beeinflussen.
• Verwende einen Browser-Cache: Dies sorgt dafür, dass Inhalte Deiner Seite schneller geladen werden. So kann der Browser Deines Nutzers Javascript-Ladevorgänge schneller abarbeiten.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) bezeichnet die Stabilität einer Seite beim Laden auch bekannt als „visuelle Stabilität“.

Mit anderen Worten: Wenn sich Elemente auf Deiner Seite während des Ladevorgangs verändern, dann hast Du einen hohen CLS-Wert, dies ist schlecht.

Die Elemente Deiner Seite sollen während des Ladevorgangs nicht verändert werden.

Dadurch müssen die Nutzer nicht neu lernen, wo sich die Links, Bilder und Inhalte befinden, nachdem die Seite geladen ist.

Hier sind einige simple Maßnahmen, die Du ergreifen kannst, um CLS zu minimieren.

• Setze Größenattribute für alle Medien ein (Videos, Bilder, GIFs, Infografiken etc.): Damit der Browser des Nutzers die exakten Maße erfährt, wie viel Platz dieses Element auf der Seite einnehmen wird. Somit verändert er diesen Wert nicht während des Ladevorgangs.
• Stelle sicher, dass Werbeelemente einen festen Platz belegen: Ansonsten kann es passieren, dass sie unerwartet im Seitenaufbau erscheinen und den Inhalt nach unten, oben oder an die Seite drängen.
• Füge neue UI-Elemente am unteren Rand ein: So verdrängen sie Inhalte nicht nach unten, von denen der Nutzer „erwartet“, dass sie an ihrem Platz bleiben.

Lies mehr darüber

• Basics of UX: Core Web Vitals (und Googles “Page Experience”-Metrik im Allgemeinen) versuchen, die User Experience zu quantifizieren. Je besser also deine UX im Allgemeinen ist, desto besser werden deine Seitenerfahrungswerte sein. Googles “Basics of UX”-Leitfaden ist ein hervorragender Leitfaden.
• Chrome Lighthouse Übersicht: Dieses hilfreiche Tool, das in Google Chrome integriert ist, schlüsselt auf, warum eine Seite schnell lädt, oder eben nicht.