Zuletzt aktualisiert am 5. April 2021.
Was ist CLS? Wie kann ich meine Webseite analysieren und verbessern?
Cumulative Layout Shift ist einer der drei sog. “Web Vitals”-Werte. Google erfasst seit einiger Zeit diese Werte, die die Performance einer Webseite zahlenmäßig erfassen sollen.
Set Mai 2020 werden die sog. Web Vitals in der Google Search Console angezeigt. Und ab Mai 2021 werden sie in das Ranking einfließen.
Im Folgenden zeige ich dir, was Comulative Layout Shift eigentlich bedeutet, wie es entsteht und was du dagegen machen kannst.
Was ist Cumulative Layout Shift (CLS)?
Wer kennt es nicht? Man surft auf einer Webseite, möchte gerade ein Bedienelement dieser Webseite, z.B. einen Button, klicken und exakt in diesem Moment lädt ein neues Seitenelement, beispielsweise ein Werbebanner über dem Button. Der Button rutscht nach unten und man klickt auf das Werbebanner, statt auf den Button. Das nervt!
Und google ist darauf aus, Webseite zu bevorzugen, die keine Nutzer nerven. Das Nutzerverhalten und die Nutzerzufriedenheit stehen spätestens seit den Google Updates der letzten Jahre im Fokus der Suchmaschine.
Die Definition von Cumulative Layout Shift
Cumulative Layout Shift (CLS) ist die quantitative Beschreibung der Verschiebung von Layout-Elementen auf einer Webseite.
CLS ist eine der Kennzahlen der sog. Core-Web-Vitals und will also zahlenmäßig die Verschiebung des Layouts einer Webseite erfassen.
Als Webseitenbetreiber musst du also der Nutzer Willen (und damit auch google Willen ;)) dafür sorgen, dass dieser Effekt vermieden wird.
Und darum nimmt Google CLS als Rankingfaktor auf: Es ist eine Metrik, die zentral für das Nutzererlebnis ist, und die sich quantitativ erfassen und auswerten lässt!
Eine hilfreiche Erläuterung findest du ebenfalls hier im Video:
Ausnahme: Vom User initiierte Layoutänderungen
Neben den “bösen” Layout Shifts gibt es auch Layoutverschiebungen im Viewport, die nicht negativ sind und die Nutzererfahrung stören. Das sind logischerweise vom Nutzer selbst initiierte Verschiebungen, beispielsweise nach dem Klick eines Buttons oder zum Beispiel das Öffnen eines Accordeons usw. Aber Achtung: Die Verschiebung des Layouts (also z.B: das Öffnen des Accordeons) muss innerhalb von 500ms nach der Interaktion (also dem Buttonklick) des Nutzers geschehen. Ansonsten wird die Verschiebung dem CLS zugerechnet!
Kurz und knapp: Was fließt in den CLS ein, und was nicht?
| Wird beim CLS berücksichtigt | Wird beim CLS nicht berücksichtigt |
| Ein eingeblendetes Element verändert seine Startposition (im Viewport) | Ein eingeblendetes Element verändert seine Startposition (außerhalb des Viewport) |
| Scrollen(!) | Ein neues Element erscheint im DOM im Viewport |
| Erwartete Layoutverschiebungen, die >500ms nach Nutzerinteraktion geschehen | Größenänderung eines bestehenden Elements |
| Erwartete Layoutverschiebungen (z.B. durch Buttonklicks), die < 500ms nach Nutzerinteraktion geschehen |
Exkurs: Layoutstabilität
Unbedingt zu empfehlen:
https://github.com/WICG/layout-instability
So wird Cumulative Layout Shift berechnet
Impact fraction * Distance fraction = Cumulative Layout ShiftDas Ergebnis der obigen Formel ist der CLS-Wert, der so auch in den Web-Vitals angezeigt und von google vermutlich auch so interpretiert wird. Das Produkt von Impact Fraction und Distance Fraction ist der CLS.
Welcher CLS-Wert ist gut, welcher ist schlecht?
Da der absolute Großteil aller Leser rund um das Thema CLS erst durch google und die Erhebung desselbigen zu einem Rankingfaktor überhaupt in Kontakt mit der Materie kommen, wollen wir hier auch die Einstufungen der CLS-Werte von Google übernehmen:
| CLS-Wert | Gut oder schlecht? |
| <= 0,1 | gut |
| <= 0,25 | optimierungsbedürftig |
| > 0,25 | schlecht |
OK. WTF sind jetzt Impact Fraction und Distance Fraction? Wie kann ich meinen CLS-Wert berechnen?
Was sind Impact Fraction und Distance Fraction?
a) Impact Fraction
Impact Fraction beschreibt, wie viel % des Viewports ein Element vor und nach einem Layout Shift einnimmt. Der Prozentwert geteilt durch 100 ergibt die Impact Fraction.
An einem Beispiel lässt sich das Ganze sehr gut veranschaulichen: Wenn ein Element vor der Verschiebung z.B. 75% des Bildschirms füllt, im Rahmen der Verschiebung aber um 25% nach unten rutscht, so ist die Impact-Fraction:
75% + 25% = 100%
bzw.
0,75 + 0,25 = 1,00b) Distance Fraction
Die Distance Fraction ist schlicht der Prozentwert, um den sich das Element verschoben hat. In unserem Beispiel also 25% bzw. 0,25.
Wir können aus diesen beiden Werten nun den Cumulative Layout Shift direkt berechnen:
Impact fraction * Distance fraction = Cumulative Layout Shift 1,00 * 0,25 = 0,25
Tools um CLS zu messen
Jetzt kann man natürlich selbst zum virtuellen Maßband greifen und den CLS berechnen. Das ist aber müßig.
Schließlich gibt es eine Reihe nützlicher (online)-Tools, die genau diese Aufgabe für uns übernehmen:
- Chrome Developer Tools
- PageSpeed Insights
- Google Lighthouse
- Google Search Console
- Web Vitals-Plugin für Google Chrome
CLS mit dem Web Vitals-Plugin für google Chrome analysieren
Der einfache Weg. Mit Hilfe des Chrome Plugins sehen wir immer direkt beim Aufruf der jeweiligen Seite, ob nicht nur der CLS, sondern die gesamten Werte der Core Web Vitals in Ordnung sind.
Nach einem Klick auf das rechteckige Symbol des Plugins in der Symbolleiste sieht man dann die einzelnen Werte für die Core Web Vitals, unter anderem den Cumulative Layout Shift.
So ist kinderleicht die Analyse jeder aktuell besuchten Seite möglich.
CLS mit den Chrome Developer Tools analysieren
Der etwas holprigere bzw. aufwändigere Weg, der dafür aber wesentlich detailreichere Analysen und direkte Rückschlüsse auf die den CLS verursachende Elemente erlaubt.
Cumulative Layout Shift und Adsense
Ein leidiges Thema 🙁
Dadurch, dass google Adsense Anzeigen per JavaScript nachgeladen werden, erzeugen sie fast immer einen erhöhten CLS. Erst recht, wenn man “Automatische Anzeigen” gewählt hat, bei denen google die Platzierung automatisch bestimmt.
Das Ergebnis ist sehr häufig ein großes, direkt unter dem Header platziertes, Banner, das natürlich zu astronomischen CLS-Werten führt:
 |  |
