Core Web Vitals sind die wesentlichen Metriken, die alle Websitebesitzer optimieren müssen, um ein hervorragendes Benutzererlebnis zu bieten, die SEO zu verbessern und viele Vorteile zu erzielen.

Es konzentriert sich auf die Optimierung Ihrer Ladegeschwindigkeit der Seite, Reaktionsfähigkeit und Stabilität aller visuellen Elemente, damit Benutzer Inhalte schneller anzeigen und mühelos mit Ihrer Website interagieren können.

Sie benötigen schnellere, reaktionsschnellere Websites, mit denen sie problemlos interagieren und gewünschte Aktionen ausführen können, z. B. das Bestellen von Lebensmitteln online. Der Grund dafür ist, dass Benutzer heutzutage langsame Websites hassen, die viel Zeit in Anspruch nehmen und zu Frustration führen.

Hier glänzt Core Web Vitals!

In diesem Artikel werde ich mehr Licht auf Core Web Vitals werfen und wie Sie die Core Web Vitals Ihrer Website verbessern können.

Lassen Sie uns die Fahrt beginnen!

What Do You Mean by Core Web Vitals?

Die Core Web Vitals von Google sind die drei wesentlichen Metriken, die mit der Seitenladegeschwindigkeit, Interaktivität und visuellen Stabilität, die diese messen, verbunden sind User Experience auf einer Webseite.

Kern-Web-Vitale
Was meinen Sie mit Core Web Vitals?

Diese Metriken wurden 2021 von Google als Suchmaschinen-Ranking-Faktor in seinen Algorithmus aufgenommen. Ihre Website erhält bei diesen Metriken entweder eine „gute“ oder „schlechte“ Punktzahl, was anzeigt, ob Ihre Website für die drei Vitalpunkte optimiert ist oder Verbesserungen benötigt.

Core Web Vitals fallen unter Web Vitals und gelten für alle Websites und Webseiten, die Websitebesitzer messen und verbessern müssen.

Die drei Metriken von Core Web Vitals sind also:

  • Größte inhaltliche Farbe (LCP)
  • Erste Eingangsverzögerung (FID)
  • Kumulative Layoutverschiebung (CLS)

Core Web Vitals in Detail

# 1. LCP – Größte Contentful Paint (Laden)

Large Contentful Paint (LCP) bezeichnet die Seitenladegeschwindigkeit einer Website, um sicherzustellen, dass die Besucher schnell auf Ihre Website zugreifen können, was ein wesentlicher Faktor für die Verbesserung der Benutzererfahrung ist.

Und um das zu gewährleisten, muss Ihr LCP innerhalb von 2.5 Sekunden sein. Es impliziert die Zeit, die Ihre Website benötigt, wenn der Benutzer auf den Link klickt, um den Inhalt auf seinem Bildschirm anzuzeigen.  

  • Wenn es zwischen 2.5 und 4 Sekunden liegt, muss Ihre Website beim Laden von Seiten verbessert werden.
  • Auch wenn es länger als 4 Sekunden ist, die Seitenladegeschwindigkeit ist schlecht, und Sie müssen schnell daran arbeiten.
Größte inhaltliche Farbe
LCP – Größte Contentful Paint (Laden)

LCP konzentriert sich mehr auf die Echtzeit-Benutzererfahrung in Bezug auf die Seitenladegeschwindigkeit – damit die Benutzer den Inhalt auf der Seite sehen und damit interagieren können. Es unterscheidet sich von First Contextual Paint, TTFB und anderen Seitengeschwindigkeitsmessungen.   

Wenn Ihre Webseite beispielsweise ein größeres Bild und einfachen Text enthält, ist das größere Bild das LCP. Dies liegt daran, dass es das größte Element ist, das in Ihrem Browser geladen werden kann, und einen erheblichen Eindruck hinterlässt. Wenn Sie also das Bild so optimieren, dass es schneller geladen wird, wird die Webseite schneller geladen, was zu einer verbesserten Benutzererfahrung führt.

Mit anderen Worten, LCP ist die Zeit, die das wichtigste Element oder der wichtigste Inhalt benötigt, um auf den Bildschirm des Benutzers geladen zu werden. Das Element kann Bilder, Videos, Text oder andere Inhaltstypen sein.

# 2. FID – Erste Eingangsverzögerung (Interaktivität)

First Input Delay (FID) misst die Reaktionsfähigkeit oder Interaktivität von Benutzern mit Ihrer Website. FID ist die Zeit, die der Webbrowser benötigt, um zu reagieren, wenn der Benutzer zum ersten Mal mit der Webseite interagiert.

