Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals von Google und misst, wie stark sich das Layout einer Webseite nach dem ersten Render noch verschiebt. Wenn Inhalte nachträglich nach unten springen, weil ein Bild ohne Höhenangabe nachlädt, ein Cookie-Banner einklappt oder eine asynchrone Anzeige eingeblendet wird, entsteht ein Layout-Shift. Das ist nicht nur unangenehm zu lesen – es führt regelmäßig zu Fehlklicks („Wo ist mein Button hin?“) und ist seit 2021 ein direkter Google-Ranking-Faktor.

Wie wird CLS gemessen?

CLS wird als dimensionslose Punktzahl ausgewiesen. Jeder Layout-Shift wird zerlegt in:

• Impact Fraction – wie viel Prozent des Viewports verschoben wurden
• Distance Fraction – wie weit (relativ zur Viewport-Höhe)

Beide multipliziert ergeben den Shift-Score. CLS summiert alle Shifts, die nicht durch eine Nutzer-Aktion ausgelöst wurden, innerhalb von 5-Sekunden-Fenstern und nimmt den schlechtesten Fenster-Wert als Endergebnis (Session Window).

Schwellenwerte

Gemessen wird am 75. Perzentil des realen Nutzer-Traffics aus dem CrUX-Datensatz von Google.

Typische Ursachen für hohes CLS

1. Bilder und Videos ohne width/height-Attribute – der Browser kennt die Bildgröße erst, wenn die Datei lädt, und reserviert solange keinen Platz
2. Asynchron eingebundene Werbung, Embeds oder iFrames – Slots werden erst befüllt, wenn das Drittsystem antwortet
3. Web Fonts mit FOIT/FOUT – Schrift-Swap führt zu veränderten Zeilenumbrüchen
4. Dynamisch eingeblendete Banner – Cookie-Banner, Promo-Bars oder Newsletter-Pop-ups, die das Layout nachträglich nach unten drücken
5. DOM-Manipulation via JavaScript nach dem ersten Paint – Elemente werden nachträglich oberhalb des Viewports eingefügt
6. Animationen, die auf top/left statt auf transform setzen und das gesamte Layout neu berechnen

Wie wird CLS optimiert?

• Allen Medien feste Maße geben – width und height direkt im HTML, alternativ aspect-ratio in CSS
• Slots für asynchrone Inhalte reservieren – fixe Höhen für Ad-Container, Embeds, Recommendations
• font-display: optional oder swap statt FOIT; die kritische Schriftvariante vorladen
• Cookie-Banner als Overlay statt als pushender Block einbauen
• Animationen mit transform: translate(...) statt top/left – läuft auf GPU, beeinflusst das Layout nicht
• Skeleton Screens / Placeholder für nachladende UI-Bereiche, damit der Platz schon reserviert ist

Welche Layout-Shifts zählen nicht?

CLS ignoriert bewusst Shifts, die innerhalb von 500 ms nach einer Nutzer-Interaktion stattfinden – ein Click auf „Mehr anzeigen“ darf das Layout verlängern, ohne den Wert zu erhöhen. Wichtig ist, dass die auslösende Interaktion eindeutig vom Nutzer kommt; Auto-Loader oder Scroll-Animationen zählen nicht als Nutzer-Interaktion.

Tools für die Messung

• Google PageSpeed Insights – Field-Daten (CrUX) + Lab-Score
• Lighthouse – im Performance-Audit mit detaillierter Shift-Liste
• Chrome DevTools / Performance Panel – zeigt jeden Shift als Eintrag in der Timeline
• Google Search Console – CLS-Verlauf über echte Nutzer
• web-vitals JS-Library – CLS aktiv messen und an dein Analytics weiterleiten

Häufige Fragen zu CLS

Bedeutet CLS = 0, dass es gar keine Layout-Verschiebungen geben darf? Nein – nur keine unerwarteten. Shifts nach einer expliziten Nutzeraktion zählen nicht.

Warum sehe ich auf meinem Rechner CLS = 0, in der Search Console aber 0,2? Lab-Tests sind ein Einzel-Run unter Idealbedingungen; die Search Console aggregiert echtes Nutzerverhalten über viele Geräte, Verbindungen und Sessions. Späte Layout-Shifts durch langsame Anzeigen oder Tracking-Scripts schlagen dort durch.

Wie schnell wirken Optimierungen? Die Search Console aggregiert über 28 Tage; sichtbare Verbesserung dauert also typischerweise 4–6 Wochen.

Fazit

CLS ist die direkteste Messgröße für Layout-Stabilität – ein wichtiges UX-Signal, das gleichzeitig in das Google-Ranking einfließt. Die häufigste Ursache (Bilder ohne Maße) ist schnell behoben; komplexere Quellen wie asynchrone Anzeigen oder Banner brauchen architektonische Lösungen. Wir analysieren und optimieren CLS gerne als Teil eines SEO-Audits – melde dich für ein unverbindliches Beratungsgespräch.