Google hat eine gewisse Vorstellung, wie Websites idealerweise auszusehen haben. Das US-Unternehmen hat aber, anders als Plattformbetreiber wie Facebook, keinen Einfluss auf die Ausgestaltung der Seiten, die ihre Suche anzeigt. Um dennoch Einfluss zu nehmen, hat Google die sogenannten „Core Web Vitals“ eingeführt und nutzt sie als bedeutenden Faktor für das Erstellen der Google Rankings. Wir erklären, was es mit ihnen auf sich hat. 

Definition: Core Web Vitals

Wie hoch Deine Website bei Google rankt, wird schon jeher durch Parameter bestimmt, die Google vorgibt. On-Page- und Off-Page-Optimierung, Content, Geschwindigkeit – die Einfluss nehmenden Faktoren sind zahlreich. Insbesondere SEO Manager beschäftigen sich tagtäglich damit, Websites für hohe Google Rankings zu optimieren. Mit den Core Web Vitals erhalten sie nun einen neuen Spielplatz. 

In diesen definiert Google die, nach Meinung des Unternehmens, ideale User Experience. Denn, zum Verständnis: Googles Ziel ist es, dass alle Websites, die mit Hilfe von Google entdeckt werden, bei dem Suchenden gut ankommen. Nur, wenn der User findet, was er sucht und dabei eine gute Erfahrung macht, wird er Google in Zukunft wieder nutzen – und das steigert unter anderem dank Werbeplatzierungen den Umsatz des Tech-Giganten. Wer dementsprechend in der Suche bei Google auf Seite 1 ranken möchte, muss nach den Regeln von Google spielen.

Die Core Web Vitals umfassen im Wesentlichen drei Faktoren: 

  • Largest Contentful Paint – LCP 
  • First Input Delay – FID
  • Cumulative Layout Shift – CLS

Den drei Faktoren liegen die folgenden drei Fragen zugrunde: Wie schnell lädt Deine Seite? Wie schnell kann der Nutzer zum ersten Mal auf Deiner Seite interagieren? Ist Deine Website visuell stabil? Die Core Web Vitals stellen demnach klar die User Experience in den Vordergrund und belohnen damit solche Internetseiten, die es ihrem Besucher besonders leicht machen, sich auf ihr schnell zurecht zu finden.

Die Core Web Vitals werden regelmäßig aktualisiert

Bei der Ankündigung für die ab Juni 2021 aktiven Core Web Vitals hat sich Google vorbehalten, sie künftig regelmäßig zu prüfen, neu zu evaluieren und zu aktualisieren, abhängig vom Nutzerverhalten. Für SEOs gilt es dementsprechend, die Entwicklung weiter zu verfolgen. Für Dich und Dein Unternehmen wird es umso bedeutender, eine SEO-Agentur an Deiner Seite zu haben, die entsprechende Änderungen mitbekommt, sie mit Dir zu teilen und gemeinsam die nächsten Schritte definiert, damit Deine Website ein hohes Standing bei Google behält.

Falls Du auf der Suche nach einer Agentur für Website-Entwicklung oder aber SEO bist, frage sie jeweils, ob sie bereits Erfahrung im Bereich Core Web Vitals haben und sie in ihre Arbeit für Deine Internetseite mit einbeziehen, da ihr Einfluss auf Deine Google Rankings enorm sein wird. Lass Dir idealerweise einen Plan vorlegen, wie die Agentur vor hat, Deine Website an das Core-Web-Vitals-Update anzupassen. Wir bei path haben uns in den letzten Monaten viel mit dem Thema Core Web Vitals auseinandergesetzt  und bereits erfolgreich Websiten optimiert. Hier kannst du gerne unsere Case Studies zu den Web Core Vitals ansehen.

Desktop und Mobile werden separat bewertet

Interessant zu wissen ist, dass Google die Core Web Vitals für die Desktop- und Mobile-Nutzung voneinander losgelöst beurteilt. Sind Deine Werte in der Mobile-Version geringer, hat das keine Auswirkung auf Deine Rankings in der Desktop-Google-Suche, aber auf die Mobile-Suche – und andersrum genauso. 

Aber: Vergessen wir mal kurz die Core Web Vitals, gilt natürlich nach wie vor, dass Mobile eine immer größere Rolle spielt und stets relevanter wird. Insofern ist es Deine Aufgabe, Mobile so gut wie möglich zu optimieren. 