Dies bedeutet, dass die Webseite reaktionsschneller ist und den angeforderten Inhalt anzeigt, wenn der Browser schneller auf die Interaktion reagiert.

Um eine gute Website-Erfahrung für Benutzer zu gewährleisten, halten Sie Ihre FID innerhalb von 100 Millisekunden (ms) aufrecht.

  • Wenn der FID zwischen 100 ms und 300 ms fällt, muss Ihre Website in Bezug auf die Reaktionsfähigkeit verbessert werden.
  • Aber wenn es über 300 ms liegt, ist die Reaktionsfähigkeit Ihrer Website schlecht und Sie müssen es sofort beheben, um eine großartige Benutzererfahrung zu bieten.
Erste Eingangsverzögerung
FID – Erste Eingangsverzögerung (Interaktivität)

Manchmal kommt es zu Verzögerungen, wenn Ihr Browser andere Aufgaben im Hintergrund ausführt. Selbst wenn die Seite gut gerendert wurde und der Inhalt sichtbar ist, passiert möglicherweise nichts, wenn Sie auf eine Schaltfläche klicken. Das bedeutet, dass die Webseite einfach nicht auf Ihre Interaktion reagiert; selbst wenn, ist es träge. Dies kann einen Benutzer frustrieren und zu einer schlechten Erfahrung führen.

Der Grund ist, dass der Browser für viele Aufgaben zuständig ist und nicht alles auf einmal erledigen kann, oder es kann zu Fehlfunktionen kommen. Da die Websites immer komplexer werden, bleiben dem Browser schwerere Aufgaben. Daher ist die Optimierung von FID notwendig geworden, um Ihre Webseite interaktiver oder reaktionsschneller auf die Anfragen des Benutzers zu machen.  

# 3. CLS – Cumulative Layout Shift (Visuelle Stabilität)

Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Website. Sie definiert, wie stabil die Seitenelemente auf dem Bildschirm der Nutzer geladen werden und wie stark sie schwanken.

Wenn die Website nicht stabil ist, führt dies zu einer schlechten Benutzererfahrung. Beispielsweise möchte ein Benutzer auf eine Schaltfläche klicken, die auf der Webseite angezeigt wird, während diese noch geladen wird. Wenn sie darauf klicken, wird die Seite vollständig geladen und die Schaltfläche verschiebt sich ein wenig. Infolgedessen klickt der Benutzer möglicherweise auf etwas anderes oder nirgendwo, was die Frustration erhöht.

Diese Unregelmäßigkeiten und Verschiebungen können aus vielen Gründen auftreten, z. B. Anzeigen, schwere Inhalte auf der Website usw.

Kumulative Layoutverschiebung
CLS – Cumulative Layout Shift (Visuelle Stabilität)

Daher ist die Optimierung des CLS Ihrer Website unerlässlich, damit es jederzeit stabil läuft und sichergestellt wird, dass sich das Layout, die Designs und die Schaltflächen wie erwartet verhalten.

Um eine gute Benutzererfahrung zu gewährleisten, muss der CLS unter 0.1 liegen.

  • Sie müssen die visuelle Stabilität Ihrer Website verbessern, wenn der CLS zwischen 0.1 und 0.25 liegt.
  • Und wenn es mehr als 0.25 beträgt, ist die visuelle Stabilität schlecht und muss schnell behoben werden, wenn Sie eine bessere Benutzererfahrung bieten möchten.

Um Ihr Ziel für die meisten Benutzer zu erreichen, messen Sie jede der Metriken von Core Web Vitals bei 75th Perzentil.

How Important Are Core Web Vitals for SEO?

Google hat die Seitenerfahrung ab 2021 zu einem wesentlichen und offiziellen Ranking-Faktor für alle Websites gemacht, die in seinen Suchergebnissen erscheinen.

Nun hängt die Seitenerfahrung von vielen Faktoren ab. Einige der wichtigen Metriken sind:

  • Ladegeschwindigkeit
  • Visuelle Stabilität
  • Reaktionsfähigkeit
  • Mobil-Freundlichkeit
  • HTTPS
  • Sicheres Surfen

Darunter sind die ersten drei – Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität – die Core Web Vitals, die jeder Websitebesitzer optimieren muss, um sich ein gutes Ranking bei Google zu sichern. Sie haben die Macht, den Deal zu machen oder zu brechen.

Wenn Sie also für LCP, FID und CLS optimieren, können Sie Verbessern Sie Ihren SEO-Score und Benutzererfahrung, die Ihnen helfen, Ihre Website zu erweitern. Hier sind die Vorteile, die Sie davon erwarten können:

