Cumulative Layout Shift (CLS)

Definition: Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals Metriken und misst die visuelle Stabilität einer Webseite während des Ladevorgangs. Ein hoher CLS-Wert bedeutet, dass sich Seitenelemente unerwartet verschieben – beispielsweise springt ein Text-Absatz nach unten, weil ein Bild oder eine Werbeanzeige nachgeladen wird und bestehenden Inhalt verdrängt. Der Zielwert liegt unter 0,1.

Erläuterung

CLS beschreibt ein frustrierendes Nutzererlebnis, das viele Internetnutzer kennen: Man ist dabei, einen Link zu klicken, und im letzten Moment verschiebt sich die Seite – und man klickt versehentlich auf etwas anderes. CLS quantifiziert dieses Problem: Der Score berechnet sich aus der Grösse der betroffenen Fläche multipliziert mit der Distanz der Verschiebung. Je grösser und häufiger solche Verschiebungen, desto höher der CLS.

CLS-Bewertungsskala

Gut (grün): CLS unter 0,1 – stabile Seite, minimale Verschiebungen
Verbesserungsbedarf (gelb): CLS 0,1–0,25 – merkbare Layoutverschiebungen
Schlecht (rot): CLS über 0,25 – erhebliche visuelle Instabilität

Häufige Ursachen für hohen CLS

Bilder ohne Dimensionsangaben: Fehlende width- und height-Attribute – Browser kann keinen Platz reservieren
Werbeanzeigen ohne reservierten Platz: Ad-Container ohne definierte Mindesthöhe springen beim Laden ein
Webfonts mit FOUT: Flash of Unstyled Text – Text ändert nach dem Font-Laden Grösse und verschiebt Layout
Dynamisch injizierter Inhalt: Cookie-Banner, Notification-Bars, Chat-Widgets, die nach dem initialen Render erscheinen
Animationen ohne CSS transform: Animationen, die Layout-Properties verändern (margin, padding, top, left)

CLS verbessern: Die wichtigsten Massnahmen

width und height für alle Bilder setzen: <img width="800" height="450"> oder CSS aspect-ratio – einfachste und wirkungsvollste Massnahme
Platz für Anzeigen vorab reservieren: min-height für Ad-Container definieren, auch wenn kein Ad ausgeliefert wird
font-display: optional oder swap: Verhindert unsichtbaren Text während Font-Load; optional vermeidet FOUT ganz
Cookie-Banner / Benachrichtigungen: Über bestehendem Inhalt überlagern statt ihn zu verdrängen
Animations über transform und opacity: Diese Eigenschaften beeinflussen kein Layout und verursachen keinen CLS

CLS messen

Google PageSpeed Insights: CLS-Wert mit Quellenangabe der verursachenden Elemente
Chrome DevTools: Performance-Tab → Layout Shift-Markierungen in der Timeline
Google Search Console: Core Web Vitals-Bericht → CLS-Seiten mit schlechten Werten
Web Vitals Extension für Chrome: Live-CLS-Anzeige beim Browsen

Praxistipp: Der mit Abstand häufigste CLS-Verursacher sind Bilder ohne definierte Abmessungen. Fügen Sie allen <img>-Elementen explizite width- und height-Attribute hinzu – oder nutzen Sie das CSS-Property aspect-ratio. Damit erlauben Sie dem Browser, den benötigten Platz vorab zu reservieren, bevor das Bild geladen ist. Dieser einzelne Fix löst die Mehrzahl der CLS-Probleme auf Content-Seiten ohne aufwändige Code-Änderungen.