Was sind die Core Web Vitals (und wie können Sie sie verbessern)?

Websites stehen mehr denn je unter Leistungsdruck. Benutzer erwarten nicht nur schnelle, reaktionsschnelle Erfahrungen, sondern Suchmaschinen verwenden jetzt die Seitengeschwindigkeit als Rankingfaktor.

Um Webmastern dabei zu helfen, ihre Websites auf Geschwindigkeit zu optimieren, hat Google im Mai 2020 die Core Web Vitals eingeführt: eine Reihe von Metriken, die die Leistung wichtiger Aspekte der Benutzererfahrung messen. In diesem Artikel werfen wir einen Blick darauf, was die Core Web Vitals sind und wie Sie sie verbessern können.

Google Page Experience Update für Desktop wird jetzt unter https://t.co/gQn2cwDkiz eingeführt

– Barry Schwartz (@rustybrick) 22. Februar 2022

Tauchen wir ein!

Was sind die 3 zentralen Web Vitals-Metriken?

Core Web Vitals ist eine Initiative von Google, die Publishern und Website-Eigentümern helfen soll, die Qualität ihrer Benutzererfahrung (UX) zu messen und zu ermitteln, wo sie Verbesserungen vornehmen müssen.

Die Initiative umfasst drei Core Web Vitals, die sich auf Laden, Interaktivität und visuelle Stabilität konzentrieren: Largest Contentful Paint, Cumulative Layout Shift und First Input Delay.

Größte zufriedene Farbe

Largest Contentful Paint (LCP) ist eine Leistungskennzahl, die misst, wie lange es dauert, bis der Hauptinhalt einer Webseite geladen ist. Der Hauptinhalt wird normalerweise als das größte Bild- oder Textelement auf der Seite definiert.

LCP ist eine von mehreren Metriken, die von Google verwendet werden, um die Leistung einer Webseite zu bewerten.

Im Allgemeinen gelten Seiten mit einer LCP-Zeit von weniger als 2,5 Sekunden als gut, während solche mit einer LCP-Zeit von mehr als 4 Sekunden als schlecht angesehen werden. Seiten mit einer LCP-Zeit von mehr als 10 Sekunden gelten als sehr schlecht.

Um das LCP einer Webseite zu verbessern, müssen sich Designer und Entwickler darauf konzentrieren, sicherzustellen, dass der Hauptinhalt schnell und effizient geladen wird. Dies kann durch eine Vielzahl von Methoden erreicht werden, wie z. B. die Verwendung von responsivem Design, die Optimierung von Bildern und die Minimierung von Code.

Kumulative Layoutverschiebung

Viele Menschen haben das frustrierende Phänomen erlebt, auf einen Link oder eine Schaltfläche auf einer Website zu klicken, nur um sie in letzter Sekunde unter ihrem Cursor verschwinden zu lassen.

Dieses als kumulative Layoutverschiebung (CLS) bezeichnete Phänomen ist ein Maß dafür, wie stark der Inhalt die Position ändert, wenn ein Benutzer mit einer Seite interagiert. CLS ist ein Problem, weil es dazu führen kann, dass Benutzer auf das Falsche klicken oder einfach aufgeben und die Seite ganz verlassen.

Es gibt mehrere Möglichkeiten, CLS zu optimieren, aber vielleicht ist die effektivste, sicherzustellen, dass alle Seitenelemente die richtige Größe und Position haben, bevor die Seite geladen wird. Auf diese Weise können Sie verhindern, dass sich Inhalte verschieben, wenn die Benutzer mit der Seite interagieren.

Erste Eingangsverzögerung

First Input Delay (FID) ist ein Maß dafür, wie lange es dauert, bis ein Benutzer zum ersten Mal mit einer Seite interagiert. Es ist eine wichtige Metrik, um die Reaktionsfähigkeit einer Seite und die allgemeine Benutzererfahrung auf einer Website zu messen.

Ein guter FID-Score zeigt an, dass Benutzer schnell und einfach mit der Seite interagieren können, während ein schlechter FID-Score darauf hindeutet, dass es eine gewisse Verzögerung bei der Eingabe gibt, die zu Frustration führt.

Es gibt viele Faktoren, die zu einem schlechten FID-Score beitragen können, aber die häufigste Ursache ist die Ausführungszeit von JavaScript. Wenn der JavaScript-Code auf der Seite zu lange zum Ausführen braucht, kann dies die Eingabe des Benutzers verzögern. Dies kann für tatsächliche Benutzer frustrierend sein und dazu führen, dass sie die Seite verlassen, bevor sie die Möglichkeit hatten, vollständig mit ihr zu interagieren.

