Core Web Vitals im Website-Design (wie man sie verbessert)

Veröffentlicht: 2022-11-11

Ist Ihre Website jemals in den SEO-Rankings zurückgefallen und Sie haben sich gefragt, was schief gelaufen ist? In solchen Fällen sollten Sie, nachdem Sie die wichtigsten SEO-Faktoren wie hochwertige Inhalte, natürliche Verknüpfungen und Backlinks, mobile Optimierung usw. untersucht haben, einen weiteren wichtigen Website-Bericht nachschlagen – Ihre Core Web Vitals.

Google verwendet spezifische Ranking-Signale, um die Zuverlässigkeit, Effizienz und Kernbenutzererfahrung von Websites zu messen. Core Web Vitals sind Seitenerfahrungswerte, die Google Websites gibt. Dies sind wichtige Faktoren, die messen, wie gut Ihre Website optimiert ist und wie gut die Benutzererfahrung ist. Stellen Sie bei der Gestaltung Ihrer Website sicher, dass sie für diese Metriken optimiert ist. Andernfalls können Sie am Ende auch Ihrem Google-Rang und der allgemeinen Benutzererfahrung schaden.

Zu technisch? In diesem Artikel haben wir versucht zu vereinfachen, was die zentralen Web-Vitals Ihrer Website bedeuten, wie sie vom Design Ihrer Website beeinflusst werden und wie Sie sie verbessern können. Die Verbesserung Ihres Core Web Vitals Score ist entscheidend für das Ranking Ihrer Website, daher können Sie auch die Hilfe professioneller Webdesigner in Anspruch nehmen, wenn es sich zu schwierig anhört.

Was sind sie und warum sind sie wichtig?

Google verwendet bestimmte Leistungskennzahlen, um den Zustand und die Qualität Ihrer Website zu messen. Diese werden Core Web Vitals genannt. Neben älteren Ranking-Signalen wie Keyword-Optimierung, Content, Metadaten etc. nutzt Google diese Web-Vitals, um die Performance Ihrer Website zu ermitteln.

Core Web Vitals kann Ihnen dabei helfen, die Leistung Ihrer Suchergebnisse erheblich zu verbessern. Sie analysieren die Ladegeschwindigkeit Ihrer Website und die Benutzererfahrung und lassen Google feststellen, wie gut Ihre Website funktioniert. Sie helfen Ihnen auch dabei, Bereiche zu identifizieren, in denen Ihr Website-Design und Ihre Codierung verbessert werden können. Es gibt insbesondere 3 Dinge, die Core Web Vitals berücksichtigt – Ladezeit, visuelle Stabilität und Interaktivität. Diese Metriken werden wie folgt bezeichnet:

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

Diese Metriken sind mit Hilfe von Tools wie Google Lighthouse, PageSpeed ​​Insights, GTMetrix und Reddico SERP Speed ​​Tool leicht messbar. Wenn es Ihrer Website gelingt, eine Punktzahl innerhalb eines bestimmten Schwellenwerts zu erreichen, erhalten Sie möglicherweise einen Ranking-Boost. Wenn nicht, wissen Sie, wo Optimierungsbedarf besteht. Lassen Sie uns diese Begriffe durchgehen.

Größte zufriedene Farbe (LCP)

Das LCP misst im Allgemeinen die Ladeleistung Ihrer Website aus Sicht eines tatsächlichen Benutzers. Es ist nicht dasselbe wie Messungen, bei denen wir Zahlen verwenden, um die Ladegeschwindigkeit einer Website zu berücksichtigen, z. B. 2-3 Sekunden. Dies ist keine genaue Messung, da nicht jedes Element einer Webseite mit der gleichen Geschwindigkeit geladen wird. Einige der schwereren Elemente wie große Bilder und Videos brauchen länger zum Laden als das Logo und der Inhalt.

