Zentrale Web-Vitalien: Was sie sind und wie man sie optimiert

Zuletzt aktualisiert am Freitag, 29. September 2023

Core Web Vitals What They Are and How to Optimize Them

Bei den von Google im Mai 2020 angekündigten Core Web Vitals handelt es sich um spezifische Metriken, die die Qualität der Nutzererfahrung auf einer Website bewerten.

Diese als wesentlich angesehenen Websignale sind für die Suchmaschinenoptimierung extrem wichtig geworden, nachdem Google offiziell erklärt hat, dass sie ab 2021 zu Rankingfaktoren werden.

Obwohl seitdem einige Zeit vergangen ist, mangelt es vielen Websites an Leistung.

In diesem Artikel erfahren Sie, was die Core Web Vitals von Google sind, wie sie die Suchmaschinenoptimierung beeinflussen und warum es sich lohnt, die Leistung Ihrer Website zu verbessern.

Was sind Core Web Vitals?

Core Web Vit als sind eine Reihe von Metriken, die das Nutzererlebnis auf einer Website in Bezug auf Leistung, Stabilität und Reaktionsfähigkeit bewerten.

Sie werden als wesentlich definiert und sind nicht nur für UX, sondern auch für SEO wichtig geworden.

Obwohl es noch andere Signale für die Nutzererfahrung gibt, gelten diese als die wesentlichen Parameter, die eine hochwertige Website erfüllen muss.

Im Einzelnen sind dies:

  • Größter inhaltsreicher Schmerz (LCP)

  • Verzögerung der ersten Eingabe (FID)

  • Kumulative Layout-Verschiebung (CLS)

Page Experience Signal - Google

Lassen Sie uns diese Parameter einzeln analysieren.

Größter inhaltsbezogener Schmerz (LCP)

Largest Contentful Paint (LCP) ist die erste der Core Web Vitals Metriken und misst die Ladegeschwindigkeit des Inhalts, der als der wichtigste (d. h. der größte in Bezug auf die Größe in Bytes) innerhalb des Viewports identifiziert wurde.

Dieser Parameter wird ab dem ersten Laden einer Seite berechnet und berücksichtigt nicht alle Elemente, sondern konzentriert sich nur auf Bilder, Videos oder Textblöcke.

Ebenso wird der Wert nicht für die gesamte Seite berechnet, sondern nur für den Teil, der beim Laden sichtbar ist, wobei abgeschnittene oder versteckte Elemente nicht berücksichtigt werden.

Es ist auch gut zu wissen, dass die Größe der Bilder auf der Grundlage des niedrigeren Wertes zwischen dem inneren und dem sichtbaren Wert berechnet wird.

Largest Contentful Pain (LCP)
Quelle: Web.Dev

Ein niedriger LCP-Wert zeigt an, dass die Seite schnell lädt und ein positives Nutzererlebnis bietet.

Die von Google als positiv erachtete Höchstgrenze liegt bei 2,5 Sekunden, d. h. die wichtigsten Inhalte Ihrer Website müssen innerhalb dieser Frist geladen werden.

Andernfalls gilt: Je länger die Ladezeit, desto höher die LCP-Bewertung. Deshalb ist es wichtig, die Ladegeschwindigkeit Ihrer Seite zu verbessern.

Erste Eingabeverzögerung (FID)

First Input Delay (FID) ist die zweite Metrik der Core Web Vitals und misst die Reaktionsfähigkeit einer Webseite.

Google weist darauf hin, dass es wichtig ist, einen guten ersten Eindruck zu hinterlassen. Dabei kann man sich aber nicht nur auf das Aussehen verlassen, sondern auch auf die Reaktionszeiten.

Seit einiger Zeit berechnet Google den Wert First Contentful Paint (FCP), um die Ladezeit des ersten, als wichtig erachteten Inhalts auf dem Bildschirm zu messen.

Heute scheint dieser Wert jedoch nicht mehr auszureichen, weshalb der FID-Wert eingeführt wurde, um zu messen, wie lange eine Website braucht, um auf die erste Nutzerinteraktion zu reagieren, z. B. einen Klick auf eine Schaltfläche oder einen Link.

Ein niedriger FID-Wert deutet darauf hin, dass die Seite reaktionsschnell ist und ein reibungsloses Nutzererlebnis bietet.

Andernfalls, wie bei der LCP-Kennzahl, steigt der Wert, je länger es dauert, auf die Interaktion zu reagieren.

First Input Delay (FID) Score
Quelle: Web.Dev

Kumulative Layout-Verschiebung (CLS)

Cumulative Layout Sh ift (CLS) ist die letzte der Core Web Vitals Metriken und misst die visuelle Stabilität einer Webseite.