Um die FID-Scores zu verbessern, müssen sich Entwickler darauf konzentrieren, die JavaScript-Ausführungszeit zu reduzieren.

Es gibt auch einige zusätzliche Vitals

• Time To First Byte (TTFB) : Time to First Byte ist die Zeitspanne, die ein Browser benötigt, um das erste Datenbyte von einem Server zu empfangen. Die benötigte Zeit kann von mehreren Faktoren beeinflusst werden, darunter die Entfernung zwischen Browser und Server, die Größe der Datenpakete und die Geschwindigkeit der Verbindung.
• First Contentful Paint (FCP) : First Contentful Paint ist die Zeit, die ein Browser benötigt, um den ersten Inhalt einer Seite anzuzeigen. Dieser Inhalt kann ein Bild, Text oder ein anderes Element sein. Mit anderen Worten, es ist die wahrgenommene Ladezeit.
• Gesamtblockierzeit (TBT) : Die Gesamtblockierzeit ist die Zeit, die eine Website benötigt, um von First Contentful Paint vollständig interaktiv zu werden.
• Time To Interactive (TTI) : Time To Interactive ist die Zeit, die eine Seite benötigt, um vollständig interaktiv zu werden. Dazu gehört die Möglichkeit, auf Benutzereingaben zu reagieren und neue Inhalte als Reaktion auf Benutzerinteraktionen zu laden.

Core Web Vitals steht unter dem Oberbegriff Google Page Experience, der noch weitere Aspekte umfasst:

• Mobile Friendliness: Dies bezieht sich darauf, wie einfach es für Benutzer ist, mit Ihrer Website auf mobilen Geräten zu interagieren. Eine Website, die nicht für Mobilgeräte optimiert ist, kann auf einem kleineren Bildschirm schwierig zu verwenden sein und Benutzer möglicherweise sogar daran hindern, auf bestimmte Funktionen zuzugreifen.
• HTTPS: Dies bezieht sich darauf, ob Ihre Website eine sichere Verbindung verwendet. Websites, die HTTPS verwenden, werden mit geringerer Wahrscheinlichkeit von Dritten abgefangen und gelten daher als sicherer.
• Aufdringliche Interstitials: Dies sind Pop-ups oder andere Werbeformen, die aufdringlich und störend sein können, insbesondere auf Mobilgeräten. Sie können oft schwierig zu schließen sein und verhindern, dass Benutzer die vorhandenen Inhalte sehen, nach denen sie gesucht haben.

Beeinflussen Core Web Vitals das Ranking?

Ja. Web Core Vitals sind ein Rankingfaktor. Was viele Menschen nicht wissen, ist, dass sie auch einen direkten Einfluss auf das Ranking Ihrer Website haben, und zwar seit ziemlich kurzer Zeit. Core Web Vitals Score ist nur eine Metrik für sich. Trotzdem ist es eine ziemlich gute Metrik, und die Auswirkungen, zu denen sie führen kann, sind manchmal mehr als genug, um grundlegende Website-Probleme zu beheben.

Das Update für die Seitenerfahrung wird jetzt langsam für den Desktop eingeführt. Es wird bis Ende März 2022 abgeschlossen sein. Erfahren Sie mehr über das Update: https://t.co/FQvMx3Ymaf

– Google Search Central (@googlesearchc) 22. Februar 2022

Core Web Vitals messen ein paar verschiedene Dinge, die sich alle zum Seitenerlebnis summieren.

Warum sind Core Web Vitals also wichtig?

Mehr organischer Traffic

Die Core Web Vitals-Ergebnisse einer Website sind einer der vielen Faktoren, die Google bei der Bestimmung des Rankings einer Website in den Suchergebnissen berücksichtigt. Das bedeutet, dass ein guter Core Web Vital Score zu mehr Traffic von Google führen kann. Und mehr Traffic bedeutet mehr Leads und mehr Chancen, sie in zahlende Kunden umzuwandeln.

Überlegene UX

Die Benutzererfahrung (UX) ist ein wesentlicher Faktor für den Erfolg jeder Website. Es bestimmt, ob Benutzer auf Ihrer Website bleiben oder frustriert wegklicken.