Schnelleres Laden: Die Leute lieben schnellere Websites, die im Handumdrehen geladen werden können. Es spart ihnen nicht nur Zeit, sondern liefert ihnen auch Informationen, die sie suchen, ohne sie warten zu lassen. Es erhöht ihre Benutzererfahrung und Ihr Auftritt in Suchmaschinen verbessert sich. Die Optimierung Ihres LCP kann Ihnen dabei helfen.

Schnelleres Laden
Wie wichtig sind Core Web Vitals für SEO?

Empfänglichkeit: Es ist nutzlos, wenn Ihre Website lädt, aber nicht gut auf Benutzeranfragen reagiert. Aber wenn Sie die FID Ihrer Website verbessern, können Sie die Reaktionsfähigkeit verbessern, die allen gefällt. Infolgedessen kommen immer mehr Menschen und interagieren regelmäßig mit Ihrer Website, um Artikel zu lesen, Einkäufe zu tätigen, Informationen zu suchen usw. All dies erhöht Ihre SEO und Präsenz, zieht mehr Besucher an und animiert zum Wiederkommen.

Ausführen von Layouts und Elementen: Unabhängig davon, wie gut Sie Ihre Elemente wie Schaltflächen, Hintergründe, Layouts usw. entworfen haben, werden sie beim Laden der Website wahrscheinlich nicht funktionieren, wenn Sie sie nicht optimieren, was zu einer schlechten Erfahrung führt. Aber die Optimierung der visuellen Stabilität Ihrer Website würde es jedem Element ermöglichen, wunderbar zu funktionieren, und den Benutzern helfen, besser mit visuellen Elementen zu interagieren.

How to Improve Core Web Vitals?

Nachdem wir nun die Verbesserung der zentralen Web-Vitals besprochen haben, um ein hervorragendes Benutzererlebnis zu bieten, wollen wir verstehen, wie das geht.

# 1. Wie man LCP verbessert

Im Idealfall muss der Large Contentful Paint (LCP) Ihrer Website bei mindestens 2.5 % der gesamten Seitenaufrufe innerhalb von 75 Sekunden liegen.

Viele Faktoren beeinflussen die Fähigkeit des Browsers, eine Webseite zu laden und darzustellen. Jegliche Verzögerungen oder Blockierungen bei einem dieser Faktoren können sich auf LCP auswirken. LCP ist das Web-Muss, für das die meisten Websites benötigen Optimierung.

LCP misst, wie schnell der Hauptinhalt einer Webseite geladen wird. Diese Metrik wirkt sich also auf Hauptbilder, mehrere Schriftarten, Videos, verzögertes Laden von Inhalten, Hintergrundbilder usw. aus.

Um Ihr LCP zu verbessern, müssen Sie also den gesamten Ladeprozess rationalisieren und optimieren. Da es etwas komplex sein kann, macht es die Aufschlüsselung der Aufgabe leichter zugänglich.

  1. Dateigrößen komprimieren: Wenn Sie die Größe einer beliebigen Datei komprimieren oder entfernen können, wird dies dazu beitragen, die Ladegeschwindigkeit Ihrer Seite zu beschleunigen. Sie können jeden Code oder jede Datei, die nicht verwendet wird, überprüfen und loswerden. Und wenn Sie die Dateigröße komprimieren möchten, ist es für jeden Dateityp einfacher, ob HTML, CSS, JavaScript, oder Bilder.
Dateigrößen komprimieren
Wie man LCP verbessert

2. Bringen Sie Inhalte näher an die Benutzer: Wenn zwischen den Benutzern und dem Server, auf dem der Inhalt Ihrer Website gespeichert ist, eine große Entfernung besteht, dauert das Laden zeitaufwändig, was wir hier reduzieren möchten. Wählen Sie daher ein Rechenzentrum, um die Inhalte Ihrer Website dort zu hosten, wo sich Ihre Zielgruppe geografisch befindet.

Sie können auch eine CDN es sei denn, Ihr Publikum stammt aus einem kleineren geografischen Gebiet. Ein CDN hilft Ihnen dabei, Ihre Inhalte schneller zu verteilen, unabhängig von der Größe, und bietet eine bessere Benutzererfahrung, da Benutzer jederzeit und überall schneller auf die Inhalte zugreifen können.

Verwenden Sie nach Möglichkeit denselben Server, um zusätzliche Verzögerungen zu vermeiden, während Sie für jede Verbindung eine sichere Verbindung zwischen dem Server und dem Benutzer herstellen. Sie können auch eine verwenden DNS Prefetch oder Pre-connect, um Verbindungen frühzeitig zu starten.

