Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals von Google und misst die visuelle Stabilität einer Webseite. Die Metrik erfasst, wie stark sich sichtbare Inhalte während des Ladens unerwartet verschieben – etwa wenn ein nachgeladenes Bild den bereits gelesenen Text nach unten springen lässt. Als gut gilt ein CLS-Wert von 0,1 oder weniger, gemessen am 75. Perzentil aller realen Seitenaufrufe.

CLS gehört seit 2021 zu den offiziellen Core Web Vitals, mit denen Google die Nutzererfahrung einer Seite bewertet. Während Largest Contentful Paint die Ladegeschwindigkeit und Interaction to Next Paint die Reaktionsfähigkeit misst, steht CLS für die visuelle Ruhe: Nichts soll unter den Fingern des Nutzers wegrutschen, während die Seite noch lädt.

Kurzprofil des Begriffs

Was misst Cumulative Layout Shift genau?

CLS misst die Summe aller unerwarteten Layout-Verschiebungen, die während der gesamten Lebensdauer einer Seite auftreten. Eine Layout-Verschiebung passiert immer dann, wenn ein bereits sichtbares Element seine Position zwischen zwei gerenderten Frames ändert, ohne dass der Nutzer eine Aktion ausgelöst hat.

Der Wert jeder einzelnen Verschiebung ergibt sich aus zwei Faktoren, die miteinander multipliziert werden:

• Impact Fraction – wie viel Anteil des sichtbaren Bildschirms von der Verschiebung betroffen ist.
• Distance Fraction – wie weit sich das Element relativ zum Viewport verschoben hat.

Ein Element, das die halbe Bildschirmhöhe einnimmt und um ein Viertel der Höhe nach unten rutscht, erzeugt also einen Layout-Shift-Score von 0,5 × 0,25 = 0,125. Wichtig: Seit 2021 summiert CLS nicht mehr alle Verschiebungen einer Sitzung, sondern nur die stärkste zusammenhängende Verschiebungsphase (das sogenannte Session Window). Das verhindert, dass langlebige Single-Page-Anwendungen künstlich schlechte Werte anhäufen.

Nur unerwartete Verschiebungen zählen. Bewegt sich Content als direkte Reaktion auf einen Klick oder eine Tastatureingabe innerhalb von 500 Millisekunden, wird die Verschiebung nicht gewertet – der Nutzer hat sie ja selbst ausgelöst.

Was ist ein guter CLS-Wert?

Ein guter CLS-Wert liegt bei 0,1 oder darunter. Google teilt die Skala in drei Bereiche: bis 0,1 gilt eine Seite als „gut“, zwischen 0,1 und 0,25 als „verbesserungswürdig“ und über 0,25 als „schlecht“. Entscheidend ist dabei nicht der beste oder der durchschnittliche Messwert, sondern das 75. Perzentil – also der Wert, den 75 Prozent aller echten Seitenaufrufe erreichen oder unterbieten.

Weil das 75. Perzentil zählt, reicht es nicht, wenn die Seite auf dem eigenen schnellen Testgerät stabil lädt. Google stützt sich auf die Felddaten echter Nutzer mit unterschiedlichen Geräten und Verbindungen. Ein einzelnes ruckelndes Banner auf langsamen Smartphones kann den Wert bereits über die Marke drücken.

Was verursacht Layout-Shifts?

Layout-Shifts entstehen fast immer dadurch, dass der Browser Platz für ein Element reservieren muss, das erst später eintrifft, und den bereits gerenderten Content dafür verschiebt. Die häufigsten Ursachen:

1. Bilder ohne Größenangabe: Fehlen width und height (oder eine aspect-ratio), kennt der Browser die Bildmaße erst beim Laden und schiebt den Folge-Content nach unten. Das passende Bildformat ändert daran nichts – entscheidend ist die reservierte Fläche.
2. Werbung, Embeds und iframes ohne feste Maße: Anzeigen, Social-Media-Einbettungen oder Videoplayer laden asynchron und drücken vorhandenen Content weg, wenn kein Platzhalter definiert ist.
3. Dynamisch nachgeladener Content: Cookie-Banner, Newsletter-Boxen oder „Ähnliche Artikel“, die per JavaScript oberhalb bestehender Inhalte eingefügt werden.
4. Webfonts (FOIT/FOUT): Wenn eine Schrift nachgeladen wird und der Text von der Ersatz- auf die Zielschrift umbricht, verändern sich Zeilenlängen und Höhen.
5. Unsauberes Lazy Loading: Verzögert geladene Bilder ohne reservierte Fläche verschieben das Layout genau in dem Moment, in dem der Nutzer scrollt.

