Core Web Vitals – Was sind sie und wie können sie verbessert werden?

Google hat 2020 ein neues Programm namens Web Vitals eingeführt. Dies bezieht sich auf eine Technik, die eine Anleitung zu Qualitätssignalen bietet. Laut Google sind diese Metriken entscheidend für die Bereitstellung einer hervorragenden Benutzererfahrung im Web. Im Mai 2021 begann Google, Core Web Vitals als Metrik für das Suchranking auf seiner Plattform zu verwenden.

Was sind Core Web Vitals?

Core Web Vitals sind Metriken zur Messung der Benutzererfahrung auf einer Website. Sie messen, wie schnell Benutzer mit einer Website interagieren können und welche Ergebnisse sie basierend auf ihrer Suche erhalten. Core Web Vitals fungieren als Signale, die bewerten, wie einfach und nahtlos es für Website-Besucher ist, durch eine Website zu navigieren.

Wenn Sie Ihre Website und die Benutzererfahrung verbessern, wird Ihre Seitenerfahrung mit den Metriken von Core Web Vitals höher bewertet. Google identifiziert drei Core Web Vitals-Metriken, die Websitebesitzer kennen und integrieren müssen. Diese sind im Folgenden aufgezählt:

Laden: Auch als Largest Contentful Paint (LCP) bezeichnet, misst das Laden die Geschwindigkeit, mit der die größten Elemente geladen und auf einer Website angezeigt werden. Zu diesen Elementen gehören Animationen, Videos, Text, Bilder und andere.

Interaktivität: Google nennt dies Cumulative Layout Shift (CLS) und stellt sicher, dass die Seiten einer Website keine unerwarteten Funktionen oder verwirrenden Bewegungen aufweisen, die Benutzer beim Konsumieren der Inhalte Ihrer Website ablenken oder stören könnten.

Visuelle Stabilität: Dies wird technisch als First Input Delay (FID) bezeichnet und spiegelt die Reaktionsfähigkeit der Seiten einer Website wider, wenn Website-Besucher zum ersten Mal mit ihnen interagieren. FID misst auch die Geschwindigkeit, mit der ein Browser Ergebnisse für Benutzer auf Ihrer Website generieren kann.

So verbessern Sie Core Web Vitals auf Ihrer Website

Das erste, was Sie tun müssen, ist eine schnelle Website-Performance-Analyse durchzuführen, um zu sehen, wie Ihre Website in den wichtigsten Web-Vitals-Metriken abschneidet. Sie können für diese Analyse verschiedene Tools verwenden, darunter unter anderem die Google Search Console und Page Speed ​​Insights. Nachdem Sie die Analyse durchgeführt haben, stellen Sie möglicherweise fest, dass Sie einige der folgenden Tipps umsetzen müssen, um Ihre Website zu verbessern.

• Reduzieren Sie die Ausführung von JavaScript

Eine schlechte FID-Bewertung bedeutet, dass Ihre Website länger als 300 Millisekunden mit Besuchern interagiert. Wenn Sie Ihre JavaScript-Ausführung reduzieren und optimieren, verkürzt dies den Zeitrahmen zwischen der Ausführung von JavaScript-Codes durch Ihren Browser. Das Ergebnis davon ist eine verkürzte Ausführungszeit. Google empfiehlt, nicht verwendetes JavaScript zurückzustellen, um die Ausführung zu reduzieren. Führen Sie die folgenden Schritte aus, um festzustellen, ob auf Ihrer Website unbenutztes JS vorhanden ist:

• Gehen Sie zu Ihrer Website und klicken Sie mit der rechten Maustaste auf eine beliebige Seite und wählen Sie dann „Inspizieren“.

• Klicken Sie auf die Registerkarte „Quellen“ und aktivieren Sie die drei Punkte unten. Fügen Sie ein „Coverage“-Tool hinzu und klicken Sie auf die Ladefunktion. Warten Sie, bis der Ladevorgang abgeschlossen ist, und Sie können das Volumen des nicht verwendeten JS auf Ihrer Seite sehen.

Mit diesem Wissen können Sie beginnen, die JS-Ausführung zu reduzieren. Eine Möglichkeit, die Ausführung zu reduzieren, ist die Verwendung von Code-Splitting. Wie funktioniert das? Zerlegen Sie das JavaScript-Bundle in kleinere Teile. Gebündelte JS sind kombinierte Dateien, die gebündelt werden, um zu verhindern, dass zu viele HTTP-Anforderungen zum Laden einer Webseite erforderlich sind.

Bilder komprimieren und optimieren

