Blog

Alle Artikel

Wie wird die Webseite mit Core Web Vitals optimiert

Im Sommer 2021 hat Google ein Update für seinen Service zur Überprüfung der Download-Geschwindigkeit und der Webseite-Qualität – Core Web Vitals (CWV) – veröffentlicht. Dies ist einer von vielen Hunderten verschiedener Algorithmen, die das Ranking von Webseiten in den Suchergebnissen irgendwie beeinflussen, den organischen Traffic und die Conversion der Webseite erhöhen. Es basiert auf einer echten Benutzererfahrung, die es ermöglicht, die erhaltenen Daten zu verwenden, um die Qualität der Webseite zu verbessern und sie benutzerfreundlicher zu machen.

Wie die Webseite basierend auf den Metriken und Prinzipien des Algorithmus optimiert werden kann, werden wir in diesem Artikel betrachten.

Was ist Core Web Vitals

CWV ist eine Reihe von Metriken, die im Web Vitals Webseitenbewertungsservice von Google enthalten sind. Die Zahlen für diese Metriken sind für Seite-Inhaber und -Entwickler wichtig, da jede von ihnen eine spezifische Benutzererfahrung basierend auf den tatsächlichen Aktionen der Benutzer auf der Seite darstellt. Im Gegensatz zu vielen Google-Parametern, deren Funktionsweise nicht klar ist und nicht offengelegt wird, enthält Core Web Vitals Messwerte, die gemessen werden können. Google hat den Zugang zu Informationen darüber geöffnet, welche Indikatoren vom Algorithmus als optimal angesehen werden, damit Entwickler herausfinden können, wie eine Webseite optimiert werden kann.

Die wichtigsten Daten, auf die CWV achtet:

  • alle wichtigen Inhalte, Texte und Grafiken werden schnell im Browser visualisiert;
  • Erfassungsformulare und Schaltflächen werden sofort geladen;
  • alle Designelemente werden in den Desktop- und mobilen Versionen für verschiedene Gadgets korrekt angezeigt, “springen” nicht, überlappen den Hauptinhalt nicht.

Wozu dienen Core Web Vitals Metriken?

Jede Webseite, die den CWV-Algorithmus verwendet, wird Seite für Seite bewertet. Und damit eine Ressource den Test besteht und in den Suchergebnissen an hohen für die Suchanfrage relevanten Positionen erscheint, ist es notwendig, dass mindestens 75 % der Seiten (75 Perzentil) gute Indikatoren aufweisen. Andernfalls fängt die Webseite an, von der TOP zu fallen und kann vollständig daraus verschwinden. Die Bewertung basiert auf der monatlichen Benutzererfahrung. Je besser der Core Web Vitals Score ist, desto höher wird die Webseite auf der Suchseite erscheinen.

Welche Metriken sind in der CWV enthalten?

Bevor wir die Frage „Wie man eine Webseite optimiert?“ beantworten, betrachten wir die Core Web Vitals Metriken und ihre Parameter.

 Core Web Vitals enthalten:

  • Largest Contentful Paint (LCP) – Ladegeschwindigkeit von Basistext und visuellen Objekten.
  • First Input Delay (FID) – die Zeit, die der Benutzer verbringt, bevor er mit dem Inhalt interagiert (Klicken auf Links, Starten von Videos usw.).
  • Cumulative Layout Shift (CLS) – Kumulative Stabilität von Objekten oder Offset des Layouts.

Schauen wir uns jede Metrik genauer an.

LCP

Largest Contentful Paint (ungefähre Übersetzung aus dem Englischen: “Geschwindigkeit des Ladens des Hauptinhalts”) – Diese Metrik ermöglicht es Ihnen zu bewerten, wie schnell der Hauptinhalt, Text und Bild im Browser im Vergleich zu anderen Elementen geladen wird. Dies bezieht sich auf das Rendern des formatierten visuellen Objekts oder Textblocks, der derzeit im Ansichtsfenster sichtbar ist. Gleichzeitig umfasst die Größe des visuellen Objekts nicht Teile des Elements, die nicht auf dem Bildschirm angezeigt werden, und solche Elemente, bei denen es einen unsichtbaren Überlauf gibt. In Textfeldern wird nur das kleinste Rechteck gezählt, in dem die Textknoten platziert sind. Die in CSS angegebenen Werte für Objekte (zusätzliche Ränder, Elementränder und Auffüllung) wirken sich nicht auf die Indikatoren aus.

