Core Web Vitals

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

Aktualisieren Sie Ihren Webhost

Lazy Loading einrichten

Entfernen Sie grosse Seitenelemente

Verkleinern Sie Ihr CSS

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

Entfernen Sie alle nicht kritischen Skripte von Drittanbietern

Verwenden Sie einen Browser-Cache

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.