Wie kann man das nun verhindern und Adsense mit CLS in Einklang bringen?
a) Dafür sorgen, dass Adsense-Anzeigen nicht im Viewport nach dem Laden erscheinen
So simpel und so hart: Wenn keine automatischen Google-Anzeigen mehr im Viewport nach dem Seitenaufruf eingebunden werden, kann es auch keinen CLS geben.
b) Den Platz für die nachgeladenen Ads “reservieren”, damit sich das Layout nicht nachträglich verschiebt.
Der in meinen Augen etwas smartere Weg, der zugleich auch nicht die Einnahmen schmälert, da die lukrativen Ad-Positionen im Viewport direkt nach dem Laden und/oder direkt unter dem Header erhalten bleiben.
So kannst du CLS auf deiner Webseite verbessern
Grundregel: Möglichst jedes Element sollte eine feste Höhe haben. Für asynchron ladende Inhalte sollte Platz reserviert werden.
Tipp 1)
Alle Elemente, die nachgeladen werden, sollten Größenangaben enthalten.
Tipp 2)
Bilder sollten generell Größenangaben enthalten.
Tipp 3)
Werbeanzeigen, insbesondere Adsense und Co sollten fix mit festen Größenangaben eingebunden werden.
Tipp 4)
box-shadow und box-sizing vermeiden
Tipp 5)
Einbindung von Youtube-Videos und/oder iFrames nur mit festen Größenangaben
Tipp 6)
Die exakte Höhe eines Elements ist nicht bekannt oder ergibt sich erst beim Laden? Dann sollte min-height verwendet werden.
Tipp 7)
Vom Nutzer erwartbare Verschiebungen innerhalb von 500ms abhandeln.
Quellen:
- https://www.demirjasarevic.com/cls/
- https://www.seo-suedwest.de/5814-google-web-vitals-das-steckt-hinter-der-kennzahl.html
- https://support.google.com/webmasters/answer/9205520?hl=de
Dirk
CLS und Ranking: Hatte über Monate Probleme, weil der CLS bei mir sehr instabil war. Jedes Mal, wenn sich im Hintergrund z. B. Plug-ins aktualisiert haben, fiel der CLS unbemerkt und das Ranking gleich mit. Da ich parallel noch stark Backlinks aufbaue, dachte ich zuallererst, dass mein Ranking Rückgang darauf zurückzuführen ist. Nun bin ich etwas schlauer und kann bestätigen CLS muss Top sein, dann gehts auch mit dem Ranking.