Core Web Vitals: Cumulative Layout Shift – Was es ist und wie es für SEO verbessert werden kann

Mit dem nun eingeführten Page Experience-Update von Google haben fein abgestimmte Websites einige neue Ranking-Möglichkeiten.

Insbesondere können sich Websites für einen Ranking-Boost qualifizieren, der auf mehreren neuen Leistungskennzahlen basiert, die Google „Core Web Vitals“ nennt.

Core Web Vitals sind eine Reihe von Kernfunktionen von Webseiten, die sich auf die Benutzererfahrung auswirken. Sie spielen jetzt eine Rolle bei der strategischen Suchmaschinenoptimierung und können das Ranking von Websites in Google beeinflussen.

Google hat drei zentrale Web Vitals definiert:

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

Dieser Artikel ist Teil unserer Reihe über die Aktualisierung der Seitenerfahrung von Google, und ich aktualisiere ihn, um die neuesten Änderungen von Google widerzuspiegeln. Hier werde ich die kumulative Layoutverschiebung oder CLS besprechen:

• Was ist CLS?
• Wie misst man CLS?
• Wie wirkt sich CLS auf SEO aus?
• Wie verbessere ich meinen CLS-Score?

Was ist kumulative Layoutverschiebung (CLS)?

CLS misst die Formatierungsänderungen an einer Webseite nach dem anfänglichen Rendern in einem Browser, normalerweise durch das dynamische Einfügen von Inhalten über dem, was bereits angezeigt wird.

Es ist im Allgemeinen ärgerlich, auf einen Link zu klicken und diesen Link „verschieben“ zu lassen, was zu einem Klick an eine unerwartete Stelle führt. Diese Art von Inhaltsinstabilität auf einer Webseite führt zu einer schlechten Benutzererfahrung.

Google diskutiert CLS hier:

Cumulative Layout Shift (CLS) ist eine wichtige, benutzerzentrierte Metrik zur Messung der visuellen Stabilität, da sie dabei hilft, zu quantifizieren, wie oft Benutzer unerwartete Layoutverschiebungen erleben – ein niedriger CLS trägt dazu bei, dass die Seite ansprechend ist.

Unerwartete Seitenlayoutverschiebungen beeinträchtigen die Benutzererfahrung. Ein Beispiel ist, wenn sich eine Schaltfläche oder ein Link auf der Webseite verschiebt und eine Person dazu veranlasst, auf etwas anderes zu klicken. Dies kann wirklich schlimm sein, wenn es bedeutet, dass sie versehentlich einen Kauf getätigt haben, wie Sie in dieser Demo von Google sehen können:

Wichtig ist, dass Google klarstellt, dass nicht alle Layoutverschiebungen als schlecht angesehen werden:

Eine Layoutverschiebung ist nur dann schlecht, wenn der Benutzer nicht damit rechnet. Andererseits sind Layoutverschiebungen, die als Reaktion auf Benutzerinteraktionen auftreten (Klicken auf einen Link, Drücken einer Schaltfläche, Eingeben in ein Suchfeld und ähnliches), im Allgemeinen in Ordnung, solange die Verschiebung nahe genug an der Interaktion erfolgt, die die Beziehung ist für den Benutzer klar.

Für Layoutverschiebungen, die innerhalb von 500 Millisekunden nach der Benutzereingabe auftreten, wird das hadRecentInput-Flag gesetzt, sodass sie von Berechnungen ausgeschlossen werden können.

Wie wird die kumulative Layoutverschiebung (CLS) gemessen?

CLS wird anhand der Summe aller individuellen Layout-Shift-Scores für jeden unerwarteten Layout-Shift gemessen, der während des schlechtesten „Sitzungsfensters“ eines Seitenaufrufs auftritt.

Ein Sitzungsfenster ist jede 5-Sekunden-Spanne von Verschiebungen, die auftreten, während ein Benutzer eine Seite besucht. Google sucht nach dem 5-Sekunden-Intervall mit den meisten Verschiebungsstrafen, und das ist die Punktzahl für diesen Seitenaufruf.

