CLS (Cumulative Layout Shift): Layout-Stabilität messen und verbessern

CLS (Cumulative Layout Shift) ist die Core-Web-Vital-Metrik für die visuelle Stabilität einer Webseite. Sie misst, wie stark sich Elemente unbeabsichtigt verschieben, während die Seite lädt oder der Nutzer interagiert. Ein guter Wert liegt unter 0,1, alles über 0,25 gilt als schlecht — gemessen am 75. Perzentil der realen Nutzer.

Wie entsteht Layout Shift?

Ein Layout Shift passiert, wenn ein sichtbares Element seine Position ändert und dafür andere Inhalte verdrängt. Typische Auslöser:

Bilder oder Videos ohne reservierte Größe: Der Browser kennt die Maße nicht und schiebt den Text nach unten, sobald die Daten ankommen.
Eingebettete Inhalte wie Werbung, Iframes oder dynamisch nachgeladene Widgets.
Web-Fonts, die erst beim Laden Platz für die endgültige Schriftart reservieren (FOIT/FOUT).
Animationen von top/left-Eigenschaften statt transform.

Der Faktor Verschiebungsdistanz mal betroffene Fläche ergibt den einzelnen Shift-Score. Google fasst die Störungen in Session Windows zusammen: Statt alle Verschiebungen einer Seite zu summieren, werden die schlimmsten Bursts einer Sitzung betrachtet — kurze Rücksetzer durch Ladevorgänge fallen so weniger ins Gewicht.

CLS verbessern

Bilder und Videos immer mit width/height oder aspect-ratio auszeichnen, damit der Browser Platz reserviert.
Platzhalter für dynamische Inhalte (Anzeigen, Banner, Kommentare) vorsehen.
Moderne Bildformate wie WebP nutzen — sie laden schneller und reduzieren späte Layout-Änderungen.
Animationen mit transform und opacity umsetzen statt Positionseigenschaften zu verändern.

Einordnung

CLS ist neben LCP und INP die dritte offizielle Core-Web-Vital-Metrik: Laden (LCP), Reaktionszeit (INP), Stabilität (CLS). Auch Redirects und langsame Serverantworten können indirekt Verschiebungen auslösen, weil Inhalte später eintreffen. Gemessen wird CLS im Browser über das Layout-Shift-API und ausgewertet in Lighthouse oder PageSpeed Insights.