CLS-Problemfehler in den Core Web Vitals in GSC beheben

Mit der Einführung der Core Web Vitals in GSC hat Google klar gemacht, dass sie die Web Vitals für Seiten als Rankingfaktor berücksichtigen werden. Dies wird zusammen mit Googles anderen Rankingfaktoren wie Seitenladegeschwindigkeit, HTTPS, Mobilfreundlichkeit und sicherem Surfen funktionieren. Es sind noch nicht viele Details veröffentlicht worden, aber die Google Search Console hat begonnen, Berichte über die Core Web Vitals anzuzeigen.

Es besteht aus drei Webleistungsmetriken;

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Derzeit sind nicht viele Informationen verfügbar, wie Sie diese Probleme beheben können, aber es gibt einige Praktiken, die Ihnen helfen können, den kumulierten Layoutverschiebung (CLS) ‘ Mehr als’ für Ihre Webseiten zu lösen.

Was ist Cumulative Layout Shift?

Es ist eine Seitenmetrik, die die Stabilität der Seite meldet. Einfach ausgedrückt, wenn Sie eine Webseite laden, anfangen zu lesen oder irgendwelche Aktionen auszuführen, und wenn plötzlich der Inhalt oder die Elemente der Webseite springen oder sich ändern, kann dies Probleme für das Benutzererlebnis verursachen.

CLS misst die Summe aller individuellen Layoutverschiebungswerte für jede unerwartete Layoutverschiebung, die während der gesamten Lebensdauer der Seite auftritt.

Das obige Beispiel zeigt, dass eine plötzliche Ladung von Elementen über dem Bestellbestätigungsfeld einen versehentlichen Klick verursacht hat. Der CLS ist der Durchschnitt aller solchen Inhaltsverschiebungen auf der Seite.

Um ein gutes Benutzererlebnis zu bieten, sollten Seiten darauf abzielen, einen CLS-Wert von weniger als 0.1 zu haben.

Was verursacht hohen CLS?

Es kann eine Reihe von Problemen geben, die einen höheren CLS verursachen können, aber ich werde einige der Hauptgründe anführen;

• Lazy Load Inhaltsverschiebung
• Bilder ohne Abmessungen
• Anzeigeninjektion
• Einbettungen und iframes ohne Abmessungen
• Ein Inhalt, der aufgrund langsamer Reaktion auf das Laden wartet

Lazy Load Inhaltsverschiebung

Lazy Load ist ein wunderbares Plugin, das die Bilder nur lädt, wenn eine Seite gescrollt wird und der Inhalt in den Ansichtsbereich kommt. Aber oft verursacht dies, dass der Inhalt nach oben und unten verschoben wird, was zu einer Verschiebung führt, bei der der Inhalt unter oder um das Bild herum verschoben wird, um Platz für das neu geladene Bild zu schaffen.

Anzeigeninjektion

Anzeigen sind einer der größten Verursacher von Layoutverschiebungen im Web, indem sie sichtbaren Inhalt, den Sie gerade ansehen, nach unten auf der Seite drücken. Dies geschieht, indem die Anzeigeneinheiten nach dem Laden der Seite geladen werden, was zu erheblichem Jank führt.

Element, das aufgrund langsamer Reaktion auf das Laden wartet

Manchmal können aufgrund einer langsamen HTTP-Antwort einige Elemente etwas Zeit zum Laden benötigen, was dazu führt, dass sich der Inhalt nach oben oder unten verschiebt.

Wie behebt man den hohen CLS-Fehler in Web Vitals?

Wenn die Bilder Zeit zum Laden benötigen und der Inhalt Platz für die Bilder einnimmt. Dann, wenn der Inhalt geladen wird, verschiebt sich der Inhalt nach unten, was zu Layoutinstabilität führt.

Für Bilder, die Inhaltsverschiebung (Jank) verursachen, reservieren Sie den erforderlichen Platz mit CSS-Seitenverhältnis-Boxen. Dieser Ansatz stellt sicher, dass der Browser den richtigen Platz im Dokument zuweisen kann, während die Medien geladen werden. Sie können diesen Beitrag für ein jankfreies Laden von Bildern lesen.

Lazy Loaded Bilder können ebenfalls das Problem verursachen, sie können einen großen Platz schaffen, bevor sie den Bildraum einnehmen. Wenn Sie das Problem der Inhaltsverschiebung aufgrund von Lazy Loading von Bildern haben, können Sie diesen Artikel für die Lösungen lesen.

Wenn Sie Anzeigen im Inhalt platzieren, stellen Sie sicher, dass Verschiebungen beseitigt werden, indem Sie die Slotgröße reservieren. Verwenden Sie Platzhalter, wenn keine Anzeige zurückgegeben wird, anstatt den reservierten Platz zusammenzubrechen. Wenn Sie WordPress verwenden, wird ein gutes Anzeigen-Plugin wie Ad-Inserter dafür sorgen, dass der richtige Platz für die Anzeigen reserviert bleibt, sodass Sie sich keine Sorgen machen müssen.

Vermeiden Sie dynamische Inhalte, dynamische Inhalte sind solche, die nach dem Laden der Seite eingefügt werden. Besonders der Inhalt über der Falz, zum Beispiel Newsletter, Anmeldungen, verwandte Beiträge im Inhalts-DOM. Vermeiden Sie es, diese Art von Inhalt über der Falz zu laden, wenn möglich, versuchen Sie, ein Pop-up-Fenster zu verwenden.

Eine langsame HTTP-Antwort vom Server kann ebenfalls zu Inhaltsinstabilität führen. Wenn Sie ein CDN verwenden und es lange Millisekunden dauert, um die beabsichtigten Elemente zu laden und dies dazu führt, dass sich der Inhalt springt, müssen Sie entweder einen Platz im DOM schaffen oder das Laden mit anderen Elementen synchronisieren.

Es gibt auch andere Ursachen für hohen CLS, Sie können einen detaillierten Leitfaden zur Optimierung von CLS auf der offiziellen Web.Dev-Website finden.

Fazit: Der Beitrag enthält keine technischen oder codebezogenen Lösungen, sondern gibt einen Überblick darüber, was genau das Problem verursacht und wie Sie das Problem angehen können.

Wenn Sie Gedanken zu Fix CLS-Problemfehler in den Core Web Vitals in GSC haben, können Sie gerne unten im Kommentarfeld schreiben. Abonnieren Sie auch unseren DigitBin YouTube-Kanal für Video-Tutorials. Prost!