Core Web Vitals Check: Wie werte ich meine Ergebnisse aus?

Bevor Du damit beginnst, die Core Web Vitals Deiner Website zu optimieren, macht es Sinn, zunächst den Status quo auszuwerten. Dafür gibt es unterschiedliche Tools, die Dir aufzeigen, wie Deine Internetseite nach den Standards der Core Web Vitals aktuell performt. Zu nennen wären hier beispielsweise die Google PageSpeed Insights, bei denen Du die URL Deiner Website angeben und Dir verschiedene Parameter zur Geschwindigkeit ansehen kannst – unter anderem die Core Web Vitals, für Mobil, genauso wie für Desktop. Eine andere Möglichkeit ist Google Lighthouse. Die Daten werden jedoch bei diesen zwei Tool unterschiedlich gemessen. Pagespeed Insights verwendet zusätzlich zu “lab data”, nämlich auch noch  “real-world data”. Genauer Infos dazu verraten wir euch in einem weiteren Artikel.

In der Google Search Console erhältst Du ebenfalls entsprechende Einblicke und kannst Dir anzeigen lassen, welche einzelnen Seiten Deiner Website wie performen – ob sie bereits in Ordnung sind (grün), optimiert werden müssen (gelb) oder eine Generalüberholung brauchen (rot). Wenn alle Deine Seiten jeweils in der Mobile- und in der Desktop-Version bereits grün sind und 100 Prozent erreichen, kannst Du hier aufhören zu lesen. 

Core Web Vitals: Der Guide für alle Einsteiger 1
Core Web Vitals: Der Guide für alle Einsteiger 2

Wenn das nicht der Fall ist, gehen wir in den folgenden Absätzen im Detail auf die drei relevanten Faktoren ein, erklären, wie sie sich zusammensetzen und wie sie sich optimieren lassen, um Deine Google Rankings nachhaltig zu pushen.

Largest Contentful Paint (LCP): Definition und Optimierung

Die erste KPI, die zu den Core Web Vitals zählt, ist „Largest Contentful Paint“ oder kurz LCP. Die Metrik beschreibt die Dauer, die Deine Website braucht, um ihr größtes Content-Element zu laden – das kann können Fotos im Hinter- oder Vordergrund sein, Videos, Textblöcke, Headlines, Buttons oder ähnliches. Umso schneller es lädt, desto höher Dein Wert in den Core Web Vitals. 

Google gibt sogar sehr genaue Hinweise darauf, welche Werte gut sind und welche Optimierungsbedarf haben: Eine Ladezeit von bis zu 2,5 Sekunden beim größten Content-Element gilt als gut, 2,5 bis 4 Sekunden sind verbesserungswürdig und alles ab 4 Sekunden muss dringend optimiert werden. Eine detaillierte Aufschlüsselung mit konkreten Beispielen von entsprechenden Content-Elementen zeigt Google selbst

Wie optimiere ich meinen LCP-Wert?

Jetzt, wo Du weißt, wie hoch Dein LCP-Wert ist, interessiert Dich vielleicht die Frage, wie Du ihn nun optimieren kannst. Dafür gibt es natürlich kein Schema F. Stattdessen muss der jeweilige Fall immer individuell betrachtet, eine Auswertung vorgenommen und entsprechende Schritte im Anschluss eingeleitet werden. Wir möchten Dir aber im Folgenden die gängigsten Möglichkeiten zur Optimierung Deines LCP vorstellen.

  • Antwortzeiten Deines Servers verkürzen: Entscheidend ist hier die Zeit, die Dein Browser benötigt, die Inhalte Deiner Website zu laden. Diese Zeit gilt es zu verkürzen – mit eingeschlossen ist dabei natürlich der LCP-Wert. Wie ist das möglich? Eine Möglichkeit ist, die HTML-Datei der Website durch ein Framework wie das Facebook-Framework „React“ zu ersetzen. Oder aber Du setzt ein Content Delivery Network (CDN) ein: Tust Du das nämlich nicht, haben Nutzer, die geographisch weit entfernt von Deinem Server sitzen, längere Ladezeiten. Das CDN wiederum macht es möglich, immer Server anzupingen, die in der Nähe des jeweiligen Nutzers sind und die Inhalte entsprechend schneller ausspielen.
  • Ladezeiten Deiner Ressourcen verkürzen: Bindest Du Bilder, Videos oder andere Content-Elemente in Deine Website ein, solltest Du stets darauf achten, die richtigen Dateiformate und -größen zu verwenden. Dateiformate wie JPEG 2000, JPEG XR oder WebP sind beispielsweise besonders stark komprimiert und eignen sich mehr als andere für schnelle Ladezeiten. 
  • JavaScript- und CSS-Rendering verringern: Unser Internetbrowser kann Objekte erst darstellen, wenn sie zuvor in ein Document Object Model umgewandelt werden. Diese Umwandlung stoppt allerdings, wenn JavaScripte und CSS-Stylesheets ausgeführt werden. Diese gilt es dementsprechend zu reduzieren, damit die Umwandlung der Objekte möglichst schnell stattfinden kann.