Wenn das Laden einer Website länger als 4-5 Sekunden dauert, verlassen die Besucher normalerweise die Website und suchen nach einer schnelleren Website. Beträgt die Ladezeit der Seite etwa 10 Sekunden, dann steigt die Absprungrate der Seite auf bis zu 123 % (Google). Das macht LCP so entscheidend für die Core Web Vitals. LCP misst die Zeit, die zum Laden des größten Elements auf der Webseite erforderlich ist, oder besser gesagt, wie lange es dauert, bis eine Seite vollständig geladen ist. Wenn Ihr LCP unter 2,5 Sekunden fällt, brauchen Sie sich keine Sorgen zu machen. Wenn es 4 Sekunden oder mehr sind, muss Ihre Seite noch bearbeitet werden.

Um das LCP Ihrer Webseite zu verbessern, sollten Sie folgende Punkte beachten:

  • Unnötige Skripte von Drittanbietern sollten entfernt werden, da sie die Seite erheblich verlangsamen können.
  • Rüsten Sie auf einen Webhost auf, der Ihre Ladegeschwindigkeit erhöht.
  • Wenn Sie ein großes Element auf Ihrer Seite haben, das nicht so wichtig ist, ziehen Sie in Betracht, es zu entfernen.
  • Sperriges CSS kann auch zu langsamen Ladezeiten führen.

Kumulative Layoutverschiebung (CLS)

CLS misst die visuelle Stabilität, d. h. wie stabil Ihr Seitenlayout ist und wie sich Elemente darin bewegen. Mit anderen Worten, CLS versucht, die Stabilität der Elemente zu analysieren, die auf den Bildschirm geladen werden. Es kann oft vorkommen, dass Elemente auf einer Seite wie Schaltflächen und Bilder beim Laden der Seite verschoben werden. Dies passiert, wenn noch ein großformatiger Hintergrund geladen wird. Es kann auch aufgrund von Werbung passieren. Obwohl Anzeigen die Lebensader zahlreicher Websites sind, können sie oft recht langsam geladen werden. Einige weitere häufige Gründe für eine schlechte CLS-Metrik sind IFrames, eingebettete Bilder und Videos, Inhalte mit vielen Skripten usw. Infolgedessen bewegen sich Elemente wie Schriftarten, Text, Schaltflächen und Bilder zufällig und unerwartet auf der Seite dies wird dann von Google als schlechte Benutzererfahrung gekennzeichnet.

Die CLS-Metrik vergleicht Frames Ihrer Webseite, um die Bewegung der Elemente zu messen. Die Schwere der Bewegungen wird durch den Vergleich der einzelnen Punkte, an denen die Verschiebung stattfindet, berechnet. Noten von 0,1 und darunter gelten als „gut“. Wenn Ihre Punktzahl höher ist, beachten Sie Folgendes:

  • Fügen Sie Größenattribute in Ihre Bilder und Videos ein.
  • Sie können auch CSS-Felder für das Seitenverhältnis verwenden, um den Platz anzugeben, der von Bildern oder Videos benötigt wird. Dadurch kann der Browser den Elementen sofort den richtigen Platz zuweisen, und sie werden nicht plötzlich erscheinen und andere Inhalte verdrängen.
  • Vermeiden Sie es, neue Inhalte über bestehenden Inhalten erscheinen zu lassen, wenn ein Benutzer interagiert.
  • Fügen Sie Ihrer Webseite unter allen vorhandenen Inhalten neue Elemente hinzu.

Erste Eingangsverzögerung (FID)

FID misst die Zeit, die ein Benutzer benötigt, um tatsächlich mit Ihrer Website interagieren zu können. Es gibt eine kleine Zeitspanne zwischen der ersten Interaktion eines Benutzers mit Ihrer Seite und dem tatsächlichen Beginn der Verarbeitung einer Antwort auf die Interaktion durch den Browser. Diese Lücke wird durch FID gemessen. Google behauptet, dass diese Zeit 100 ms oder weniger betragen sollte. Wenn Ihr FID in den Bereich von 100-300 ms fällt, muss er bearbeitet werden. Wenn die Punktzahl über 300 liegt, wird die Leistung Ihrer Website als schlecht angesehen.