Wie wird CLS gemessen?

CLS wird auf zwei Wegen erhoben: über Felddaten echter Nutzer und über Labortests. Für die Google-Bewertung zählen ausschließlich die Felddaten.

• Felddaten (Field Data): Der Chrome User Experience Report (CrUX) sammelt CLS-Werte anonym von echten Chrome-Nutzern. Diese Daten fließen in PageSpeed Insights und in den Core-Web-Vitals-Bericht der Google Search Console ein – die Grundlage der eigentlichen Bewertung.
• Labordaten (Lab Data): Werkzeuge wie Lighthouse oder die Chrome DevTools simulieren einen einzelnen Seitenaufruf unter kontrollierten Bedingungen. Sie eignen sich zur Ursachensuche, spiegeln aber nicht das reale Nutzerspektrum wider.
• JavaScript-Messung: Die offene web-vitals-Bibliothek von Google erfasst CLS direkt im Browser und lässt sich an jedes Analyse-Tool anbinden.

Ein Unterschied ist zentral: Lab-Tools messen CLS nur bis zum initialen Laden, Felddaten erfassen die gesamte Sitzung inklusive Scrollen und Interaktion. Deshalb kann ein Lighthouse-Wert grün sein, während die Search Console rot meldet.

Wie reduziert man CLS?

CLS reduziert man, indem man dem Browser von Anfang an mitteilt, wie viel Platz jedes Element braucht. Die wirksamsten Maßnahmen:

1. Bild- und Videomaße setzen: Immer width und height (oder aspect-ratio in CSS) angeben, damit der Browser die Fläche vorab reserviert.
2. Platz für Werbung und Embeds reservieren: Feste Container-Höhen für Anzeigen, iframes und dynamische Boxen definieren, statt sie den Content wegdrücken zu lassen.
3. Keinen Content über bestehendem einfügen: Banner und Hinweise unterhalb oder als Overlay statt oberhalb des sichtbaren Inhalts platzieren.
4. Webfonts optimieren: font-display: optional oder swap mit passender Fallback-Schrift nutzen und die wichtigste Schrift vorab laden (preload).
5. Animationen über transform lösen: Bewegungen mit transform statt mit layout-auslösenden Eigenschaften wie top oder height umsetzen.

In der Praxis lohnt es sich, mit den größten sichtbaren Elementen zu beginnen – dort wirkt jede Korrektur am stärksten auf den Score. Wer nicht weiß, welche Elemente die Verschiebung auslösen, findet die Verursacher im Bericht der Search Console oder in der Ebene „Layout Shift“ der Chrome DevTools. Eine strukturierte technische Prüfung dieser und der übrigen Core Web Vitals ist fester Bestandteil eines SEO-Audits.

Häufige Fragen zu CLS

Ist CLS ein Rankingfaktor?
Ja, CLS ist Teil der Core Web Vitals und damit ein bestätigtes, wenn auch schwaches Rankingsignal. Bei vergleichbarer Relevanz kann ein guter CLS-Wert den Ausschlag geben, ersetzt aber keine starken Inhalte.

Warum ist mein CLS auf dem Handy schlechter als am Desktop?
Auf Smartphones ist der Viewport kleiner und die gleiche Verschiebung nimmt relativ mehr Bildschirm ein. Zudem laden mobile Verbindungen Bilder und Anzeigen langsamer nach, was Layout-Shifts begünstigt.

Zählt eine Verschiebung nach einem Klick zum CLS?
Nein, Verschiebungen, die innerhalb von 500 Millisekunden auf eine Nutzeraktion folgen, gelten als erwartet und fließen nicht in den CLS-Wert ein.