Laut HubSpot verlassen 93 % der Kunden die Seite, wenn sie nicht schnell genug lädt. Und Core Web Vitals sind ein direktes Maß für die Seitengeschwindigkeit und ein indirektes für UX. Angesichts der Bedeutung von UX ist es wichtig sicherzustellen, dass Ihre gesamte Website schnell und reaktionsschnell ist.

Verbesserte Konversionsrate

Es steht außer Frage, dass es für Unternehmen wichtig ist, eine Website zu haben, die schnell und reibungslos lädt. Schließlich wechseln Benutzer wahrscheinlich zu einer anderen Website, wenn sie zu lange auf das Laden einer Seite warten müssen. Was viele Websitebesitzer jedoch nicht erkennen, ist, dass die richtigen Core Web Vitals Ihre Konversionsrate tatsächlich verbessern können.

Wie? Nun, es hat alles mit der Benutzererfahrung zu tun. Wenn eine Website schnell und effizient geladen wird, bleiben Benutzer eher in der Nähe und erkunden sie. Es ist auch wahrscheinlicher, dass sie einen Kauf tätigen oder eine andere gewünschte Aktion ausführen. Auf der anderen Seite, wenn eine Website träge und frustrierend zu bedienen ist, ist es viel unwahrscheinlicher, dass Benutzer konvertieren.

Einfach ausgedrückt, richtige Core Web Vitals sind unerlässlich, um ein positives Seitenerlebnis zu bieten – und ein positives Benutzererlebnis ist unerlässlich, um Conversions zu steigern.

Wie überprüfe ich meine Core Web Vitals bei Google?

Das Messen von Core Web Vitals ist ziemlich einfach.

Zunächst einmal können Sie mit der Google Search Console beginnen:

Google Search Console

Um auf Core Web Vitals von GSC zuzugreifen, geben Sie Ihr Dashboard ein und klicken Sie hier:

Sie erhalten zwei Berichte, einen für Mobilgeräte:

Der andere für den Desktop:

Diese beiden Berichte unterscheiden sich fast immer, da unterschiedliche Prinzipien für das Design und die Funktionalität von Mobilgeräten und Desktops gelten. Wenn Sie den Core Web Vitals-Bericht öffnen, wird Ihnen ein detailliertes Diagramm der Fehler angezeigt:

Wenn Sie auf die Details klicken, sehen Sie, welche URLs Google als nicht benutzerfreundlich einstuft.

Es gibt auch eine zweite Möglichkeit, Core Web Vitals zu messen, nämlich PageSpeed ​​Insights.

PageSpeed-Einblicke

Der Unterschied besteht hier darin, dass Sie auf einen Bericht für jede Website zugreifen können, nicht nur für die, auf die Sie GSC-Zugriff haben. Es zeigt Ihnen jedoch nicht, welche URLs in einer gesamten Domain verbessert werden müssen. Sie müssten einzeln gehen, was viel zu mühsam ist. PageSpeed ​​Insights bietet dieselbe Datenquelle, den Chrome User Experience Report.

PageSpeed ​​Insights wird hauptsächlich für einen tieferen Blick auf bestimmte URLs verwendet, da die Google Search Console Ihnen nur ein größeres Bild davon zeigt, welche Seiten repariert werden müssen.

Die Search Console leitet Sie sogar zu PageSpeed ​​Insights weiter:

Und hier ist, was nach dem Betreten der Website angezeigt wird:

Ein vollständiger Bericht darüber, was falsch ist.

Weiter unten finden Sie Möglichkeiten:

PageSpeed ​​Insights schätzt, wie viel Sie gewinnen könnten, wenn Sie die angezeigten Probleme beheben. Dennoch ist das alles eine grobe Schätzung, basierend auf den Richtlinien für eine durchschnittliche Website laut Google. Es spiegelt die Benutzererfahrung nicht vollständig wider, kann aber ein guter Ausgangspunkt für eine Analyse sein.

Weiter unten sind Diagnosen:

Und hier können Sie sehen, welches genaue Element im Code Probleme verursacht.

Jetzt, da Sie wissen, wie Sie darauf zugreifen können, fragen Sie sich vielleicht, wie Sie Core Web Vitals für Ihre Website verbessern können.

Hier ist, was Sie tun können!

Was ist Core Web Vitals-Optimierung?

Die Optimierung von Core Web Vitals hängt vollständig von der Website und ihren spezifischen Problemen ab. Lassen Sie uns dennoch einige der häufigsten behandelnund reparierbare .