In einfachen Worten misst FID die Interaktivität Ihrer Website. Dazu gehören alle Arten von Interaktionen, von der Auswahl einer Menüoption über das Klicken auf einen Link bis hin zum Eingeben von etwas in ein Feld (Scrollen und Zoomen fallen nicht unter diese Kategorie von Metriken).

Wenn ein Browser ausgelastet ist, kann er eine Benutzeranfrage oder -interaktion möglicherweise nicht schnell verarbeiten, was zu Latenz führt. Dies geschieht normalerweise, wenn die Seite eine große Menge an JavaScript-Code enthält, der ausgeführt werden muss. Um Ihren FID zu verbessern, beachten Sie die folgenden Punkte:

  • Lange Aufgaben neigen dazu, den Haupt-Thread zu blockieren und ihn vorübergehend daran zu hindern, Benutzereingaben zu verarbeiten. Daher sollten Sie lange Aufgaben in kleinere, asynchrone Aufgaben aufteilen. Dadurch kann der Browser Benutzeraktionen zwischen diesen Aufgaben verarbeiten. Stellen Sie außerdem sicher, dass die für diese Aufgaben benötigte Zeit 50 ms nicht überschreitet.
  • Minimieren Sie den Umfang der auf Clientseite erforderlichen Nachbearbeitung. Dadurch wird die Belastung ihres Browsers erheblich reduziert.
  • Erwägen Sie die Verwendung von Webworkern, um die Belastung des Haupt-Threads zu reduzieren.
  • Entfernen Sie alle unkritischen Skripts von Drittanbietern.

Werkzeuge und Techniken, die Sie verwenden können

Hier sind einige Tools und Techniken, mit denen Sie die meisten Probleme im Zusammenhang mit Core Web Vitals lösen können.

  • Überprüfen Sie Ihr Hosting. Mit Hilfe schneller Webhoster mit größerer Rechenleistung sollten die meisten Probleme mit LCP und FID gelöst werden. Identifizieren Sie, welche Art von Hosting Ihre Website erfordert, und treffen Sie dann die beste Wahl.
  • Richten Sie Caching für Ihre Website ein. WP Rocket ist ein großartiges Tool, das dies mit vernachlässigbarem Aufwand für WordPress-Websites einrichten kann.
  • Lazy Loading implementieren. Dadurch wird sichergestellt, dass nur der sichtbare Teil der Webseite geladen wird und nicht der gesamte. Dadurch werden die Ladegeschwindigkeiten auf Ihrer Website hoch gehalten. WP Rocket und Autoptimize sind gute Tools, um dies einzurichten.
  • Richten Sie ein CDN oder Cloud Delivery Network ein. Dadurch werden weltweit virtuelle Server für Ihre Website eingerichtet, sodass Menschen auf der ganzen Welt sie ohne Geschwindigkeitsprobleme besuchen können.
  • Komprimieren Sie Ihre Bilder. Wenn Sie nur sehr hochwertige Bilder bereitstellen, dauert das Laden Ihrer Website unnötig lange. Verwenden Sie Tools wie ShortPixel und io, um die Größe von Bildern zu reduzieren, ohne die Qualität zu beeinträchtigen. Versuchen Sie, Bilder im .webp-Format zu verwenden, da diese am webfreundlichsten sind.
  • Bereinigen Sie Ihre Skripts und entfernen Sie alle, die Sie nicht benötigen. Wenn Ihre Website etwas älter ist, haben Sie bestimmt einige Plugins, die Sie nicht mehr verwenden. Deinstallieren und entfernen Sie sie.
  • Führen Sie ein Upgrade auf HTTPS durch, falls Sie dies noch nicht getan haben. Es ist schneller.

Fazit

Wenn Sie alle Best Practices des Website-Designs befolgen und alle oben genannten Punkte im Hinterkopf behalten, werden Ihre Ergebnisse stark davon profitieren. Es dreht sich alles um Ihre Besucher und deren Web-Erfahrung. Solange Sie die Erfahrung Ihrer Benutzer auf unserer Website weiter verbessern können, sollten Sie keine Probleme haben, eine effektive und erfolgreiche Website aufrechtzuerhalten.