Kumulierter Layout Shift

Was ist Kumulierter Layout Shift?

Ein schlechter CLS-Wert frustriert Ihre Besucher direkt: Wenn Buttons beim Laden wegspringen und Nutzer versehentlich falsch klicken, verlieren Sie Vertrauen und Conversions. Gleichzeitig fließt CLS als Core Web Vital in Googles Ranking-Bewertung ein. Die gute Nachricht: CLS-Probleme lassen sich meist durch einfache Maßnahmen wie feste Bildgrößen, reservierte Werbeplätze und optimiertes Font-Loading beheben.

Kumulierter Layout Shift (Cumulative Layout Shift, CLS) ist eine Core-Web-Vital-Metrik von Google, die die visuelle Stabilität einer Webseite beim Laden misst. CLS misst, wie sehr sich Seitenelemente verschieben, während die Seite lädt – wenn Nutzer z.B. auf einen Button klicken wollen und dieser sich plötzlich verschiebt, ist das CLS. Ein hoher CLS-Wert (0,1 oder mehr) signalisiert eine schlechte Nutzererfahrung und kann zu schlechteren Rankings führen, da Google Stabilität als Ranking-Faktor wertet.

Technisch wird CLS berechnet als Produkt von zwei Werten: Impact Fraction (der Prozentsatz des Viewport, der verschoben wird) und Distance Fraction (wie weit die Elemente sich verschieben). Beispiel: Wenn ein Element 25 % des Viewports überdeckt und sich um 20 % nach unten verschiebt, ist CLS = 0,25 × 0,20 = 0,05 (gut). Hauptursachen für hohen CLS sind: fehlende Bild-Dimensionen, eingebettete Inhalte ohne feste Größe, Schriftarten-Swap, Anzeigen oder Pop-ups, die sich unerwartet einschieben.

In der Praxis lässt sich CLS durch mehrere Techniken optimieren: 1) Bild und Video-Dimensionen im HTML oder CSS festlegen, damit Google den Platz vorher reserviert; 2) Fonts mit font-display: swap verwenden, um Shifts zu reduzieren; 3) Anzeigen, Pop-ups und Widgets in reservierte Container verpacken; 4) CSS transform-Animationen statt Layout-Änderungen nutzen. Google PageSpeed Insights und die Search Console zeigen CLS-Probleme auf; Lighthouse bietet Empfehlungen. Die Optimierung von CLS verbessert nicht nur Rankings, sondern auch das echte Nutzererlebnis deutlich.