Core Web Vitals von Google: So machst du deine Website fit

Evgeni Sereda

Okt 25, 20227 Min. Lesedauer
Core Web Vitals

INHALTSVERZEICHNIS

Was sind die Core Web Vitals?

Die Core Web Vitals sind wichtige Metriken, mit denen Google verschiedene Aspekte der Performance deiner Website misst, um zu bestimmen, wie gut die Benutzererfahrung ist, die sie bietet. Darüber hinaus beeinflussen die Core Web Vitals seit Mai 2021 dein Ranking. Das liegt hauptsächlich an der Messung der Nutzererfahrung und Interaktivität. Schneidet deine Website bei den Metriken schlecht ab, so sieht Google deine Website nicht wertvoll an, was sich wiederum auf dein Ranking auswirkt. Die drei enthaltenen Metriken sind die folgenden:

Largest Contentful Paint (LCP)

Diese Metrik misst die Ladezeit bis der Hauptinhalt einer Seite den Benutzern angezeigt wird. Google empfiehlt einen LCP von unter 2,5 Sekunden. Google empfiehlt einen LCP von unter 2,5 Sekunden. Sie wird oft mit Pagespeed in Verbindung gebracht.

img-semblog

First Input Delay (FID)

Der FID misst die Reaktionszeit deiner Webseite, wenn ein Benutzer zum ersten Mal mit ihr interagiert, also eine Interaktion durchführt. Dazu gehören Link-Klicks, die Betätigung von Buttons sowie benutzerdefinierte JavaScript-Aktionen. Google empfiehlt einen FID Ladevorgang von unter 100 Millisekunden.

img-semblog

Cumulative Layout Shift (CLS): Dieser Wert misst die Anzahl der Layoutverschiebungen, die den Hauptinhalt der Seite überraschend bewegen. Diese Verschiebungen beeinträchtigen die Fähigkeit des Nutzers, Inhalte zu lesen und mit der Seite zu interagieren. Google empfiehlt einen CLS-Score von 0,1 oder weniger.

Sie sind eine Kombination von Signalen, die Google misst, um die Page Experience für einen Nutzer zu bewerten.

Core Web Vitals Video Anleitung

Youtube video thumbnail

Warum sind Core Web Vitals wichtig?

Jedes Mal, wenn Google ein offizielles Statement zu einem zukünftigen Rankingfaktor oder Algorithmus-Update abgibt, solltest du ihm große Bedeutung zumessen. 

Denk dran, was Google gesagt hat:

Eine gute Page Experience setzt nicht außer Kraft, dass man großartige, relevante Inhalte haben sollte.

Es gibt zahlreiche Rankingfaktoren, die das Gesamtranking jeder Unterseite und Website beeinflussen. Aber in diesem Artikel werden wir uns hauptsächlich darauf konzentrieren, wie sich die Core Web Vitals auf sichtbaren Erfolg einer Website in der Suche auswirken und wie die Messwerte an Stabilität gewinnen. 

img-semblog

Eine Verbesserung deines LCP, FID und CLS macht deine Website nutzerfreundlicher und kann sich positiv auf deine Rankings in den mobilen Suchergebnissen auswirken. Schon eine Erhöhung um eine Position auf der ersten Suchergebnisseite kann zu einem erheblichen Anstieg deines Traffics und sichtbaren Änderungen führen.

Das Gleiche gilt für die Benutzererfahrung. Wenn du sie verbesserst, kann dies zu einem schönen Schub für dein Geschäft durch Mundpropaganda, Bewertungen und weitere Käufe früherer Kunden führen.

Eine schlechte Page Experience infolge einer langsam ladenden Website kann dagegen deine Absprungrate erhöhen. Diese zeigt an, dass Nutzer deine Website verlassen, ohne zu scrollen, zu klicken und, noch wichtiger, zu konvertieren.

Laut Google erhöht sich bei einem Anstieg der Ladezeit einer Webseite von 1 auf 5 Sekunden die Absprungrate um 90 %.Um deine Core Web Vitals zu bewerten, kannst du den Tab „Verbesserungen“ in der Google Search Console aufrufen. Außerdem kannst du, wie bereits erwähnt, im Site Audit Tool einen Bericht zu den Core Web Vitals erhalten. 

Tools zur Messung der Core Web Vitals

