Cumulative Layout Shift (CLS): Visuelle Stabilitaet
Cumulative Layout Shift (CLS) misst die Summe aller unerwarteten visuellen Verschiebungen von Elementen waehrend des gesamten Seitenladevorgangs. Der Schwellenwert fuer gute Performance liegt bei unter 0,1.
Auf einen Blick
- ✓CLS Ziel: unter 0,1
- ✓Groessenangaben fuer Bilder und Videos sind die wichtigste Massnahme
- ✓Web Fonts mit font-display: swap vermeiden FOIT/FOUT-Shifts
- ✓Ads und dynamische Inhalte brauchen reservierten Platzraum
- ✓CLS wird waehrend der gesamten Lebensdauer der Seite gemessen
CLS betrifft die visuelle Stabilitaet und ist oft das am einfachsten zu loesende CWV-Problem.
Haeufige CLS-Ursachen
Bilder ohne Groessenangaben: Wenn width und height fehlen reserviert der Browser keinen Platz. Nach dem Laden verschiebt sich der gesamte Content. Loesung: Immer width und height Attribute oder CSS aspect-ratio angeben.
Web Fonts: Beim Laden von Custom Fonts kann der Text-Bereich springen (FOIT/FOUT). Loesung: font-display: swap und Fonts vorladen mit link rel=preload.
Dynamische Inhalte: Ads, Cookie-Banner und eingebettete Widgets die nach dem initialen Load erscheinen. Loesung: Feste Platzhalter (min-height) fuer dynamische Bereiche reservieren.
Late-loading Elemente: Lazy-geladene Bilder die beim Scrollen eingefuegt werden. Loesung: Aspect-Ratio-Container verwenden.
CLS messen
PageSpeed Insights zeigt den CLS-Wert und identifiziert die groessten Shift-Verursacher. Chrome DevTools Performance Panel visualisiert jeden einzelnen Layout Shift mit Timing und Impact.
Daten & Statistiken
Ads ohne reservierten Platz sind die haeufigste CLS-Ursache auf kommerziellen Websites
Web Almanac (2025)“Layout shifts are frustrating. They can cause users to click the wrong button or lose their reading position.”
— Philip Walton, Google Chrome DevRel