Core Web Vitals

03 Mrz, 2023

Suchmaschinenoptimierung

Core Web Vitals

Core Web Vitals ist eine Reihe von Metriken, die die wichtigsten Komponenten der Seitenleistung wie Ladegeschwindigkeit, Interaktivität und visuelle Stabilität bewerten. Durch die Verbesserung dieser Elemente können Entwickler:innen sicherstellen, dass ihre Websites für die Benutzenden optimiert sind, was insgesamt zu einem besseren Benutzererlebnis führt.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe spezifischer Ranking Faktoren, die Google als wichtig für die gesamte Benutzererfahrung einer Webseite betrachtet.

Core Web Vitals bestehen aus drei spezifischen Messungen zur Seitenladegeschwindigkeit und Benutzerinteraktion:

  • Grösstes Inhaltsbild
  • Erste Eingabe-Verzögerung
  • Kumulative Layoutverschiebung

Kurz gesagt sind Core Web Vitals eine Untermenge von Faktoren, die Einführung Teil des «Page Experience»-Scores von Google sind (im Grunde Googles Art und Weise, die gesamte UX Ihrer Seite zu bewerten).

Sie können die Core Web Vitals-Daten Ihrer Website im Bereich «Enhancements» Ihres Google Search Console-Kontos finden.

Grösstes Inhaltsbild (LCP)

LCP ist die Zeit, die eine Seite benötigt, um aus der Perspektive einer tatsächlichen benutzenden Person zu laden. Mit anderen Worten: Es ist die Zeit von dem Klicken auf einen Link bis zur Anzeige des Grossteils des Inhalts auf dem Bildschirm.

LCP unterscheidet sich von anderen Seitenlademessungen. Viele andere Seitenlade-Metriken (wie TTFB und First Contextual Paint) repräsentieren nicht unbedingt, wie es für Benutzende ist, eine Webseite zu öffnen.

LCP konzentriert sich hingegen auf das, was wirklich wichtig ist, wenn es um Seitenladegeschwindigkeit geht: Die Möglichkeit, Ihre Seite zu sehen und mit ihr zu interagieren.

Sie können Ihren LCP-Score mit Google PageSpeed Insights überprüfen. Dies ist besonders hilfreich, um Bereiche zu identifizieren, in denen Sie Verbesserungen vornehmen können.

Es wird empfohlen, die LCP-Daten in Ihrem GSC zu überprüfen. Warum? Nun, wie bei Google PageSpeed Insights, stammen die Daten in Search Console aus dem Chrome User Experience Report. Im Gegensatz zu PageSpeed Insights können Sie jedoch LCP-Daten auf Ihrer gesamten Website sehen. Anstatt also willkürlich Seiten einzeln zu analysieren, erhalten Sie eine Liste von URLs, die gut, schlecht oder dazwischen liegen.

Google hat spezifische LCP-Richtlinien. Sie unterteilen LCP-Geschwindigkeit in drei Kategorien:

  • Gut
  • Verbesserung erforderlich
  • Schlecht

Kurz gesagt, Sie möchten, dass jede Seite auf Ihrer Website LCP innerhalb von 2,5 Sekunden erreicht. Dies kann eine echte Herausforderung für grosse Webseiten sein. Oder Seiten mit vielen Funktionen.

Deshalb beträgt die LCP auf dieser Seite 5,1 Sekunden (was als «schlecht» gilt).

Es zeigt also, dass die Verbesserung von LCP nicht so einfach ist wie das Installieren eines CDN. In diesem Fall müssen Sie möglicherweise tatsächlich einige Bilder von der Seite entfernen. Und den Code der Seite bereinigen.

Harte Arbeit? Auf jeden Fall. Lohnt es sich? Auf jeden Fall.

Wie verbesserert man die LCP einer Webseite?

  • Entfernen Sie unnötige Drittanbieter-Skripte

    Eine Pagespeed-Studie hat ergeben, dass jedes Drittanbieter-Skript eine Seite um 34 ms verlangsamt.

  • Aktualisieren Sie Ihren Webhost

    Besseres Hosting = insgesamt schnellere Ladezeiten (einschliesslich LCP).

  • Lazy Loading einrichten

    Lazy Loading sorgt dafür, dass Bilder nur geladen werden, wenn jemand auf Ihrer Seite nach unten scrollt. Dies bedeutet, dass Sie LCP deutlich schneller erreichen können.

  • Entfernen Sie grosse Seitenelemente

    Google PageSpeed Insights zeigt Ihnen an, ob Ihre Seite ein Element enthält, das den LCP Ihrer Seite verlangsamt.

  • Verkleinern Sie Ihr CSS

    Sperriges CSS kann die LCP-Zeiten erheblich verzögern.

First Input Delay (FID)

Als Nächstes werfen wir einen Blick auf Googles zweites Core Web Vital: First Input Delay (FID).