Weitere Tipps, um Deinen LCP-Wert zu optimieren, wie zum Beispiel zum Thema Client-Side-Rendering, gibt Google in einem ausführlichen englischsprachigen Artikel bis ins kleinste Detail. 

First Input Delay (FID): Definition und Optimierung

Die zweite KPI der Core Web Vitals ist der „First Input Delay“, kurz FID. Die Kennzahl beschreibt die Dauer der Zeit, bis der Nutzer auf Deiner Website zum ersten Mal erfolgreich eine Aktion ausführen kann, wie beispielsweise einen Button zu drücken und zur nächsten Seite weitergeleitet zu werden. Denn: Oft ist es so, dass Nutzer bereits klicken, bevor die Website vollständig geladen ist und auf entsprechende Aktionen reagieren kann.

Ein Wert unter 100 Millisekunden wird dabei als gut angesehen, zwischen 100 und 300 ms ist er optimierungsbedürftig und über 300 ms muss er dringend korrigiert werden, um hohe Absprungraten durch die Nutzer zu vermeiden. 

Wie optimiere ich meinen FID-Wert?

Wie schon beim Largest Contentful Paint gibt es ebenso bei der Optimierung des FID-Wertes diverse Möglichkeiten, die je nach konkretem Anwendungsbeispiel umgesetzt werden können. Wir geben Dir im Folgenden einen Überblick über die Potenziale.

  • Interaktionen priorisieren: Eine naheliegende Option, Deinen FID-Wert zu optimieren, ist die Ladezeit von möglichen Interaktionselementen gegenüber den anderen Elementen zu priorisieren und somit einen Button zum Beispiel schneller laden zu lassen als ein Foto, mit dem nicht interagiert werden kann. So kann der Nutzer bereits aktiv werden, ohne, dass die gesamte Seite geladen ist.
  • Einsatz von Web Workern: Durch Web Worker können aufwendige JavaScripte separat ausgeführt werden, ohne die Ladezeit der anderen Elemente negativ zu beeinflussen. 
  • Long Tasks aufspalten: Besonders aufwendige JavaScripte, die eine längere Ausführungszeit als 50 ms haben, werden als Long Tasks bezeichnet. Diese gilt es aufzuspalten in mehrere kleine Tasks, um Deinen FID-Wert zu optimieren.

Google hält weitere Tipps dafür in einem eigenen Blogbeitrag dazu bereit. 

Cumulative Layout Shift (CLS): Definition und Optimierung

Der letzte der drei neuen bald eingeführten Core Web Vitals ist der sogenannte „Cumulative Layout Shift“ – kurz CLS. Dieser Wert beschreibt die visuelle Stabilität Deiner Website beim Laden. Warum das relevant ist? Wahrscheinlich hast Du es selbst schon erlebt: Du öffnest eine Website, möchtest auf einen Button klicken und in der Sekunde wird ein neues Content-Element eingeblendet, der Button verschiebt sich und Du klickst ins Leere oder womöglich sogar auf einen anderen Link. Der CLS gibt dementsprechend an, ob und wie sehr sich Websites unerwartet verändern, während Du mit ihnen interagierst. 

