Scalenut wird G2 Fall Leader 2022 – Content Creation Category

Im Juni 2021 führte Google einen wichtigen Algorithmus ein, der Core Web Vitals als wichtigen Rankingfaktor vorschlug. Das bedeutet, dass das Seitenerlebnis zu einem der entscheidenden Faktoren für das Ranking der SERPs geworden ist.

Was sind die wichtigsten Web-Faktoren, die Seitensignale beeinflussen, und wie kann das Seitenerlebnis verbessert werden? In diesem Blog teilen wir alles, was Sie über Core Web Vitals wissen müssen.

Was ist Core Web Vitals?

Core Web Vitals sind Geschwindigkeitsmetriken, die Teil der Page Experience-Signale von Google sind und zur Bewertung der Benutzererfahrung verwendet werden. Die Metriken bewerten die visuelle Belastung mit Largest Contentful Paint (LCP), die visuelle Stabilität mit Cumulative Layout Shift (CLS) und die Interaktivität mit First Input Delay (FID).

Core Web Vitals berücksichtigt diese Metriken zur Verbesserung der Seitenerfahrung:

• Seitenladeleistung
• Einfache Interaktion
• Visuelle Stabilität einer Seite

Diese Metriken bieten eine einzigartige Perspektive auf verschiedene Elemente, die beeinflussen, wie Benutzer mit einer Website interagieren und interagieren. Während Entwickler die „Benutzererfahrung“ ganzheitlich betrachten müssen, helfen diese unabhängigen Metriken dabei, diese Variablen in kleine Teile zu zerlegen, damit Websitebesitzer technische Probleme auf ihren Websites identifizieren und beheben können.

Warum sind Core Web Vitals wichtig?

Da Core Web Vitals nur eines der Seitenerlebnissignale von Google sind, können sie das Ranking einer Website in den SERPs nicht automatisch ändern. Hohe Punktzahlen in diesen Metriken können jedoch die allgemeine Benutzererfahrung verbessern und einer Website helfen, einen höheren Rang einzunehmen.

Einige gängige Methoden zur Verbesserung der wichtigsten Faktoren des Kernwebs sind:

- Erhöhen der LCP-Ladegeschwindigkeit durch Optimieren von Bildern und Reduzieren von Serveranforderungen.

- Verbesserung der visuellen Stabilität.

- Verbesserung der Interaktivität durch Minimierung der ersten Eingabeverzögerungen.

Es ist wichtig zu beachten, dass ein hoher Page Experience Score Sie nicht automatisch an die Spitze von Google bringt. Wenn Ihre Website beispielsweise einen hohen LCP-Score, aber schlechtes visuelles Design und Layout hat, ist sie möglicherweise immer noch nicht so benutzerfreundlich wie Websites mit niedrigeren Scores, aber überlegenem Design.

Core Web Vitals-Metriken

Der Google-Algorithmus berücksichtigt drei Hauptelemente von Core Web Vitals als Ranking-Faktor. Diese sind:

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

Es gibt jedoch auch einige zusätzliche wichtige Faktoren für das Web. Dies sind „Time to First Byte (TTFB) und First Contentful Paint (FCP)“. „Total Blocking Time (TBT) und Time to Interactive (TTI) helfen bei der Messung der Interaktivität.“

Größte zufriedene Farbe (LCP)

Largest Contentful Paint ist der größte Paint-Vorgang, der von einer Komponente innerhalb einer Webseite ausgeführt wird. Diese Metrik misst, wie viel Arbeit erforderlich ist, um den gesamten Inhalt einer Webseite zu rendern.

Größere Seiten erfordern mehr Ressourcen vom Browser, um korrekt geladen und gerendert zu werden.

Websitebesitzer möchten, dass ihre Seiten schnell geladen werden, um eine angenehme Benutzererfahrung zu bieten. Eine schnelle Ladezeit ist entscheidend für eine positive Benutzererfahrung; Eine Seite, die schnell geladen wird, hat mit größerer Wahrscheinlichkeit einen höheren Rang bei Google.

Darüber hinaus hat sich gezeigt, dass schnelle Ladezeiten das Engagement und die Konversionsraten im Vergleich zu einer Seite mit langsamen Ladezeiten beeinflussen.

1.1 Was misst LCP?