An diesem Punkt hat Ihre Seite FCP erreicht. Aber die Frage ist:

  • Können Benutzende mit Ihrer Seite interagieren?

Nun, das ist genau das, was FID misst: die Zeit, die Benutzende benötigen, um tatsächlich mit Ihrer Seite zu interagieren.

Beispiele für Interaktionen sind:

  • Die Auswahl einer Option aus einem Menü
  • Klicken auf einen Link in der Navigation der Seite
  • Eingabe Ihrer E-Mail-Adresse in ein Feld
  • Öffnen von «Accordion-Text» auf mobilen Geräten

Google hält FID für wichtig, da es berücksichtigt, wie Benutzer tatsächlich mit Websites interagieren. Und wie bei FCP gibt es spezifische Kriterien dafür, was eine akzeptable FID darstellt.

Ja, FID misst technisch gesehen, wie lange es dauert, bis etwas auf einer Seite passiert. In diesem Sinne ist es also eine Pagespeed-Bewertung. Aber es geht darüber hinaus und misst die Zeit, die Benutzende benötigen, um tatsächlich etwas auf Ihrer Seite zu tun.

Für eine Seite, die zu 100% aus Inhalten besteht (wie ein Blog-Beitrag oder Nachrichtenartikel), spielt FID wahrscheinlich keine grosse Rolle. Die einzige wirkliche «Interaktion» besteht darin, auf der Seite nach unten zu scrollen oder zu zoomen.

Tatsächlich berichtet meine Search Console nicht einmal über FID für meine Website. Ich denke, das liegt daran, dass ich keine Login-Seiten habe oder andere Seiten, auf denen jemand sofort etwas eingeben müsste.

Aber für eine Login-Seite, eine Anmeldeseite oder eine andere Seite, auf der Benutzende schnell auf etwas klicken müssen, ist FID ENORM wichtig.

Was kann man tun, um die FID-Werte einer Webseite zu verbessern?

  • Minimieren (oder verzögern) Sie JavaScript

    Es ist fast unmöglich, dass Benutzende mit einer Seite interagieren, während der Browser JS lädt. Das Minimieren oder Verzögern von JS auf Ihrer Seite ist also der Schlüssel für FID.

  • Entfernen Sie alle nicht kritischen Skripte von Drittanbietern

    Wie bei FCP können Skripte von Drittanbietern (wie Google Analytics, Heatmaps usw.) einen negativen Einfluss auf FID haben.

  • Verwenden Sie einen Browser-Cache

    Dies hilft, Inhalte auf Ihrer Seite schneller zu laden. Dies hilft dem Browser Ihrer Benutzenden, noch schneller durch das Laden von JS-Aufgaben zu navigieren.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) bezieht sich auf die Stabilität einer Seite während des Ladevorgangs (auch als «visuelle Stabilität» bezeichnet).

Mit anderen Worten: Wenn sich Elemente auf Ihrer Seite während des Ladevorgangs bewegen, haben Sie einen hohen CLS. Das ist schlecht.

Stattdessen sollten Ihre Seitenelemente während des Ladevorgangs ziemlich stabil sein. Auf diese Weise müssen Benutzende nicht neu lernen, wo sich Links, Bilder und Felder befinden, wenn die Seite vollständig geladen ist, oder aus Versehen auf etwas klicken.

Wie kann man den CLS minimieren?

  • Verwenden Sie für alle Medien (Video, Bilder, GIFs, Infografiken usw.) Attribute mit festen Abmessungen: Auf diese Weise weiss der Browser der Benutzenden genau, wie viel Platz das Element auf dieser Seite einnehmen wird. Und wird es nicht auf die Schnelle ändern, wenn die Seite vollständig geladen ist.
  • Stellen Sie sicher, dass Anzeigen-Elemente einen reservierten Platz haben: Andernfalls können sie plötzlich auf der Seite erscheinen und Inhalte nach unten, oben oder zur Seite verschieben.
  • Fügen Sie neue UI-Elemente unterhalb des Falzes hinzu: Auf diese Weise verschieben Sie keine Inhalte, die Benutzende «erwarten», an Ort und Stelle zu bleiben.

Wie kann man die Core Web Vitals verbessern?

  • Implementieren Sie eine Caching-Lösung.
  • Entfernen Sie blockierende Ressourcen, die das Rendern behindern.
  • Verzögern Sie das Laden von JavaScript.
  • Verwenden Sie ein Content Delivery Network.
  • Grössen Sie Bilder ordnungsgemäss und optimieren Sie diese.
  • Implementieren Sie Lazy Loading.
  • Optimieren Sie Ihre Website-Schriftarten.
  • Verbessern Sie Ihr WordPress-Hosting.

Ähnliche Artikel:

Newsletter Abonnieren

Abonnieren Sie noch heute, damit Sie keine der neuesten Beiträge verpassen!

    Steigere Deinen Traffic!

    Jetzt Webseite analysieren ➜

    Switzerland Flag