Mit anderen Worten: Es wird bewertet, wie viele Seitenelemente sich während des Ladevorgangs unerwartet verschieben. Dieses Problem ist in der Regel auf relativ lange Rendering-Zeiten zurückzuführen, insbesondere wenn externe Ressourcen geladen werden und die erforderlichen Abstände nicht im Voraus definiert wurden.

Eine niedrige CLS-Bewertung bedeutet nicht nur, dass die Seite stabil ist und von einer höheren Bewertung profitieren kann, sondern auch, dass sie ein angenehmes Nutzererlebnis bietet und daher eher zu einer Konversion führt.

Tatsächlich kann ein hoher Wert ein Symptom für ernsthafte Usability-Probleme sein, die weit über SEO hinausgehen, und aus persönlicher Erfahrung rate ich Ihnen, diese Metrik sorgfältiger zu analysieren.

Cumulative Layout Shift (CLS) Score
Quelle: Web.Dev

Sind Core Web Vitals wirklich unerlässlich?

Kurze Antwort: Ja.

Aber jetzt weiß ich, was Sie denken.

"Wenn Core Web Vitals so wichtig sind, warum gibt es dann so viele erfolgreiche Websites, die sehr hohe Werte haben?

(Denken Sie daran, dass bei Web Vitals eine hohe Punktzahl einem negativen Wert entspricht).

Nun, die Leistung ist nur einer der vielen Ranking-Faktoren, und für SEO sicherlich nicht einmal der wichtigste.

Der Inhalt wird weiterhin eine vorherrschende Stellung gegenüber der Ladegeschwindigkeit einnehmen, und das ist auch ganz natürlich so.

Dennoch sollte man sich vor Augen halten, dass die Verbesserung der Leistung einer Website proportional die Chancen erhöht, dass diese Website Engagement erzeugt, die Nutzerbindung erhöht und die Absprungrate verringert - alles Faktoren, die zu einer besseren Positionierung in den Suchergebnissen und zu mehr Konversionen beitragen können.

Kernstück der Web Vitals-Optimierung

Der erste Schritt, der für die Verbesserung der Leistung von Core Web Vitals unerlässlich ist, besteht darin, zu verstehen, wo man anfangen muss und was zu tun ist.

Dieser Prozess kann auch langwierig und komplex erscheinen. Mit ein paar gezielten Maßnahmen können Sie jedoch Verbesserungen in Bezug auf Ladegeschwindigkeit, Reaktionsfähigkeit und Stabilität erzielen.

Zu diesem Zweck können Sie eines der vielen online verfügbaren Tools nutzen. Ich empfehle Ihnen, mehr als eines zu verwenden, um die Ergebnisse zu vergleichen (schließlich handelt es sich immer noch um Tools, und ein Fehler bei der Auswertung ist immer möglich).

Es gibt viele Optionen, denken Sie nur an die bekannten GTMetrix, Pingdom Tools und WebPageTest.org. Diese sind alle sehr nützlich und können Ihnen einen einzigartigen Blickwinkel bieten, der auf einem eigenen Analysealgorithmus beruht.

Unabhängig davon, für welche Lösung Sie sich entscheiden, müssen Sie sich mit der Meinung von Google über Ihre Website auseinandersetzen, so dass das Scannen mit PageSpeedInsight für Ihre Optimierungsaktivitäten unerlässlich ist.

Pagespeed tool by Google

Dieses Tool ist besonders nützlich, wenn Sie eine in der Entwicklung befindliche Website testen möchten, die vielleicht noch lokal oder für den externen Zugriff gesperrt ist.

Schließlich können Sie die Registerkarte "Erfahrung" in der Google Search Console im Auge behalten, die Ihnen einen breiteren Überblick über Ihre Website und nicht nur über eine einzelne Seite bietet.

Experience tab of Google Search Console

Sobald Sie das für Sie geeignete Analysetool ermittelt haben, sollten Sie bedenken, dass jede Website eine andere Aktivität benötigt und es daher nicht möglich ist, im Voraus festzulegen, wie Sie vorgehen sollten.

Es gibt jedoch einige Fälle, die bei fast allen Websites gleich sind und die daher unabhängig von der verwendeten Technologie immer analysiert werden müssen.

Hier sind die wichtigsten Bereiche, auf die Sie sich bei der Optimierung für Core Web Vitals konzentrieren sollten:

  • Bilder

  • CSS und JavaScript

  • Schriftart

Bilder