Größte zufriedene Farbe

Bildoptimierung

Bilder sind ein wesentlicher Bestandteil jeder Webseite, aber sie können auch eine Quelle langsamer Ladezeiten sein. Eine Möglichkeit, dies zu beheben, besteht darin, Ihre Bilder zu optimieren, um sicherzustellen, dass sie schnell und effizient geladen werden. Ein Format, das sich besonders gut für Bilder von Webseiten eignet, ist webp. Webp-Bilder sind in der Regel kleiner als andere Bildformate, sodass sie schneller geladen werden. Eine weitere Option ist die Verwendung des MP4-Formats für Ihre Video-Assets. MP4-Videodateien sind leichter als andere Videodateiformate, sodass sie auf Webseiten schneller geladen werden.

WP-Plugins:

• Optimus
• Schmusen
• EWWW Bildoptimierer

Vorabladen von Ressourcen

Eine Möglichkeit, die Leistung einer Website zu verbessern, besteht darin, Ressourcen vorab zu laden. Das bedeutet, dass der HTML-Code den Browser anweisen kann, bestimmte Ressourcen (z. B. Bilder oder Skripte) zu laden, bevor sie benötigt werden. Auf diese Weise kann der Browser seine Zeit und Ressourcen effizienter nutzen, was zu einer insgesamt schnelleren Website führt.

WP-Plugins:

• Automatisch optimieren
• Leistungsangelegenheiten

Rendering-Blockierung

Render-Blocking ist ein Begriff, der verwendet wird, um die Aktionen bestimmter Elemente auf einer Webseite zu beschreiben, die verhindern, dass die Seite richtig gerendert wird. Diese Elemente können unter anderem JavaScript- und CSS-Dateien enthalten. Das Problem beim Render-Blocking besteht darin, dass es dazu führen kann, dass die Seite langsam oder gar nicht geladen wird.

Es gibt einige Möglichkeiten, Render-Blocking zu beheben.

• Eine besteht darin, kleine JavaScript- und CSS-Dateien einzubetten. Dies bedeutet, dass der Code direkt in die HTML-Datei eingefügt wird, anstatt auf externe Dateien zu verweisen.
• Eine andere Möglichkeit, die Renderblockierung zu beheben, besteht darin, das Laden von JavaScript-Dateien zu verschieben, bis die Seite gerendert wurde. Dies kann mit dem Attribut async oder defer erfolgen.
• Schließlich ist eine weitere Möglichkeit, Render-Blocking zu reduzieren, die CSS-Bereitstellung zu optimieren. Das bedeutet, dass für jede Seite nur das notwendige CSS geladen wird.

WP-Plugins:

• Automatisch optimieren
• WP-Rakete
• WP NitroPack

Kumulative Layoutverschiebung

Platz für Einbettungen, Iframes und Anzeigen

Wenn eine Website Assets wie Videos, Bilder oder Anzeigen enthält, ist es wichtig, ihnen auf der Seite genügend Platz zuzuweisen. Dadurch wird sichergestellt, dass das Seitenlayout nicht unterbrochen wird, wenn das Asset geladen wird, und hilft, den sogenannten Cumulative Layout Shift (CLS) zu verhindern. CLS ist ein Maß dafür, wie stark eine Seite „wackelt“, wenn Inhalte geladen werden, und es kann für Benutzer sehr abschreckend sein. Indem sie im Voraus Speicherplatz für Assets reservieren, können Webentwickler dazu beitragen, CLS zu reduzieren und ein reibungsloseres und benutzerorientierteres Erlebnis zu schaffen.

Fügen Sie Abmessungen zu Bildern hinzu

Einfach ausgedrückt hilft das Hinzufügen von Dimensionen zu Ihren Bildern bei Cumulative Layout Shift (CLS). Indem Sie sicherstellen, dass Ihre Bilder die richtigen Breiten- und Höhenabmessungen haben, können Sie vermeiden, dass sie herumgestoßen werden, wenn sich das Seitenlayout ändert. Dies ist besonders wichtig für Bilder, die sich nahe oder oberhalb der Falte befinden, da sie eher von CLS betroffen sind.

Schriftarten vorladen