Google hat die Werte der Core Web Vitals in mehrere seiner wichtigsten Tools für Entwickler und Webmaster integriert, darunter der Chrome User Experience Report.

Wir haben auch eine Core Web Vitals Studie gemacht und die Ergebnisse für euch zusammengefasst.

Dieser Bericht sammelt Daten von realen Internetnutzern und stellt sie über Tools wie PageSpeed Insights und die Google Search Console für Entwickler zur Verfügung.

PageSpeed Insights analysiert die Leistung deiner Webseite und generiert Vorschläge zur Erhöhung der Geschwindigkeit. Das Tool überprüft alle drei Core Web Vitals sowohl in mobilen als auch in Desktop-Browsern. Die Felddaten sind echte Nutzerdaten aus dem Chrome User Experience Report.

img-semblog
Anzeige der Core Web Vitals in PageSpeed Insights

Auch in der Google Search Console findest du die Core Web Vitals deiner Webseiten. Auch die Search Console verwendet Daten aus dem Chrome User Experience Report, um dir Probleme auf deiner Website anzuzeigen.

img-semblog

Die Chrome Web Vitals Extension zeigt dir die Core Web Vitals von Webseiten an, während du im Internet unterwegs bist oder deine eigenen Seiten bearbeitest. 

Mit der Erweiterung kannst du auch die aktuellen Scores deiner Konkurrenten abrufen. Sie verwendet die Web-Vitals-Bibliothek zusammen mit Felddaten aus dem Chrome User Experience Report.

Die Chrome Web Vitals Extension
Browser-Erweiterung Chrome Web Vitals zeigt Core Web Vitals an

Alle diese Tools zeigen dir die Werte für LCP, FID und CLS für deine Website an. Nur für Websites mit wenig Traffic sind manchmal nicht alle Metriken verfügbar, insbesondere in der Google Search Console.

Core Web Vitals mit Semrush optimieren

Auch in Semrush erhältst du einen schnellen Überblick deiner Core Web Vitals. Lege dazu ein Projekt für deine Website an und führe ein Site Audit durch.

Wenn du nicht weißt, wie gut deine Website bei den Nutzern ankommt, besuche das Projekt-Dashboard deiner Website in Semrush, öffne das Site Audit und überprüfe die Core Web Vitals deiner stärksten Seiten.

Um Core Web Vitals für deine zehn frei wählbare Seiten anzuzeigen, klicke auf die Schaltfläche "Details anzeigen" und führe je eine Kampagne für Desktop- und mobile Browser aus.

img-semblog

Das Audit ermittelt LCP und CLS für zehn Seiten deiner Wahl:

Core Web Vitals im Semrush Site Audit
Core Web Vitals im Site Audit von Semrush

Deine FID kannst du mit dem Site Audit nicht überprüfen - aber es erfasst eine ähnliche Metrik: Total Blocking Time (TBT).

Frage deine Core Web Vitals für Desktop- und Mobile-Browser ab, indem du für jeden Gerätetyp ein Projekt erstellst. Wenn du ein neues Audit durchführst, zeigt das Tool alle Änderungen an deinen Vitals-Werten seit dem letzten Audit an. Dies ist nützlich, wenn du die Performance mehrerer Seiten gleichzeitig in den grünen Bereich bringen willst.

Wie du deine Core Web Vitals verbesserst

Nachdem du nun weißt, was Core Web Vitals sind und wie du sie auf deiner Website messen kannst, können wir zur Praxis kommen: Wie lassen sich deine Core Web Vitals und die Benutzererfahrung deiner Website verbessern?

Wie viel Kontrolle du über deine Website und deinen Server hast, hängt von der Plattform, die du für deine Website verwendest (WordPress, Shopify usw.) sowie von deinem Webhosting-Anbieter ab.

So verbesserst du deinen Largest Contentful Paint

Google gibt selbst eine Reihe von Tipps zur Optimierung deiner Website und Verbesserung des Largest Contentful Paint für deine Webseiten. Beginne mit deinem Webserver. Wenn es zu ernsthaften Verzögerungen beim Laden kommt, ist es vielleicht an der Zeit, dein Webhosting von einem gemeinsam genutzten auf einen dedizierten Server umzustellen oder nutze CDN.