3. Cache-Ressourcen: Das Zwischenspeichern von Ressourcen hilft beim Herunterladen der Ressourcen für den ersten Webseitenaufruf, ohne dass sie notwendigerweise für die nachfolgenden Aufrufe heruntergeladen werden müssen. Da die Ressourcen bereits verfügbar sind, werden andere Seiten schneller geladen.

4. TTFB reduzieren: Stellen Sie Ihr anfängliches HTML schnell bereit, da es sich direkt auf die nächsten Schritte auswirkt. Reduzieren Sie daher Ihre Zeit auf das erste Byte (TTFB), um andere Metriken zum Laden von Seiten zu verbessern.

TTFB reduzieren
TTFB reduzieren

5. Priorisieren Sie Ressourcen: Priorisieren Sie, wie die Ressourcen auf Ihrer Website in den Rendering-Pfad geladen werden. Stellen Sie sicher, dass sie in ihrer Download- und Verarbeitungsreihenfolge angeordnet sind. Sie können damit beginnen, die wesentlichen Ressourcen zu laden, die Ihre Benutzer sehen sollen, und dann den Rest erledigen.  

Beispielsweise können Sie zuerst Ihre Hauptseite und wichtige Schriftart-Stylesheets laden. Sie können Render-Blocking-Stylesheets einbetten oder reduzieren und die kritischen HTML-, JavaScript- und CSS zuerst, dann den Rest laden.

# 2. So verbessern Sie FID

LCP und First Contentful Paint (FCP) messen die Ladezeit einer Webseite. Diese Metriken messen jedoch nicht, wie die Seite auf die Anfragen des Benutzers reagiert.

Alles geht also umsonst, auch wenn Ihre Seite geladen ist und der Benutzer die gewünschte Aktion nicht ausführen kann.

Hier hilft First Input Delay (FID) dabei, die Reaktionsfähigkeit oder Interaktivität der Site auf die Anfrage des Benutzers zu erfassen.

FID verbessern
So verbessern Sie FID

FID misst die Zeit zwischen der ersten Interaktion des Benutzers und der Reaktion der Website auf diese Interaktion, z. B. das Klicken auf eine Schaltfläche und das Aufrufen dieser Seite. Diese Metrik wirkt sich auf Code von Drittanbietern, JavaScript, Tracking-Skripte usw. aus. Die ideale FID liegt unter 100 ms, und die Möglichkeiten zur Verbesserung der FID sind:

  1. Reduzieren Sie die Lautstärke des ausgeführten JavaScripts: Wenn Sie a verwenden JavaScript-Framework, benötigt es viel JavaScript zum Laden der Seite, was einige Zeit in Anspruch nehmen kann, um es in Ihrem Browser zu verarbeiten. So kann es zu Verzögerungen kommen. Wenn Sie also SSR oder Prerendering verwenden, können Sie diese Belastung auf den Server und nicht auf Ihren Browser übertragen. 
  2. Brechen Sie Ihr JavaScript auf: Wenn Sie Ihr JavaScript in kleinere Teile aufteilen, können Sie es schneller ausführen. Finden Sie also die längeren Aufgaben, die die Reaktion auf die Anfragen der Benutzer verzögern, und teilen Sie sie in kleinere Aufgaben auf, die weniger Zeit in Anspruch nehmen. Sie können dies mit Hilfe von Code-Splitting tun.
  3. Etwas JavaScript verschieben: Einen Teil Ihres JavaScripts zu einem anderen Servicemitarbeiter verschieben. Es macht Ihren Code weniger komplex und läuft im Browser schneller. 

Außerdem müssen Sie sich um eine weitere Sache kümmern. Da der Servicemitarbeiter nicht auf das Document Object Model (DOM) zugreifen kann, kann er keine Änderungen oder Aktualisierungen vornehmen. Wenn Sie also Ihr JavaScript zu einem anderen Service-Mitarbeiter verschieben möchten, stellen Sie sicher, dass sich ein sachkundiger Entwickler darum kümmern kann.

# 3. So verbessern Sie CLS

CLS misst, wie stabil Ihre Website-Elemente wie Layouts, Schaltflächen usw. sind. Es erkennt, wie stark sich Ihre sichtbaren Inhalte im Darstellungsbereich Ihrer Website je nach Größe und Entfernung des Inhalts verschieben. Es betrifft Bildgrößen und -abmessungen, mehrere Schriftarten, Animationen, Menüs, Popups usw. 