Für viele Websites sind Bilder die größten Elemente auf ihren Seiten. Um sicherzustellen, dass Ihre Website die Lademetriken erfüllt, sollten Sie die Bilder auf Ihrer Website optimieren. Damit wird Ihre Webseite leichter und die Ladegeschwindigkeit deutlich erhöht.

Eine übersichtlichere Seite verbessert auch die Benutzererfahrung, den LCP-Score und die Platzierungen in den Suchmaschinenergebnissen. Um die Seitengröße zu reduzieren, komprimieren Sie Bilder mit einem Tool wie Tiny JPG. Die Reduzierung der Gesamtgröße Ihrer Seite wirkt sich nicht auf die Auflösung und Qualität aus, verbessert jedoch die LCP-Ergebnisse Ihrer Website.

Wir empfehlen Ihnen, das PNG-Format für Grafiken und das JPG-Format für Bilder im Querformat zu verwenden. Neben dem Komprimieren von Bildern können Sie auch CDN (Content Delivery Network) für die Bilder Ihrer Website aktivieren.

Content Delivery Network ist eine Gruppe von Servern auf der ganzen Welt, die Inhalte aus dem Internet speichern. Diese Server sind über verschiedene Standorte verteilt; Bilder können schneller vom Server geliefert werden, der dem Benutzer am nächsten ist.

Implementieren Sie Lazy Loading

Das Implementieren von Lazy Loading ist sehr wichtig, wenn Sie Bilder auf Ihrer Website anzeigen. Wenn Sie diese Technik verwenden, werden Ihr zentraler Web-Vitals-Score und die Benutzererfahrung auf Ihrer Website nicht negativ beeinflusst. Also, was ist Lazy Loading? Lazy Loading ermöglicht es Ihrer Website, Bilder im selben Moment zu laden, in dem ein Benutzer die Seite nach unten scrollt. Dadurch wird sichergestellt, dass die Ladegeschwindigkeit Ihrer Website nicht beeinträchtigt wird und Sie eine Top-LCP-Punktzahl erreichen können. Lazy Loading hat viele Vorteile. Sie beinhalten:

• Verbesserte Site-Performance

• Einschränkung der Bandbreitennutzung

• Verbesserte SEO auf der Website

• Halten Sie die Besucher der Website und minimieren Sie die Absprungrate

Wenn Sie eine Website mit Seiten betreiben, die viele Videos, Animationen, Bilder und andere schwere Elemente enthalten, ist es wichtig, Lazy Loading zu verwenden. Nachdem Sie diesen Tipp implementiert haben, können Sie Ihren vorherigen LCP-Score mit dem neuen vergleichen, den Sie nach der Implementierung von Lazy Loading erhalten.

Verwenden Sie geeignete Abmessungen für Einbettungen und Bilder

Ein CLS-Score von mehr als 0,1 gilt als schlecht. Die Hauptschuldigen für eine so schlechte Punktzahl sind schwere Elemente wie Einbettungen, Anzeigen und Bilder ohne Dimension. Um den CLS-Score Ihrer Website zu verbessern, achten Sie auf die Dimensionen. Wenn Sie genaue Breite und Höhe für Bilder und Einbettungen verwenden, wird es für den Browser einfacher, während des Ladevorgangs den richtigen Platz auf der Seite zuzuweisen. Stellen Sie sicher, dass Sie die richtigen Abmessungen für Bilder und Einbettungen festlegen, wenn Sie YouTube-Videos in Ihre Website einfügen. So ändern Sie die Größe von Videos von YouTube, um sie auf Ihrer Website anzuzeigen.

• Gehen Sie zu YouTube und öffnen Sie das Video, das Sie in Ihre Website einbetten möchten.

• Suchen Sie nach der Teilen-Schaltfläche und wählen Sie die Option <> Einbetten.

• Sie sehen alle Details zum Video, einschließlich der Dimension. Kopieren Sie den Code und fügen Sie ihn in das Backend Ihrer Website ein. Dadurch wird es auf die richtige Breite und Höhe geändert, damit es richtig in Ihre Website passt.

Abschließende Gedanken

Dies sind die wichtigsten Tipps, die Sie verwenden können, um die wichtigsten Web-Vitals auf Ihrer Website zu verbessern. In diesem Beitrag haben wir uns die Grundlagen der wichtigsten Web-Vitals und Tipps angesehen, die Sie anwenden können, um Ihre Punktzahlen zu verbessern. Verbesserte Ergebnisse bedeuten, dass Ihre Rankings in den Suchergebnissen steigen und die Absprungrate auf Ihrer Website erheblich steigt.