Bester LSP – weniger als zwei Sekunden. 2,5 Sekunden sind der optimale Indikator, der Durchschnitt beträgt 4 Sekunden, der schlechteste Indikator – 4 oder mehr Sekunden. Je kürzer das Laden dauert, desto größer ist die Wahrscheinlichkeit, dass der Benutzer auf der Seite bleibt und es für ihn nützlich ist.

FID

First Input Delay (ungefähre Übersetzung aus dem Englischen: “Verzögerungszeit vor der ersten Interaktion”) – eine Metrik, die die Zeit misst, die der Benutzer beim Laden einer Seite und der ersten Interaktion mit dem Inhalt verbringt. Nicht die Bearbeitungszeit des Ereignisses, sondern nur die “Verzögerung” davor. Je länger ein Nutzer auf das Laden interaktiver Elemente (Links, Schaltflächen, JavaScript-basierte Elemente, Video- oder Audioinhalte) wartet, desto höher ist das Risiko, dass er die Seiteverlässt.

Bestes FID-Ergebnis – 100 Millisekunden. 300 Millisekunden ist ein Durchschnitt (Verbesserung wird empfohlen), mehr als 300 ist ein schlechtes Ergebnis.

Es ist wichtig zu verstehen, dass diese Metrik nicht nur einen niedrigen oder hohen Wert hat, sondern auch ganz fehlen kann, da nicht alle Benutzer immer mit derselben Seite interagieren.

CLS

Cumulative Layout Shift ist eine Metrik, die die Zeit festlegt, während der jedes Element eine bestimmte Position auf der Seite einnimmt. Dies ist eine wichtige Kennzahl, die sich direkt auf die Wahrnehmung der Seite durch den Benutzer auswirkt. Je mehr sich bewegende Elemente, desto ärgerlicher ist es, insbesondere wenn der Benutzer beim Versuch, mit einem Element zu interagieren, auf ein ganz anderes Objekt klickt. Dies geschieht, wenn ein visuelles Objekt, beispielsweise ein Banner oder Widget eines Drittanbieters, am längsten zum Laden benötigt. Dies kann auf asynchrones Laden oder vorgefertigte DOM-Elemente zurückzuführen sein, die dynamisch über dem Layout hinzugefügt werden.

Bestes CLS-Ergebnis – 0,1 Sekunden. Bis zu 0,25 Sekunden ist ein Durchschnitt, alles länger ist ein schlechtes Ergebnis.

Erfolgt die Änderung von Layout und Position von Elementen auf Initiative des Benutzers oder wird die Verschiebung vom Benutzer intuitiv als mit seiner Handlung verbunden verstanden, so hat dies keinen Einfluss auf seine Wahrnehmung. Es ist schlecht, wenn der Benutzer für eine solche Verschiebung nicht bereit ist.

Mit welchen Tools können CWV-Metriken analysiert werden

Die Messtools von Core Web Vitals sind nach Anwendungstyp kategorisiert: unter realen und künstlichen Bedingungen.

Tools zur Analyse unter realen Bedingungen:

  • Core Web Vitals Report in der Search Console – Ein Bericht über die wichtigsten Internetmetriken.
  • Web Vitals – eine Chrome-Erweiterung, die Änderungen in Metriken dynamisch anzeigt.
  • Der Chrome User Experience Report – ein Bericht, der echte Daten für alle CWV-Metriken anzeigt.
  • PageSpeed ​​​​Insights – kombiniert theoretische Messungen und reale Metriken basierend auf der Benutzererfahrung.
  • JavaScript-Bibliothek von Web-Vitals mit Senden von Daten an Google Analytics – alle Indikatoren werden mit einfachen Web-APIs gemessen.

Tools zur Analyse unter künstlichen Bedingungen:

Wir empfehlen Ihnen, diese Tools bei der Entwicklung Ihrer Webseite zu verwenden, bevor Sie sie auf dem Hauptserver veröffentlichen, um Downloadprobleme zu finden und zu beheben.

So verbessern Sie Ihre Website gemäß CWV