LCP misst die Zeit, die die Seite benötigt, um verschiedene Inhaltsblöcke in einem einzigen Darstellungsbereich zu laden. Diese Metrik berücksichtigt nur die Geschwindigkeit, mit der Inhaltsabschnitte auf dem sichtbaren Bildschirm gerendert werden; nichts unterhalb der Falte wird berücksichtigt.

Das optimale LCP für eine Seite sollte 2,5 Sekunden betragen.

1.2 Wie kann LCP verbessert werden?

Die Page Speed ​​Insights geben die richtigen Vorschläge, um Ihre Seite für LCP zu optimieren. Hier sind ein paar Tipps zur Verbesserung von LCP:

• Optimieren Sie Ihre Bilder: Stellen Sie sicher, dass Sie Ihre Bilder in leichteren Formaten und komprimierten Bildern liefern. Aktivieren Sie die Komprimierung auf Ihrem Webserver, indem Sie die GZIP-Beschleunigung konfigurieren.
• Sie können ein Bildkomprimierungs-Plugin verwenden, das die Bilder in den richtigen Formaten liefert und die Bilder komprimiert.
• Nahezu alle Websites werden von Google mittels Mobile-First-Indexierung indexiert. Daher ist die Optimierung des LCP für Mobilgeräte wichtiger als die Optimierung für den Desktop. Jedes Bild muss verkleinert werden, damit es den Vorgaben des Layouts entspricht.

• Kritische Ressourcen vorab laden: Stellen Sie sicher, dass Ihre Server kritische Ressourcen wie Videos und Schriftarten vorab laden, damit sie bereit sind, wenn der Benutzer sie anfordert. Dadurch wird die Ladezeit Ihrer Seite verkürzt, da weniger vom Cache des Browsers beansprucht wird.

• Reduzieren Sie die Antwortzeit des Servers: Wenn ein Server lange braucht, um auf eine Anfrage zu antworten, erhöht sich auch die Zeit, die zum Rendern der Seite auf dem Bildschirm benötigt wird. Infolgedessen schadet es jeder Seitengeschwindigkeitsstatistik, einschließlich LCP. Am besten nutzen Sie das Content Delivery Network (CDN) oder optimieren und analysieren Ihre Server.

• Renderblockierende Ressourcen entfernen: Der Browser parst den DOM-Baum, wenn er das HTML-Dokument von Ihrem Server erhält. Wenn das DOM externe Stylesheets oder JS-Dateien enthält, muss der Browser anhalten, bevor er mit dem Parsen des Rests des DOM-Baums fortfahren kann. Render-Blocking-Ressourcen sind JS- und CSS-Dateien, die eine Verzögerung der LCP-Zeit verursachen.

Kumulative Layoutverschiebung (CLS)

Cumulative Layout Shift ist eine Metrik, die hilft, Links oder Schaltflächen zu identifizieren, die sich anpassen, nachdem eine Webseite geladen wurde, und die den Schwierigkeitsgrad widerspiegelt, den Benutzer haben werden, mit Elementen auf Ihrer Website zu interagieren, sobald eine Seite gerendert wird. Mit anderen Worten, es wird überprüft, ob sich die Elemente beim Laden einer Seite auf dem Bildschirm bewegen.

Eine starke Benutzererfahrung erfordert gutes UX und Design, und ein Benutzer wird frustriert sein, wenn eine Webseite Elemente wechselt, während er liest. CLS unterstützt Entwickler bei der Bestimmung, ob sich Bilder oder Links auf einer Website verschieben, und ermöglicht es Websitebesitzern, die Zugänglichkeit zu verbessern, die Klickraten zu erhöhen und die Online-Verkäufe zu steigern.

2.1 Was misst CLS?

CLS bestimmt, ob Elemente im sichtbaren Ansichtsfenster ihre Position zwischen zwei gerenderten Frames ändern. Laienhaft ausgedrückt hilft diese Metrik Websitebesitzern dabei, festzustellen, ob Inhalte wie Text, Schaltflächen und Banner herumgereicht werden, während ein Benutzer Inhalte auf einer bestimmten Seite liest.

Elemente, die ihre Position ändern, können Benutzer verwirren und ihre Erfahrung auf einer Seite beeinträchtigen. Daher ist es wichtig sicherzustellen, dass alle Inhalte an Ort und Stelle bleiben, nachdem die Seite auf dem Gerät des Benutzers geladen wurde.

Websitebesitzer sollten einen CLS von 0,1 oder weniger beibehalten.

2.2 Wie kann CLS verbessert werden?

Hier sind die Best Practices zur Minimierung des CLS:

• Verwenden Sie die festgelegten Größenabmessungen für alle Medien: Wenn Sie Medien verwenden, verwenden Sie die richtigen Abmessungen und Einstellungen. Das Festlegen falscher Abmessungen kann dazu führen, dass sich Elemente auf einer Seite verschieben, was zu einem erhöhten CLS-Score führt.
• Minimieren Sie Flash-Objekte: Die Verwendung zu vieler Flash-Objekte kann auch die CLS erhöhen, da sie oft versteckten Code enthalten, der mit dem DOM interagiert. Indem Sie unnötige Flash-Objekte vermeiden, verbessern Sie die Gesamtleistung Ihrer Website und verringern die Wahrscheinlichkeit, dass Elemente langsam geladen werden.
• Neue UI-Elemente vor dem Falten hinzufügen: Wenn Sie einer Seite neue UI-Elemente hinzufügen, stellen Sie sicher, dass sie vor dem Falten im Layout hinzugefügt werden. Dadurch wird sichergestellt, dass das neu eingefügte Element nicht auf einem vorhandenen Element landet, was dazu führen kann, dass es sich verschiebt und eine CLS-Strafe nach sich zieht.

Erste Eingangsverzögerung (FID)

FID ist die Zeit, die zwischen der Interaktion eines Benutzers mit Ihrer Seite und der Reaktion der Seite vergeht. Es wird auch als Reaktionsfähigkeit bezeichnet.

FID misst die Zeit, die eine Seite benötigt, um zu antworten, nachdem ein Benutzer mit ihr interagiert hat. Das Ziel besteht darin, Verzögerungen zu reduzieren, damit die Benutzer ein angenehmes Erlebnis haben, unabhängig davon, ob sie Inhalte durchsuchen oder mit Fragen oder Formularen auf Ihrer Website interagieren.

3.1 Was misst FID?

Wenn eine Seite Elementeingaben von einem Benutzer lädt, misst FID ihre Reaktionsfähigkeit. FID erfasst in diesem Modus nur Ereignisse wie Klicks und Tastendrücke.

FID sollte unter 100 Millisekunden gehalten werden, um eine anständige Benutzererfahrung zu gewährleisten.

FID ist schwer zu quantifizieren, da diese Informationen nur im Feld erhalten werden können. Dies bedeutet, dass Faktoren, auf die Sie keinen Einfluss haben, wie z. B. die Kapazität des Benutzergeräts und die von Ihrem Publikum erfahrene Internetgeschwindigkeit, Ihre Punktzahl beeinflussen.

3.2 Wie kann FID verbessert werden?

Es gibt keine Lösung zur Verbesserung Ihres FID-Scores. Wenn Sie jedoch ein paar einfache Richtlinien befolgen, können Sie eine große Wirkung erzielen:

• JavaScript zurückstellen: Viele Benutzer deaktivieren JavaScript, indem sie die Einstellungen ihres Browsers auf „Java blockieren“ ändern. Dies wirkt sich auf Ihre Punktzahl in FID aus. Wenn Sie Skripts blockieren oder zurückstellen müssen, tun Sie dies so bald wie möglich nach dem Laden der Seite "above the fold".
• Unkritische Skripte von Drittanbietern entfernen: Entfernen Sie alle Skripte von Drittanbietern, die für das Funktionieren Ihrer Website nicht unbedingt erforderlich sind. Dazu gehören „Social-Media-Plug-Ins“, Anzeigen und Google-Analytics-Skripte. Wenn ein Skript erforderlich ist, aber zurückgestellt werden kann, stellen Sie sicher, dass Sie es so früh wie möglich im Ladeprozess der Seite zurückstellen, damit Benutzer eine bessere Erfahrung haben. Minimieren Sie Bild- und Flash-Downloads.
• Verwenden Sie einen Browser-Cache: Dadurch kann Ihre Seite Material schneller laden. Dies beschleunigt das Laden von JS-Aufgaben im Browser Ihres Benutzers.

Was sind die anderen zentralen Leistungsmetriken von Web Vitals?

Core Web Vitals bietet unzählige Daten, die Entwickler nutzen können, um die Benutzererfahrung ihrer Websites zu verbessern. Entwickler können auch erfahren, wie sich ihr Code darauf auswirkt, wie Menschen Inhalte auf ihrer Website konsumieren, und die oben beschriebenen Hauptmetriken.

Diese Metriken beschreiben Verzögerungszeiten oder andere technische Variablen, die sich negativ darauf auswirken können, wie sich ein Online-Publikum mit einer Webseite verbindet. Sehen wir uns also einige andere Metriken an, die Sie verwenden können, um die Erfahrung der Besucher auf Ihrer Website zu bewerten.

Erste zufriedene Farbe (FCP)

First Contentful Paint (FCP) ist die Zeit, die der Browser eines Benutzers benötigt, um DOM-Elemente (Bilder, nicht-weiße Leinwandkomponenten und SVGs) anzuzeigen.

Diese Metrik ist im Bereich der FCP-Scores wie angegeben verfügbar:

• 0–2 Sekunden: Grün (schnell)
• 2–4 Sekunden: Orange (mäßig)
• 4+ Sekunden: Rot (langsam)

Zeit bis zur Interaktivität (TTI)

Time to Interactive ist die Zeit, die der Browser des Benutzers benötigt, um eine erste einfache Anfrage nach dem Start Ihrer Seite auszuführen. Dazu gehört alles vom Laden von Skripten, dem Sammeln von Daten vom Server und dem Rendern von HTML.

Die Ergebnisse für Time To Interactive lauten wie folgt:

• 0–3,8 Sekunden: Grün (schnell)
• 3,9–7,3 Sekunden: Orange (moderat)
• 7,3+ Sekunden: Rot (langsam)

Gesamtsperrzeit (TBT)

Die Gesamtblockierzeit (TBT) ist eine Metrik, mit der Site-Manager bestimmen können, wie lange eine Webseite braucht, um auf bestimmte Benutzereingaben zu reagieren. Diese Metrik, die in Millisekunden berechnet wird und eine Reihe von TBT-Werten hat, erkennt Seiten mit unnötigem JavaScript:

• 0–300 ms: Grün (schnell)
• 300–600 ms: Orange (mäßig)
• 600+ ms: Rot (langsam)

Häufig gestellte Fragen

F. Beeinflussen Core Web Vitals die Suchmaschinenoptimierung?

Antwort: Ja, Core Web Vitals sind laut Google ein Ranking-Signal. web.dev von Google bietet hervorragende Anleitungen zur Optimierung Ihres LCP, FID und CLS, um die Erfahrung und das Ranking Ihrer Nutzer zu verbessern.

F. Ist Core Web Vitals nur für Mobilgeräte?

Antwort: Nein, Core Web Vitals wirkt sich gleichermaßen auf Desktop- und mobile Websites aus. Sie können das Seitenerlebnis-Update jedoch sowohl für Desktop als auch für Mobilgeräte separat erhalten.

F. Wann hat Google Core Web Vitals eingeführt?

Antwort: Google hat Core Web Vitals im Juni 2021 eingeführt, damit Site-Manager die Geschwindigkeit und Leistung ihrer Websites messen können.

F. Wie überprüfe ich meine Core Web Vitals für eine Website?

Antwort: Chrome DevTools ist ein Entwicklertool, das mit dem Chrome-Browser vorinstalliert ist. Klicken Sie einfach mit der rechten Maustaste und wählen Sie „Inspect“ aus, und Chrome DevTools wird gestartet. Möglicherweise finden Sie einige Core Web Vitals-Metriken im Chome DevTools Performance-Panel. Behalten Sie einfach Web Vitals im Auge.

F. Wirkt sich eine kumulative Layoutverschiebung auf Ihre SEO aus?

Antwort: Die kumulative Layoutverschiebung ist ein entscheidender Indikator zur Bestimmung der visuellen Stabilität. Es zählt, wie oft Benutzer von unerwarteten Layoutänderungen überrascht werden. Infolgedessen zeigt ein niedriger CLS-Wert an, dass der Inhalt stabil ist und sich nicht ändert, während ein hoher CLS anzeigt, dass sich der Inhalt ändert.

Fazit

Einige der Best Practices, die Sie in Ihre Website integrieren können, um die Leistung zu verbessern, sind: Minimieren von Code, Verwenden von progressiver Verbesserung und Optimieren von Bildern. Wenn Sie diese Tipps befolgen, wird Ihre Website für Besucher schneller geladen und hilft auch, Ihre Platzierungen in Suchmaschinen zu optimieren.

Sie können Tools wie GTMetrix oder Lighthouse verwenden, um die Einblicke in die Seitengeschwindigkeit absolut kostenlos zu überprüfen.