Um einen Layout-Shift-Score zu berechnen, multipliziert Google den Aufprallanteil und den Entfernungsanteil . Ich werde diese aufschlüsseln.

Impact Fraction gibt an, wie viel Darstellungsbereich ein instabiles Element zwischen zwei Frames einnimmt.

Im Beispiel unten sehen Sie, dass das Element 50 % des ursprünglichen Ansichtsfensters einnimmt, dann aber um 25 % nach unten verschoben wird. Zwischen beiden Frames nimmt das Element 50 % plus 25 % des Darstellungsbereichs ein, wodurch der Anteil der Auswirkung 75 % beträgt.

Beispiel einer Layoutverschiebung zwischen zwei Frames, Google Developers

Distanzbruchteil ist die Distanz, die ein instabiles Element zurückgelegt hat. Das folgende Beispiel zeigt, dass sich das Element um 25 % der Höhe des Ansichtsfensters verschoben hat.

Beispiel für Entfernungsverschiebung im Darstellungsbereich, Google Developers

Zusammenfassend lässt sich sagen: CLS wird anhand des Layout-Shift-Scores gemessen, der folgendermaßen berechnet wird:

Aufprallanteil * Distanzanteil = Layout-Shift-Score

Bei den obigen Beispielen würde die Berechnung so aussehen: 0,75 * 0,25 = 0,1875. Laut Google sollte eine Webseite einen CLS von weniger als 0,1 auf allen Seiten oder Seitenaufrufen Ihrer Website beibehalten. Dieses Beispiel wäre über diesem Ziel, also würde es schlecht abschneiden.

Eine Illustration, um Ihnen eine klarere Vorstellung davon zu geben, wie CLS bewertet wird: Wenn alles innerhalb des Ansichtsfensters in einem einzigen Frame aus dem Ansichtsfenster verschoben würde, hätte dies eine Layoutbewertung von 1,0. (Weitere Beispiele finden Sie auf GitHub.)

Je mehr Elemente Sie auf Ihrer Seite haben, die sich im Darstellungsbereich verschieben, desto schlechter könnte Ihre Punktzahl sein.

CLS-Score-Ziel von Google

Sie können hier mehr über den Layout-Shift-Score lesen und wie Google seine Schwellenwerte hier definiert.

Wie wirkt sich Cumulative Layout Shift (CLS) auf SEO aus?

Wie bei den anderen zentralen Web-Vitals trägt CLS dazu bei, dass das Seitenerlebnis für Ihre Besucher reibungslos ist – sowohl auf Mobilgeräten als auch auf Desktops.

Ein guter Layout-Shift-Score kann dazu beitragen, dass Benutzer nicht von Ihrer Webseite frustriert werden, nicht versehentlich klicken und zu einer anderen Seite weitergeleitet werden und nicht versehentlich einen Kauf tätigen. Eine gute Benutzererfahrung hilft Ihnen, alle Ergebnisse zu erzielen, die wir in SEO sehen möchten: Rankings, Traffic, Conversions und Einnahmen.

Laut einer Studie von Screaming Frog bestanden URLs an Position 1 der Suchergebnisse mit 10 % höherer Wahrscheinlichkeit die zentrale Web-Vitals-Bewertung als URLs an Position 9. Natürlich spiegeln diese Daten vorhandene Seiten wider, auf die möglicherweise keine Feinabstimmung vorgenommen wurde noch nicht den grundlegenden Web-Vitals entsprechen – bevor diese Faktoren auf die Ranking-Algorithmen angewendet wurden.

Betrachtet man CLS, so hatten weniger als die Hälfte (46 %) der mobilen URLs und weniger als die Hälfte (47 %) der Desktop-URLs „gute“ CLS-Werte. Der durchschnittliche CLS-Score betrug 0,29 auf dem Handy und 0,25 auf dem Desktop. Mit anderen Worten, an den meisten Standorten gibt es Raum für CLS-Verbesserungen .