Wie wird eine Webseite so optimiert, dass Google sie für Nutzeranfragen als relevant einstuft? Das Thema ist umfangreich, daher beschränken wir uns auf Empfehlungen, die dazu beitragen, die Ladezeiten der Webseite erheblich zu verkürzen und die Leistung aller CWV-Metriken zu verbessern.

Die Hauptprobleme, die sich auf die Qualität der Webseite und die Ladegeschwindigkeit auswirken, sind:

  • eine große Anzahl paralleler Anfragen;
  • Übertragung großer Datenmengen;
  • Layout-Offset und “fliegende” Layout-Elemente;
  • nicht modernisierte Hashing-Technologie;
  • Laden von Text, bevor alle verwendeten Schriftarten geladen sind.

Was muss gemacht werden, damit eine Website optimiert wird

  • Überprüfen von der Site-Performance auf Problembereiche;
  • Analyse der Daten für Desktop- und mobile Versionen;
  • Reduzieren der Dateigröße aller Bilder auf der Webseite mithilfe neuer Komprimierungsalgorithmen und neuer von Browsern unterstützter Formate (WebP, JPEG 2000, JPEG XR). Squoosh und Compressor.io sind beispielsweise großartige Tools, um Bilder ohne Qualitätsverlust zu komprimieren.
  • Codieren der richtigen Pixelmaße von Bildern und Inline-Elementen, um Verschiebungen im Layout zu vermeiden;
  •  Anpassung der Menge des in JavaScript und CSS geschriebenen Codes (zum Beispiel mit dem Brotli-Komprimierungsalgorithmus);
  • Implementieren von Lazy Loading für JS-Dateien und -Bilder, bei denen Elemente nicht alle auf einmal, sondern beim Scrollen der Seite geladen werden;
  • Vorabspeicherunh von kritischen Ressourcen mit dem Service Worker.

Achten Sie bei der Auswahl eines Servers zum Hosten Ihrer Seite auf die folgenden Indikatoren:

  • das Vorhandensein des Google Pagespeed-Moduls zur Optimierung von Bildern, Cascading Style Sheets und Javascript-Dateien;
  • Verfügbarkeit von SSD- und NVMe-SSD-Laufwerken mit hoher Lesegeschwindigkeit, um Verzögerungen beim Laden der Seite zu reduzieren;
  • Unterstützung des neuen HTTP/2-Protokolls zur gleichzeitigen Übertragung mehrerer Elemente;
  • Bereitstellung eines SSL-Sicherheitszertifikats;
  • angebundenes CDN-System basierend auf mehreren Servern mit gleichmäßiger Lastverteilung und erhöhter Site-Geschwindigkeit;
  • es ist besser, die Server des Anbieters aus derselben Region zu verwenden, auf die die Seite ausgerichtet ist;
  • Die Antwortzeit des Servers sollte weniger als 600 Millisekunden betragen.

Zusammenfassung

Im Verlauf des Artikels haben wir festgestellt, dass es sich bei Core Web Vitals von Google um eine Reihe von Indikatoren handelt, die die Qualität und Geschwindigkeit des Ladens einer Webseite basierend auf echten Benutzeraktionen beeinflussen. Die CWV enthält drei Metriken, die die Zeit zum Rendern der Hauptelemente auf der Seite, die Zeit vom Laden bis zur ersten Interaktion mit dem Inhalt der Webseite und die Bestimmung der visuellen Stabilität des Layouts während und nach dem Laden des Codes messen.

Im Gegensatz zu anderen Algorithmen, deren Funktionsweise normalerweise nicht offengelegt wird, können CWV-Metriken in Core Web Vitals in Search Console und PageSpeed ​​​​Insights untersucht werden. Und basierend auf diesen Daten können Entwickler die Metriken für jede Seite verbessern.

Mit der Einführung von Core Web Vitals wird neben hochwertigen und nützlichen Inhalten auch die technische Seite der Webseite eine wichtige Rolle für die SEO-Promotion spielen. Eine auf Basis von CWV-Berichten optimierte Webseite hat alle Chancen, in den Suchergebnissen an guten Positionen zu erscheinen.

Wenden Sie sich an New Line Technologies für Hilfe bei der Optimierung Ihrer Webseite für die Core Web Vitals-Algorithmen. Wir helfen Ihnen dabei, dass Ihre Webseite die besten Leistungsindikatoren in kürzester Zeit erreicht.

Keine Felder gefunden.
Tags: