Core Web Vitals: Was sind und wie man sie auf 5 einfache Arten verbessern kann

Core Web Vitals sind Seiteninteraktionsmarker, die das Benutzererlebnis einer Website quantifizieren. Kurz gesagt, zeigen diese Indikatoren an, wie schnell die Verbraucher mit Ihrer Website interagieren können und welche Art von Ergebnis sie erhalten werden. Diese Kennzahlen geben auch an, wie einfach es für die Nutzer ist, auf der Website zu navigieren.

Ihre Seitenerfahrungswerte werden sich verbessern, wenn Sie Ihre Benutzererfahrung und Ihre Website allgemein zu verbessern.

Welches sind die drei wichtigsten Metriken von Core Web Vitals?

Der Satz Core Web Vitals enthält drei Parameter:

1. Größte inhaltsreiche Farbe (LCP)

Die Rendering-Zeit der größten Teile, die einer Population angezeigt werden, ist eine Core Web Vitals-Messung, die Website-Manager verwenden können, um die Benutzerfreundlichkeit zu bewerten und festzustellen, ob ein Benutzer eine Seite als nützlich empfindet.

Um ein angenehmes Nutzererlebnis zu bieten, müssen die Seiten schnell geladen werden. Die Ladezeit einer Seite ist nicht nur für ein gutes Nutzererlebnis von Bedeutung, sondern eine Seite, die schnell reagiert, hat auch bessere Chancen auf eine höhere Platzierung in Google. Außerdem hat eine schnelle Ladezeit im Vergleich zu einer Seite mit schlechten Ladezeiten nachweislich Auswirkungen auf die Aufmerksamkeit und das Engagement.

Wie kann man LCP in Core Web Vitals verbessern?

• Beginnen Sie damit, alle unnötigen Skripte von Drittanbietern zu entfernen: Laut unserer jüngsten Pagespeed-Studie verlangsamt jedes Skript eines Drittanbieters eine Seite um 34 Millisekunden.
• Aktualisieren Sie Ihren Webhosting-Dienst: Insgesamt bedeutet ein besseres Hosting schnellere Ladezeiten (einschließlich LCP).
• einrichten träges Laden: Lazy Loading verhindert, dass Bilder geladen werden, bis der Benutzer auf der Seite nach unten scrollt. Dadurch können Sie LCP viel schneller erreichen.
• Erwägen Sie, die großen Seitenelemente zu entfernen: Google PageSpeed Insights kann Ihnen sagen, ob ein Element auf Ihrer Seite das LCP verlangsamt.

2. Kumulative Layout-Verschiebung (CLS)

Um das Engagement und den Umsatz zu steigern, sollten Website-Betreiber den Besuchern die Interaktion mit Hyperlinks und Symbolen auf ihren Seiten so leicht wie möglich machen. Die kumulative Layout-Verschiebung ist eine Statistik, die Links oder Schaltflächen erkennt, die sich nach dem Laden einer Webseite verschieben, und die angibt, wie schwierig es für Besucher ist, mit Elementen auf Ihrer Website zu interagieren, nachdem die Seite gerendert wurde.

Ein gutes Nutzererlebnis erfordert ein gutes UX und Design, und ein Kunde wird unruhig, wenn die Website eines Unternehmens Elemente wechselt, während er liest. CLS unterstützt Programmierer bei der Feststellung, ob sich Bilder oder Hyperlinks auf einer Website verschieben. So können Urheberrechtsinhaber die Zugänglichkeit verbessern, die Klickraten erhöhen und den Online-Umsatz steigern.

CLS vergleicht die Ausgangspunkte von Komponenten im sichtbaren Fenster über zwei angezeigte Frames hinweg. Dieser Indikator hilft Website-Betreibern, festzustellen, ob Materialien wie Text, Symbole und Werbung verschoben werden, während eine Person den Inhalt einer bestimmten Seite liest.

Wie kann die FID in Core Web Vitals verbessert werden?

• JavaScript sollte minimal sein: Es ist für Besucher fast schwierig, sich mit einer Seite zu beschäftigen, während der Browser JS lädt. Daher ist es für den FID entscheidend, JS auf Ihrer Website zu minimieren oder zu verschieben.
• Eliminieren Sie alle Skripte von Drittanbietern, die nicht unbedingt erforderlich sind: Skripte von Drittanbietern (wie z. B. Google Analytics, Heatmaps usw.) können sich negativ auf die FID auswirken, ebenso wie sie sich auf FCP auswirken können.
• Nutzen Sie den Vorrat Ihres Browsers: Dadurch wird das Laden von Inhalten auf Ihrer Seite beschleunigt. Dadurch kann der Browser Ihres Nutzers die JS-Ladevorgänge noch schneller abschließen.

3. Erste Eingabeverzögerung (FID)

Die Verbraucher wünschen sich Seiten, die schnell geladen werden und mit denen man im Internet leicht interagieren kann. First Input Delay ist eine Metrik, die Interaktionslatenzen analysiert (die Zeit, die eine Website-Komponente benötigt, um auf die Eingabe eines Nutzers zu reagieren), um Seiten zu entdecken, die Ihr Publikum frustrieren könnten.

Um ihren Zuschauern Material anzubieten, verwenden moderne Websites eine Vielzahl von aufkommenden Lösungen und dynamischen Zuweisungs-Widgets. Diese Form von Material kann zwar die Bereitstellung von Inhalten verbessern, sie kann aber auch zu Verzögerungen führen und die Nutzer zwingen, auf die Antwort ihres Browsers auf ihre Anfragen zu warten.

Um das Engagement und die Benutzerfreundlichkeit der gesamten Website zu steigern, müssen die Entwickler die Zeit, die die Kunden mit dem Warten auf eine Antwort auf ihre Aktivitäten verbringen, begrenzen.

Wie minimiert man FID in Core Web Vitals?

• Verwenden Sie für alle Medien (Videos, Fotos, GIFs, Infografiken usw.) die folgenden Abmessungen der Eigenschaft Größe: Auf diese Weise weiß der Browser des Benutzers genau, wie viel Speicherplatz die Komponente auf der Seite belegen wird. Er ändert sich erst dann, wenn die Seite vollständig geladen ist.
• Stellen Sie sicher, dass alle Anzeigenelemente einen eigenen Platz haben: Andernfalls können sie unerwartet auf der Website erscheinen und Informationen nach links, rechts oder an den Rand drängen.
• Fügen Sie unterhalb des Falzes neue UI-Elemente hinzu: Auf diese Weise werden Inhalte, von denen der Benutzer "erwartet", dass sie an Ort und Stelle bleiben, nicht nach unten gedrückt.

Möglichkeiten zur Verbesserung von Core Web Vitals

Sie sollten eine kurze Bewertung der Internet-Performance-Überwachung durchführen, um zu sehen, wie Ihre Website in Bezug auf die wichtigsten Web-Vitalien funktioniert. Sie können dies mit Google-Tools wie Search Console und Page Speed Insights sowie mit unabhängigen Tools wie GTmetrix.

Darüber hinaus ist die Umsetzung End-to-End-QA-Tests hilft bei der Validierung, dass die Leistungsoptimierungen auf verschiedenen Geräten und Browsern wirksam sind, um sicherzustellen, dass die Verbesserungen von Core Web Vitals auch tatsächlich zu einer Verbesserung der Benutzerfreundlichkeit führen.

Es lohnt sich, Daten zu vergleichen und Ihre Seite kostengünstiger zu aktualisieren, wenn Sie Leistungsberichte mit mehreren Tools erstellen.

1. Verbessern Sie die Produktivität, mit der Ihr Server antwortet

"Je länger ein Browser braucht, um Informationen vom Domain Controller zu erhalten, desto länger dauert es, alles auf dem Bildschirm zu generieren", so Google weiter. Jede einzelne Seitenmetrik, einschließlich LCP, wird durch eine schnellere Serverreaktionszeit direkt verbessert.

Vor allem aber kann eine verlängerte Serverumlaufzeit nicht nur Ihrer Suchmaschinenoptimierung, sondern auch Ihrer Benutzerfreundlichkeit schaden.

Neben der Verbesserung der Serverreaktion ist auch die Beachtung grundlegender SEO-Praktiken von entscheidender Bedeutung. Die Sicherstellung einer korrekten Website-Struktur, schneller Ladezeiten und optimierter Inhalte wird sowohl die Benutzerfreundlichkeit als auch die Suchergebnisse verbessern. Neben diesen "Must-Dos" kann der Einsatz der richtigen SEO-Tools den Prozess erheblich erleichtern - Tools wie Ahrefs, Manngools und Semush sind ausgezeichnete Optionen. Für diejenigen, die nach Alternativen suchen, gibt es mehrere SEO-Tools ähnlich wie Semrush die dazu beitragen können, die Leistung zu verfolgen und die Platzierungen effektiv zu verbessern.

Verwenden Sie Time to First Byte (TTFB), um die Antwortzeit des Servers zu ermitteln. Diese Metrik bestimmt, wann der Webbrowser des Benutzers das erste Byte der Ausgabe Ihrer Publikation erhält.

Sammeln Sie jedoch erst einmal Statistiken über die aktuelle Leistung Ihres Servers, bevor Sie sich ein Bild davon machen, wie Sie abschneiden. Hier sind einige Hinweise, die Sie berücksichtigen sollten, wenn Sie den Bericht fertiggestellt haben:

• Prüfen Sie die Geschwindigkeit des Hostings Ihrer Website.
• Benutzen Sie eine Content-Delivery-Netzwerk (CDN) für Ihre Website.
• Überprüfen Sie Ihre Plug-ins. Weshalb? Weil jede Erweiterung mehr Gewicht auf Ihre Seite bringt, was die Geschwindigkeit Ihrer Website verlangsamen kann. Es ist nur noch das Wesentliche übrig.

Die Antwortzeit eines Servers sollte laut Google weniger als 600 Millisekunden betragen.

Unbedingt lesen: Wie Webdesign Ihren Umsatz steigern kann

2. Bildoptimierung und -komprimierung

Finden Sie nicht auch, dass das selbstverständlich ist? Andererseits sind Bilder die wichtigsten Elemente vieler Websites. Daher ist ihre Optimierung von entscheidender Bedeutung, auch wenn sie Ihre Seite wesentlich leichter machen und die Ladezeit, die LCP-Bewertung, die Benutzerfreundlichkeit und die Platzierung in den Suchmaschinen verbessern kann.

Indem Sie Fotos mit micro jpg verkleinern und Ihre LCP-Leistung erhöhen, können Sie die gesamte Seitengröße minimieren. Sie könnten vielleicht glauben, dass die Bildkomprimierung die Bildqualität verringert oder die Auflösung reduziert. Offenbar ist der Unterschied nur sichtbar, wenn man hineinschaut oder wenn der Schnappschuss im falschen Format gespeichert wird. Versuchen Sie vorzugsweise, Querformatfotos im jpg-Format und Grafiken im png-Format zu speichern. Formate der nächsten Generation wie JPEG 2000, JPEG XR und WebP können ebenfalls verwendet werden, aber wir empfehlen, zunächst einige Recherchen anzustellen.

Abgesehen von der Komprimierung ist es auch wichtig, das Content Delivery Network (CDN) für Fotos einzuschalten. Ein Content Delivery Network (CDN) ist ein globales Netzwerk von Servern, das Ihr Material zwischenlagert. Da die Server über die ganze Welt verteilt sind, können die Fotos schneller von dem Host gerendert werden, der den Nutzern am nächsten ist.

3. Implementieren von trägem Laden

Wenn Sie auf Ihrer Website Fotos verwenden, sollten Sie unbedingt Lazy Loading einsetzen, um die UX und den Core Web Vitals Score Ihrer Website zu schützen. Mit Lazy Stacking können Sie Bilder genau dann ausliefern, wenn die Betrachter auf der Seite nach unten scrollen. So wird die Ladegeschwindigkeit der Website beibehalten und eine erstklassige LCP-Bewertung gewährleistet.

Weitere Vorteile des langsamen Ladens sind:

• Die Funktionalität Ihrer Website wird verbessert.
• Damit wird eine Grenze für die Nutzung der Bandbreite festgelegt.
• Dies kann bei der Suchmaschinenoptimierung Ihrer Website helfen.
• Dadurch bleiben die Kunden länger auf der Website und die Absprungrate sinkt.

Wird Ihre Website von Lazy Loading profitieren? Laut HubSpotDas verzögerte Laden ist eine Notwendigkeit für Seiten mit vielen Grafiken, Animationen oder Videos (sogenannte schwere Elemente). Es gibt jedoch keine festen Kriterien dafür, welche Seiten verzögertes Laden verwenden sollten. Wenn der LCP-Wert Ihrer Website niedrig ist, sollten Sie in Erwägung ziehen, "Lazy Loading" zu implementieren und die Leistung vorher und nachher zu messen.

4. Reduzieren Sie die Ausführung von JavaScript (JS)

Wenn Ihr FID-Inhalt niedrig ist, deutet dies darauf hin, dass Ihre Seite länger als 300 Millisekunden mit den Nutzern verweilt. Sie können darüber nachdenken, Ihre JS-Ausführung zu optimieren und zu minimieren. Dies verringert die Zeit, die Ihr Browser benötigt, um JS-Code auszuführen und die Seite anzuzeigen.

Es ist auch wichtig, so wenig Speicherplatz wie möglich zu verbrauchen. Warum ist das so? Wenn der Code Ihrer Website eine Anfrage an den Browser stellt, wird ein neuer Speicherblock erstellt, der JavaScript deaktiviert und das Laden der Seite verlangsamen kann.

Die Verzögerung von überflüssigem JS ist laut Google eine Methode zur Verkürzung der Bearbeitungszeit.

Führen Sie die folgenden Schritte aus, um zu überprüfen, ob auf Ihrer Website ungenutztes JavaScript vorhanden ist:

• Gehen Sie zunächst zu Ihrer Website, klicken Sie mit der rechten Maustaste darauf und wählen Sie dann "Inspizieren".
• Gehen Sie dann auf "Quellen" und suchen Sie unten nach den drei Punkten. Sie sollten ein Werkzeug namens "Coverage" enthalten. Sobald Sie es eingefügt haben, drücken Sie die Schaltfläche "Laden".
• Wenn der Ladevorgang abgeschlossen ist, können Sie überprüfen, wie viel JavaScript auf Ihrer Seite nicht verwendet wird.

Wenn Sie herausgefunden haben, wie viel JS Sie übrig haben, sollten Sie damit beginnen, es zu reduzieren. Dazu gibt es verschiedene Möglichkeiten, eine davon ist das Code-Splitting. Das bedeutet, ein JavaScript-Bündel (kombinierte Dateien in einem Bündel) aufzuteilen, um zu verhindern, dass zu viele HTTP-Anfragen zum Laden einer Seite gestellt werden müssen.

5. Stellen Sie sicher, dass Ihre Bilder und Einbettungen die richtige Größe haben

Ein CLS-Wert von mehr als 0,1 gilt als schlecht und wird häufig durch Elemente in der CSS-Datei verursacht, denen es an Abmessungen fehlt, z. B. Fotos, Werbung oder Einbettungen. Maße sind wichtig, wenn Sie Ihre CLS-Bewertung verbessern wollen. Durch die Möglichkeit, Breite und Höhe festzulegen, kann der Browser den entsprechenden Platz auf der Website freigeben, während der Inhalt geladen wird.

Wenn zum Beispiel die Proportionen eines Bildes nicht stimmen, wird es normalerweise erst später auf einer Seite angezeigt. Wenn ein Benutzer das Material konsumiert, kann es plötzlich abfallen, weil ein Bild, das nicht richtig dimensioniert war, zu langsam geladen wird. In diesem Fall war der Browser nicht in der Lage festzustellen, wie viel Platz für dieses spezielle Bild benötigt wird.

Um diese Bildverschiebung zu umgehen, können Sie im Voraus einen Ort festlegen, an dem das Bildmaterial angezeigt werden soll. Wenn es außerhalb des Bildschirms hochgeladen wird, verhindert dieser Vorgang die Verschiebung der Anordnung.

Vergewissern Sie sich, dass Sie die richtigen Maße für Einbettungen eingestellt haben, z. B. beim Einbetten von YouTube-Videos in Ihre Website. Das Video kann auf der Rückseite normal erscheinen, aber auf der Vorderseite kann es übermäßig groß oder völlig verkorkst sein. Wenn das der Fall ist, gibt es ein Problem mit den Spezifikationen, und Sie sollten sie mit Tools wie FlexClip.

Im Folgenden finden Sie eine schrittweise Anleitung, wie Sie eine Einbettung für ein Youtube-Video finden. Erfahren Sie, wie Sie die Abmessungen anpassen können, damit das von Ihnen ausgewählte Video auf Ihrer Website fantastisch aussieht.

• Öffnen Sie das YouTube-Video, das Sie in Ihre Website einfügen möchten. 
• Suchen Sie dann die Schaltfläche Freigabe starten und wählen Sie die Option Einbetten.
• Anschließend werden alle Daten, einschließlich der Maße, angezeigt. Nun müssen Sie den Code in das Backend Ihrer Website einfügen und die Breite und Höhe an Ihre Bedürfnisse anpassen.

Schlussfolgerung

Auch wenn die Core Web Vitals erst in drei Monaten eingeführt werden, ist es wichtig, dass Sie jetzt damit beginnen. Da die Vitaldaten zugänglich sind, können Sie die oben aufgeführten Tools nutzen, um die Daten Ihrer Website vor und nach der Behebung der Fehler zu bewerten.

Denken Sie daran, dass das Backend Ihrer Website mit dem Frontend interagiert. Stellen Sie also sicher, dass das Backend so optimiert ist, dass es das beste Nutzererlebnis in Bezug auf Verarbeitungsgeschwindigkeit, ästhetische Stabilität und Engagement bietet. Es wäre hilfreich, wenn Sie sich an die bestehenden Google-Suchsignale erinnern, wie z. B. Mobilfreundlichkeit, sicheres Surfen, HTTPS und invasive Interstitial-Standards.