Screaming Frog hat die Erfolgsquoten nach Position segmentiert und festgestellt, dass der Prozentsatz „guter“ URLs abnimmt, wenn Sie die Positionen auf der Suchergebnisseite nach unten verschieben. Das folgende Beispiel sind mobile Ergebnisse, aber sie haben auch die Daten für den Desktop grafisch dargestellt.

„Wie viele Websites bestehen das Core Web Vitals Assessment?“, Screamingfrog.co.uk

Wie verbessere ich meinen CLS-Wert (Cumulative Layout Shift)?

Google bietet Labor- und Feldtools an, mit denen Sie Ihren CLS-Wert messen und dann optimieren können. Für CLS sind Labortools möglicherweise nicht so nützlich wie die echten Daten, die in freier Wildbahn für Ihre Webseiten erfasst werden.

Zu den bereitgestellten Werkzeugen gehören:

• Bericht zur Chrome-Nutzererfahrung (Feld)
• PageSpeed ​​Insights (Labor und Feld)
• Search Console (Core Web Vitals-Bericht) (Feld)
• Chrome-Entwicklungstools (Labor)
• Leuchtturm (Labor)
• Webseitentest (Labor)
• WaterFaller.dev (Labor)

Eine andere Möglichkeit, CLS zu messen, verwendet die Web-Vitals-JavaScript-Bibliothek. Mehr dazu erfahren Sie hier.

Häufige Ursachen für Layoutverschiebungen sind:

• Bilder ohne Maße
• Anzeigen, Videos und andere eingebettete Objekte oder Iframes ohne Abmessungen
• Dynamisch injizierter Inhalt
• Late-Loading-CSS, bei dem Stile angewendet werden, nachdem andere Elemente geladen wurden
• Webfonts, die unsichtbaren oder nicht formatierten Text aufblitzen lassen
• Elemente auf der Seite, die darauf warten, dass andere Elemente über das Netzwerk geladen werden, bevor sie angezeigt werden
• Animieren von Elementen nach „Höhe“ und „Breite“ anstelle von CSS „transform: scale()“
• Animieren von Elementen durch „oben“, „rechts“, „unten“ oder „links“ anstelle von CSS „transform: translate()“

Zu den Grundprinzipien, die CLS verbessern, gehören:

1. Verwenden Sie immer Größenattribute für Bilder, Videos und andere eingebettete Elemente oder Iframes. Wenn ein Element dynamisch geladen wird, verwenden Sie CSS, um alle Containerelemente auf die gleiche Größe oder das gleiche Seitenverhältnis zu formatieren, bevor der Inhalt geladen wird. Wenn der Inhalt dann in diese Containerelemente geladen wird, verschiebt sich die Seite nicht.
2. Fügen Sie Inhalte niemals dynamisch über bestehenden Inhalten ein.
3. Wenn Sie CSS zum Animieren von Elementen verwenden, bevorzugen Sie „Transformations“-Animationen.

Und sehen Sie sich dieses Video über CLS von Google Chrome Developers auf YouTube an:

Möchten Sie detailliertere Informationen? Sehen Sie sich unser On-Demand-Webinar 3 Expertentipps zur Verbesserung von Core Web Vitals an, einschließlich der erweiterten Fragen und Antworten am Ende.

Lesen Sie unsere gesamte Seitenerfahrungsserie für weitere Informationen zu diesem Ranking-Update:

1. Was ist das Page Experience Update?
2. So erstellen Sie eine für Mobilgeräte optimierte Website
3. Aufdringliche Interstitials und warum sie schlecht für SEO sind
4. HTTPS für Benutzer und Ranking
5. Core Web Vitals-Übersicht
6. Core Web Vitals: LCP (größte zufriedene Farbe)
7. Core Web Vitals: FID (Erste Eingabeverzögerung)
8. Core Web Vitals: CLS (kumulative Layoutverschiebung)