Der CLS-Wert wird aus zwei unterschiedlichen anderen Werten berechnet: der Impact Fraction und der Distance Fraction. Die Impact Fraction ist der Prozentbereich des Bildschirms, der von einer Verschiebung betroffen ist – die Distance Fraction gibt in Prozent der Viewport-Höhe an, wie sehr die Elemente verschoben werden. Zur Berechnung werden beide Werte miteinander multipliziert und ergeben den Layout Shift Score. Ein Layout Shift Score bis 0.1 gilt als gut, von 0.1 bis 0.25 als ausbaufähig und alles über 0.25 ist dringend optimierungsbedürftig. 

Wie optimiere ich meinen CLS-Wert?

Ähnlich wie beim Largest Contentful Paint und First Input Delay haben wir ebenso für den Cumulative Layout Shift Tipps zusammengestellt, die Dir dabei helfen werden, den Wert und damit das Gesamtergebnisse Deiner Core Web Vitals zu optimieren.

  • Bilder und Videos mit Breiten- und Höhenangaben ausstatten: Wenn Du die Breite und Höhe Deiner Bilder und Videos fest definierst, wird der Browser entsprechenden Platz für die Elemente freihalten. Bedeutet: Selbst, wenn sie zu langsam laden, wird es keine Verschiebung der Seite geben, wenn sie sichtbar werden. So erlebt der Nutzer keine bösen Überraschungen. Selbiges gilt für Ads.
  • Mit Platzhaltern arbeiten: Ähnlich wie schon beim ersten Tipp gilt es hier, Platz auf der Website frei zu halten, damit spät ladender Content die Struktur der Seite nicht zerschießt. Für fixe Elemente wie Newsletter gilt es, Platzhalter zu schaffen. 
  • Fonts vorladen: Wer mit Web-Schriftarten arbeitet, läuft Gefahr, dass sich das Layout der Website verschiebt, wenn die Font beispielsweise nicht lädt und durch eine Ersatzschriftart ersetzt wird. Um dem vorzubeugen, kannst Du die Schriftarten einfach vorladen oder aber direkt auf Deinem Server zu installieren, um das Risiko für eine Verschiebung entsprechend zu reduzieren. 

Im Blog verrät Google weitere nützliche Tipps

So beginnst Du, Deine Core Web Vitals zu optimieren

Nun hast Du einen Überblick über die drei Metriken der Core Web Vitals. Du weißt, wie sie aufgebaut sind und hast erste Ideen, wie Du sie optimieren kannst. Wenn noch nicht erledigt, gilt es nun im nächsten Schritt erst einmal, wie eingangs erklärt, herauszufinden, wie gut Deine Website eigentlich in puncto Core Web Vitals abschneidet – anhand unserer Tipps kannst Du möglicherweise erkennen, wo noch Optimierungspotenzial besteht.

Haben wir nun Dein Interesse geweckt? Wir lassen Dich dabei aber nicht im Stich: Wir prüfen WordPress-Websites bis ins Detail Wir prüfen WordPress-Websites bis insCore Web Vitals Optimierung Detail und nehmen anschließend alle Optimierungen vor, um Deine Website blitzschnell zu machen und Deine Core Web Vitals in Höchstform zu bringen. In der Vergangenheit haben wir bei unseren Kunden hellotax und Noble & Style bereits aussagekräftige Ergebnisse erreicht. 

Fazit

Im Juni 2021 werden die Core Web Vitals zusätzlicher Rankings Faktor sein. Ursprünglich war das Update bereits für März 2021 geplant, da jedoch einige Nutzer noch nicht ready dafür waren, hat Google freundlicherweise das Update nun auf Juni verschoben . Zu diesem Zeitpunkt werden diese neuen Metriken Einfluss auf die Google Rankings nehmen. Du solltest Dich demnach rechtzeitig darauf vorbereiten und die Core Web Vitals vor dem Update möglichst optimieren, da sie für Google ein maßgeblicher Faktor in der Bewertung der Nutzerfreundlichkeit Deiner Website sein werden. 

Wer sich rechtzeitig darauf vorbereitet, kann sich gegenüber Wettbewerbern einen entsprechenden Vorteil verschaffen und von dem Update profitieren. Als Nutzer dürfen wir uns alle freuen, denn mit den neuen Google-Richtlinien werden sich viele Website-Betreiber motiviert fühlen, die User Experience ihrer Website zu optimieren. Wir werden Dich in unserem Blog weiter zu diesem Thema auf dem Laufenden halten. 

Webseite auf Core Web Vitals optimieren lassen

Share