Zu den wichtigsten Optimierungspraktiken für Bilder gehören:

  • Stellen Sie sicher, dass sie immer dann geladen werden, wenn sie benötigt werden, indem Sie eine Technologie namens Lazy-Loading verwenden. Auf diese Weise vermeiden Sie, dass alle Bilder auf Ihrer Seite ohne Grund in der ersten Phase des Renderings geladen werden, auch wenn sie noch nicht im Viewport sichtbar sind.

  • Es ist wichtig, dass Ihre Website Bilder in komprimierten und modernen Formaten bereitstellen kann, um den Nutzern das gleiche Erlebnis zu bieten, aber mit einer deutlich kürzeren Ladezeit. Beliebte Formate sind WebP und Avif, aber beachten Sie, dass nicht alle Browser beide Technologien unterstützen. Sie müssen also sicherstellen, dass für ältere Browser alternative Versionen bereitgestellt werden. Sie können sich jederzeit auf caniuse.com informieren, welche Browser (und welche Versionen) bestimmte Technologien unterstützen.

  • Wie bei anderen HTML-Elementen empfiehlt es sich, die Werte für Länge und Breite der Bilder explizit anzugeben, um einen Anstieg des CLS so weit wie möglich zu vermeiden.

CSS und JavaScript

Beachten Sie die folgenden CSS- und JavaScript-Tipps:

  • Stellen Sie sicher, dass Sie die Dateien so weit wie möglich minimieren, um ihre Größe zu verringern.

  • Testen Sie die Kombination von Dateien, um festzustellen, ob sich die Ladezeiten unter Beibehaltung der Funktionalität beschleunigen.

  • Extrahieren Sie das kritische CSS aus den Stylesheets und stellen Sie es vorrangig bereit. Es gibt viele Tools, die Ihnen dabei helfen können, den verwendeten Teil des Codes von demjenigen zu unterscheiden, der verwendet wird. Alternativ können Sie auch die Coverage-Funktion im Chrome Inspector nutzen.

  • Verschieben Sie die Ausführung unnötiger Skripte so weit wie möglich, indem Sie die Befehle delay oder defer verwenden oder sie einfach in die Fußzeile verschieben.

  • Laden Sie kritische Ressourcen bei Bedarf mit den Befehlen preload, prefetch oder pre-connect vor.

Schriftart

Auch die Schriftarten sind ein entscheidender Faktor für die Verbesserung der Leistung:

  • Wenn Sie Ihre Website optimieren (und gleichzeitig die GDPR-Vorschriften einhalten) möchten, sollten Sie Ihre Schriftarten lokal hosten (vor allem, wenn Ihre Website Google-Schriftarten verwendet).

  • Bevorzugen Sie variable Schriftarten gegenüber statischen, um mehr Funktionalität bei geringerer Ladezeit zu erhalten.

  • Stellen Sie sicher, dass Texte immer sichtbar sind, noch bevor die Schriftarten geladen werden, indem Sie die CSS-Funktion font-display verwenden.

Es gibt natürlich noch Dutzende weiterer Mikro-Optimierungen, aber wenn Sie sich auf diese Punkte konzentrieren, haben Sie bereits 95% der Arbeit hinter sich!

Core Web Vitals: Ein kommendes Update

Google ist ständig bemüht, seine Algorithmen und die Erfahrung im Web zu verbessern.

In diesem Zusammenhang wurde eine wichtige Neuigkeit angekündigt.

Schauen wir gemeinsam, was es ist.

Bye Bye FID, und willkommen bei INP

Ab März 2024 wird einer der Core Web Vitals durch einen neuen Parameter ersetzt werden.

Die erste Eingabeverzögerung wird nämlich durch die Interaktion zum nächsten Bild (INP) ersetzt werden.

The new Interaction to Next Paint

Fazit

Die Core Web Vitals von Google sind für die Suchmaschinenoptimierung und die Nutzererfahrung entscheidend geworden.

Durch die Überwachung und Optimierung Ihrer CLS-, LCP- und FID-Kennzahlen können Sie sicherstellen, dass Ihre Website in den Suchergebnissen gut platziert ist und eine hochwertige Nutzererfahrung bietet.

Nutzen Sie Search Console und andere Analysetools, um Probleme zu erkennen und Lösungen zu implementieren, die Ihnen helfen, die Leistung Ihrer Website und letztlich Ihre Position in den Suchergebnissen zu verbessern.

Erik Emanuelli

Artikel von:

Erik Emanuelli

Blogger

Erik Emanuelli ist seit 2010 im Bereich Online-Marketing tätig. Jetzt teilt er auf seiner Website, was er gelernt hat. Hier finden Sie weitere Informationen über SEO und Blogging.

Empfohlene Artikel

Die Entwicklung der SERP-Funktionen: Die wichtigsten Änderungen und wie man sich anpasst

Die Entwicklung der SERP-Funktionen: Die wichtigsten Änderungen und wie man sich anpasst

AI-Übersichten - So wirkt es sich auf Ihr SEO aus

AI-Übersichten - So wirkt es sich auf Ihr SEO aus

Verursacht der Google Merchant Centre-Parameter (srsltid) Verwüstung in Ihren SERPs?

Verursacht der Google Merchant Centre-Parameter (srsltid) Verwüstung in Ihren SERPs?