Weitere Möglichkeiten zur Verbesserung deines LCP sind die Optimierung und Komprimierung von Textdateien, Bildern, Videos und Blockelementen auf deinen Seiten. Beachte dabei sowohl Bilder im HTML-Code der Seite als auch Bilder, die als Hintergründe oder Designelemente deiner CSS- oder Theme-Dateien verwendet werden.

Hier kannst du lernen, wie du Largest Contentful Paint optimierst.

So kannst du First Input Delay verbessern

Um den First Input Delay deiner Website zu verbessern, musst du dein JavaScript und deine Verwendung von Drittanbieter-Skripten optimieren. Letztere stammen meist von Website-Analytics-Tools, umfassen aber jeden Code, der Skripte von einer anderen Website aufruft.

Wie bereits erwähnt, kannst du die JavaScript-Nutzung optimieren, indem du

  • Skripte minimierst (nicht benötigte Zeichen entfernst),
  • nicht genutzte Code-Elemente entfernst und
  • Code-Elemente, die für das anfängliche Laden einer Webseite nicht benötigt werden, in eine vorab geladene Ressource verschiebst.

Verwende die "Coverage"-Funktion von Google Chrome DevTools, um Code zu identifizieren, der in eine vorab geladene Ressource ausgelagert werden kann.

Google Chrome DevTools
Google Chrome DevTools - welcher Code lässt sich auslagern?

Google empfiehlt UglifyJS, um JavaScript zu minimieren. Für HTML gibt es den HTML Minifier und für CSS kannst du auf CSSnano oder csso zurückgreifen.

In einem Bericht der W3C Community Group erfährst du mehr über die technischen Details der Event Timing API, die die Latenz der Benutzerinteraktion analysiert.

So verbesserst du deinen Cumulative Layout Shift

Um den CLS-Score deiner Webseiten zu verbessern, musst du dem Browser während des Ladens mitteilen, wie viel Platz die einzelnen Seitenelemente erhalten sollen. Dazu kannst du Bildern und Videos entsprechende Größenattribute hinzufügen.

Alternativ kannst du CSS-Boxen mit fixem Seitenverhältnis verwenden. Beides hilft dir, unerwartete Verschiebungen von Inhalten beim Laden der Seite zu verhindern.

Darüber hinaus wird empfohlen, auf der Seite visuell kenntlich zu machen, dass Elemente noch geladen werden. Dies kann verhindern, dass Nutzer auf Inhalte klicken, die sich überraschend verschieben.

Weitere Tipps zur Optimierung für die Core Web Vitals

Semrush hat bereits den Bericht für die Core Web Vitals report im Site Audit Tool eingeführt. Dieser ermöglicht dir, schnell den Zustand der Vitals auf der Startseite einer Website zu überprüfen (mehr Seiten werden bald verfügbar sein). Du kannst auch unseren Bericht zur Website-Performance anschauen, um Ideen zum Verbessern deiner Seiten zu finden.

Um eine Website für die Core Web Vitals zu optimieren, ist es empfehlenswert, jede URL individuell zu analysieren. Denn aufgrund von unterschiedlichen Layouts, Inhaltsblöcken und Elementen kann der Score bei jeder Seite anders ausfallen. Unten findest du die grundlegenden Schritte, um die du – oder dein Entwicklerteam – dich zuerst kümmern solltest:

  • Skaliere Bilder auf die korrekte Größe für ihre Platzierung
  • Komprimiere große Bilddateien
  • Nutze Lazy Loading für statische Inhalte
  • Verbinde die Hosting-Plattform mit einem Content Delivery Network (CDN) 
  • Entferne alle unnötigen Ressourcen, die das Rendering blockieren 
  • Biete Bilder in Formaten der nächsten Generation an 
  • Entferne jegliches ungenutztes JavaScript
img-semblog
Teilen
Author Photo
Seit 5 Jahren verantworte ich das Marketing von Semrush in den deutschsprachigen Ländern. Seit 2010 bin ich ein leidenschaftlicher SEO. Die Kombination aus SEO und Marketing setzte ich bei großen Projekten wie die Implementierung der SEO-Maßnahmen und Marketing-Prozessen bei einem großen Retailer. Dabei betreue ich auch kleine Projekte, denn auch mal Hand anzulegen, das macht mir viel Spass. Meine Erfahrung und mein Wissen teile ich gerne mit dir.
Mehr dazu