Was ist der Cumulative Layout Shift (CLS)?

Seit Mitte 2021 stehen Webseitenbetreiber vor einer neuen Herausforderung: mit der Einführung von Googles Mobile First Index werden auch drei weitere Kennzahlen eingeführt, die zusätzlich das Ranking beeinflussen. Cumulative Layout Shift (CLS) ist einer von ihnen und beziffert die visuelle Stabilität einer Website. Die anderen beiden Faktoren bemessen die Ladezeit (Largest Contentful Paint – LCP) und die Interaktivität (First Input Delay – FID). Diese drei zusätzlichen Rankingfaktoren gehören zu den sogenannten Core Web Vitals.

Mit der Einführung der Core Web Vitals gibt Google mobilen Webseiten eine noch größere Bedeutung. Gecrawlt und bewertet wird mit dem Update ausschließlich die mobile Version einer Website. Kurz gesagt: je besser und schneller Ihre mobile Website ist, desto positiver kann sich das auf Ihr Ranking auswirken. Cumulative Shift Layout (CLS) und die anderen beiden Kennzahlen sollen beziffern, wie gut die User Experience einer (mobilen) Website ist.

Was beschreibt der Cumulative Layout Shift?

Mit der Kennzahl Cumulative Shift Layout (kumulative Layoutverschiebung) wird die visuelle Stabilität einer Website in Zahlen ausgedrückt. Sie bezieht sich auf unerwartete Layoutverschiebungen, die zum Beispiel durch das Nachladen einzelner Elemente entstehen können.

Die Ressourcen, also Elemente einer Website, werden asynchron geladen. Das führt dazu, dass einige Elemente schneller zur Verfügung stehen als andere. Wenn die eingesetzten Elemente nicht gut aufeinander abgestimmt sind, dann können sie sich gegenseitig verschieben. Springt ein Button während des Ladevorgangs plötzlich weiter nach unten, beeinflusst das die User Experience negativ.

Jedes Mal, wenn sich im für den User sichtbaren Bereich einer Website (Viewport) ein Element verschiebt, erhält es die Kennzeichnung „unstabil“. Eine für den Wert relevante Layout-Verschiebung liegt aber nur dann vor, wenn ein bestehendes Element seine Startposition verändert. Wenn ein bestehendes Element seine Größe ändern, dann gilt dies nicht als Layout-Verschiebung.

Google unterscheidet zwischen erwarteten und unerwarteten Layout-Verschiebungen. Klickt ein Nutzer auf ein minimiertes Suchfeld oder Menü, dann ist davon auszugehen, dass ein Element aufklappt. Layout-Verschiebungen, die innerhalb einer halben Sekunde nach einer Interaktion durch den Nutzer erfolgen, werden nicht negativ bewertet.

Berechnung des Cumulative Layout Shift

CLS wird anhand von zwei Faktoren berechnet, die miteinander multipliziert werden:

Impact Fraction ist der prozentuale Anteil des für den User sichtbaren Bereichs (Viewport), der durch die Verschiebung betroffen ist.

Impact Fraction ist der prozentuale Anteil des sichtbaren Bereichs, der vom Layout Shift betroffen ist.

Distance Fraction gibt an, wie weit sich der betroffene Content relativ zum Viewport bewegt hat.

Der Wert Distance Fraction gibt an, wie weit der vom Cumulative Layout Shift betroffene Inhalt verschoben wurde.

CLS = Impact Fraction x Distance Fraction

Macht der Content 50% des Viewports aus und wandert um 20% nach unten, sind 70% des Bildschirms von der Layout-Verschiebung betroffen. Die Impact Fraction liegt also bei 0,7. Der Content hat sich um 20% nach unten bewegt, das ergibt eine Distance Fraction von 0,2.

Der CLS wird an unserem Beispiel wie folgt berechnet:

0,7 (Impact Fraction) x 0,2 (Distance Fraction) = 0,14 (Layout Shift Score)

Nach der Bewertung von Google ist das verbesserungsbedürftig und an der Grenze zu schlecht:

CLS - Cumulative Layout Shift

Cumulative Layout Shift messen

Die Core Web Vitals werden mit den gängigen Performance-Tools erhoben. Sie können beispielsweise in der Google Search Console, in den PageSpeed Insights oder in Lighthouse eingesehen werden. Mit Webpagetest gibt es auch ein Open-Source-Tool, das die Kennzahlen online zur Verfügung stellt

So lässt sich der CLS verbessern

Um den CLS-Wert Ihrer Website zu optimieren, können Sie an diesen drei Stellschrauben drehen:

  • Benutzen Sie Größenattribute für verwendete Bilder und Videos oder reservieren Sie diesen Elementen den benötigten Platz mittels CSS.
  • Sorgen Sie dafür, dass es zu keiner Überlagerung von unterschiedlichen Content-Elementen auf Ihrer Website kommt, es sei denn, sie wird durch eine bewusste Interaktion des Nutzers hervorgerufen.
  • Verwenden Sie transformierende Animationen statt Animationen, die eine Veränderung des Layouts bewirken.

Gut zu wissen:

Ranking-Faktoren sind Variablen in der Suchmaschinenoptimierung. Sie haben Einfluss auf die Position, auf der eine Website als Suchergebnis aufgeführt ist. Die genaue Position wird durch einen Suchmaschinenalgorithmus festgelegt, der von Suchmaschine zu Suchmaschine unterschiedlich ist. Google zählt als die wichtigste Suchmaschine.
Um Websites zu bewerten, misst Google die User Experience und hat hierfür diverse Rankingfaktoren ermittelt. Für Webseitenbetreiber werden diese Faktoren in der Search Console bereitgestellt. Welche Relevanz die einzelnen Kennzahlen haben ist nicht eindeutig. Der genaue Algorithmus ist ebenfalls nicht bekannt, daher basiert die Annahme über die Einschätzung immer auch auf Interpretationen und Vermutungen: Hier hilft uns unsere langjährige Erfahrung mit dem Verhalten der Suchmaschinen, und das Expertenwissen um SEO-Werkzeuge und Strategien.