Layoutverschiebungen könnten Benutzer ablenken. Dies erschwert es den Benutzern, sich auf die angezeigten Inhalte zu konzentrieren, z. B. das Lesen eines Artikels oder das Durchsuchen einiger Bilder. Es ist enorm ärgerlich, und niemand wird gerne auf einer solchen Seite bleiben. 

So verbessern Sie CLS
So verbessern Sie CLS

Daher müssen Sie Ihre Website für CLS optimieren. Hier ist, wie das geht. 

  1. Optimieren von Bildern: Weisen Sie den Platz für Bilder so zu, dass sie ihren Platz optimal ausfüllen und Verschiebungen vermeiden. Dazu müssen Sie die Breite und Höhe Ihrer Bilder innerhalb des Tags definieren – .
  2. Injizierter Inhalt: Eine Layoutverschiebung kann auftreten, wenn Sie einen Inhalt dynamisch über Ihren vorhandenen Inhalt einfügen. Wenn Sie dies planen, weisen Sie also im Voraus ausreichend Speicherplatz zu.
  3. Fonts: Stellen Sie sicher, dass bei den auf Ihrer Website erscheinenden Schriftarten keine Schriftart mit einer anderen ausgetauscht wird. Es muss auch schnell auf dem Bildschirm geladen werden. Dies ist erforderlich, da bei einer Änderung einer Schriftart eine merkliche Verschiebung auftreten kann, z. B. Flash of Unstyled Text (FOUT) oder Flash of Invisible Text (FOIT). Es wirkt sich auf die Benutzererfahrung aus. Hier kann die Verwendung einer Systemschrift helfen. Wenn Sie also nichts zu laden haben, gibt es keine Änderungen oder Verzögerungen, die eine Verschiebung verursachen könnten. 

How to Assess Core Web Vitals for Your Website?

Sie können jedes beliebige Tool verwenden Überprüfen Sie das Core Web Ihrer Website Vitalstoffe wie: 

Sobald Sie ein Tool verwenden, können Sie den Status Ihrer Core Web Vitals erfassen. Sie können Metriken anzeigen – LCP, FID, CLS, FCP, Gesamtsperrzeit, Zeit bis zur Interaktion und Geschwindigkeitsindex.

  • Erster zufriedener Anstrich (FCP): Es misst die Zeit, die der Browser eines Benutzers benötigt, um die DOM-Elemente der Website wie SVGs, Bilder usw. zu rendern. Es bestimmt auch Ressourcen, die das Rendern blockieren. 0-2 Sekunden gelten als schnelles FCP, 2-4 Sekunden als mäßig und 4+ Sekunden als langsam. 
  • Geschwindigkeitsindex: Es zeigt die durchschnittliche Zeit, die der Inhalt einer Website benötigt, um einem Benutzer angezeigt zu werden. Es bestimmt die Menge an übermäßigem JavaScript auf Ihrer Website. 0–4.3 Sekunden gelten als schnell, 4.4–5.8 Sekunden als moderat, während 5.8+ Sekunden als langsam gelten.  
  • Zeit bis zur Interaktivität (TTI): Es wird sich die Zeit genommen, bis der Inhalt vollständig interaktiv und funktionsfähig wird. Es ermittelt Webseiten mit zusätzlichem JavaScript. 0–3.8 Sekunden gelten als schnell, 3.9–7.3 Sekunden als mäßig und 7.3+ Sekunden als langsam.
  • Gesamtsperrzeit (TBT): Es hilft Ihnen, die Zeit zu überprüfen, die die Webseite benötigt, um auf Benutzereingaben zu reagieren. 0–300 ms gelten als schnell, 300–600 ms als moderat und 600+ als langsam. 

Das Tool zeigt den Leistungswert der Core Web Vitals Ihrer Website an. Sie können auch die einzelnen Punktzahlen für jede der oben genannten Metriken sehen und erklären, wo Sie fehlen und wie Sie Ihre Punktzahl verbessern können.   

Da die Bereitstellung einer großartigen Benutzererfahrung eine kontinuierliche Reise ist, behalten Sie Ihre Core Web Vitals immer im Auge und optimieren Sie sie regelmäßig. 

Fazit

Bereitstellung eines ausgezeichneten User Experience ist notwendig, damit alle Websites im Internet gedeihen; sogar Google hat das erkannt. Aus diesem Grund haben sie letztes Jahr Core Web Vitals eingeführt, um eine qualitativ hochwertige Benutzererfahrung zu bieten. Sie können jedes oben genannte Tool verwenden, um die Core Web Vitals Ihrer Website zu überprüfen und Wege zu finden, sie mit den oben genannten Tipps und Tricks zu verbessern.