Selbst die am besten gestaltete Website kann unter Cumulative Layout Shift (CLS) leiden. Dies geschieht häufig, wenn Webfonts nicht richtig geladen werden, was zu einem „Aufblitzen von nicht formatiertem Text“ (FOUT) oder einem „Aufblitzen von unsichtbarem Text“ (FOIT) führt. Während FOUT im Allgemeinen als ästhetisch störender angesehen wird, kann FOIT tatsächlich schädlicher für die Benutzererfahrung sein, da es dazu führen kann, dass Inhalte auf der Seite neu angeordnet werden. Das Vorladen von Schriftarten hilft, sowohl FOUT als auch FOIT zu vermeiden, indem sichergestellt wird, dass die Webschriftarten geladen werden, bevor sie benötigt werden. Dies verbessert nicht nur die visuelle Stabilität der Seite, sondern verringert auch die Wahrscheinlichkeit, dass Inhalte während des Ladens verschoben werden.

Erste Eingangsverzögerung

Asynchrone Aufgaben

Einer der wichtigsten Gründe für die Verwendung asynchroner JavaScript-Aufgaben besteht darin, das Blockieren der Benutzeroberfläche zu vermeiden. Wenn die Ausführung einer JavaScript-Aufgabe zu lange dauert, kann die Aktualisierung der Benutzeroberfläche blockiert werden, was zu einer schlechten Benutzererfahrung führt. Asynchrone Aufgaben ermöglichen es der Benutzeroberfläche, reaktionsfähig zu bleiben, indem die Aufgabe im Hintergrund ausgeführt wird.

Faules Laden

Lazy Loading ist eine gängige Technik zur Verbesserung der Websiteleistung, indem Inhalte nur dann geladen werden, wenn sie benötigt werden. Dies kann zwar in einigen Fällen effektiv sein, kann aber auch dazu führen, dass sich die First Input Delay erhöht, da der Browser warten muss, bis der Inhalt geladen ist, bevor er verwendet werden kann. Dies gilt insbesondere, wenn sich der Inhalt unterhalb des Falzes befindet, da Benutzer oft nach unten scrollen müssen, um ihn zu sehen.

Serverseitige Inhalte

Indem Sie den Inhalt auf dem Server vorab rendern, können Sie sicherstellen, dass der Browser die Informationen hat, die er benötigt, sobald der Benutzer mit der Seite interagiert. Dies kann dazu beitragen, sowohl den FID als auch die wahrgenommene Gesamtleistung zu verbessern. Darüber hinaus kann die Generierung serverseitiger Inhalte auch dazu beitragen, die Netzwerklatenz zu reduzieren und die Leistung weiter zu verbessern.

Code von Drittanbietern

Code von Drittanbietern kann erhebliche Auswirkungen auf die First Input Delay (FID) haben. Dies liegt daran, dass Code von Drittanbietern häufig synchron ausgeführt wird, was den Haupt-Thread blockieren und die Verarbeitung von Eingaben verzögern kann. Darüber hinaus kann Code von Drittanbietern neue JavaScript-Abhängigkeiten einführen, die geladen und analysiert werden müssen, bevor sie ausgeführt werden können. Dies kann die Eingangsverarbeitung weiter verzögern und die FID erhöhen. Schließlich kann Code von Drittanbietern ineffiziente Algorithmen verwenden, die viele Ressourcen verbrauchen und dazu führen, dass der Hauptthread festgefahren wird. Dies kann auch zu einem erhöhten FID führen. Statt Ressourcen von Drittanbietern priorisieren Sie immer Ihre eigenen.

Fazit

Die Weboptimierung war schon immer ein Balanceakt zwischen den drei Grundpfeilern von SEO: Inhalt, technisches SEO und Benutzererfahrung. Die neue Core Web Vitals-Initiative von Google rückt die Benutzererfahrung als wichtigen Ranking-Faktor in den Vordergrund.

Die Core Web Vitals sind eine Reihe von Metriken, die die Geschwindigkeit und Stabilität einer Website messen. Google hat gesagt, dass diese Metriken im Mai 2021 zu einem wichtigen Ranking-Faktor geworden sind. Während einige Webmaster sich bemühen, Änderungen an ihren Websites vorzunehmen, gehen andere entspannter vor.

Schließlich sind die Core Web Vitals nur ein weiteres Signal, mit dem Google die User Experience misst. Und wie wir alle wissen, kann die Benutzererfahrung immer verbessert werden. Unabhängig davon, wo Ihre Website auf der Core Web Vitals-Skala rangiert, gibt es immer Raum für Verbesserungen.