Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals und misst, wie stabil das Layout einer Webseite während der Nutzung bleibt. Konkret bewertet CLS, ob sich sichtbare Elemente – wie Bilder, Buttons, Texte oder Banner – spontan verschieben, während Nutzer:innen die Seite laden oder mit ihr interagieren.

Solche unerwarteten Layout-Verschiebungen führen zu Frustration, Fehlklicks und einer insgesamt schlechten User Experience. CLS ist daher ein zentraler Qualitätsfaktor, den Google zur Bewertung der Seitenqualität heranzieht.

Google definiert einen Idealwert von 0,1 oder niedriger. Werte darüber gelten als verbesserungsbedürftig.

Warum ist CLS wichtig?

Verschiebungen auf einer Webseite wirken sich unmittelbar auf das Nutzererlebnis aus:

• Nutzer:innen klicken versehentlich auf falsche Elemente (z. B. Werbebanner statt Button)

• Inhalte springen während des Lesens weg

• Vertrauen in die Seite sinkt, besonders auf mobilen Geräten

• Die Seite wirkt instabil oder schlecht programmiert

Da Google Nutzerfreundlichkeit als Rankingfaktor berücksichtigt, kann ein schlechter CLS-Wert negative Auswirkungen auf SEO und Sichtbarkeit haben.

Wie entsteht ein schlechter CLS-Wert?

Es gibt einige häufige Ursachen für Layout-Verschiebungen:

1. Bilder oder Videos ohne definierte Größe
   Wenn Media-Elemente keine feste Höhe/Breite haben, verschiebt sich der Inhalt erst beim Nachladen.

2. Dynamisch nachladende Anzeigen oder Einbettungen
   Ads, iFrames oder Social Feeds drücken den Inhalt beim Rendering zur Seite oder nach unten.

3. Nachladende Webfonts
   Schriftarten können Text springen lassen (FOUT/FOIT).

4. Plötzlich wachsende Elemente während der Interaktion
   Z. B. Dropdowns oder Banner, die unerwartet erscheinen.

5. Asynchrones oder ungeordnetes Script-Loading
   Skripte, die DOM-Strukturen nachträglich verändern, verursachen Layout-Shifts.

Wie wird CLS gemessen?

Der CLS-Wert berechnet sich aus zwei Faktoren:

• Impact Fraction: Wie viel Platz auf dem Bildschirm sich verschiebt

• Distance Fraction: Wie weit sich das Element bewegt

Der resultierende Wert ist die Summe aller Layout-Verschiebungen während der gesamten Sitzungsdauer.

Tools zur Messung:

• PageSpeed Insights

• Google Search Console (Core Web Vitals Report)

• Chrome User Experience Report (CrUX)

• Lighthouse

• Chrome DevTools

Wie kann man CLS verbessern?

1. Feste Größenangaben für Bilder, Videos und Container verwenden
   HTML width/height oder CSS aspect-ratio setzen.

2. Platzhalter für Anzeigen reservieren
   Fixe Containergrößen verhindern, dass Ads später den Inhalt verschieben.

3. Webfonts optimieren
   font-display: swap oder Preloading einsetzen.

4. Dynamische Elemente stabil integrieren
   Akkordeons, Banner und Widgets so planen, dass sie keine Content-Sprünge verursachen.

5. Lazy Loading sinnvoll einsetzen
   Platzhalter (Skeleton Loading) nutzen, damit Elemente stabil bleiben.

Eine stabile Seite führt zu mehr Vertrauen, besseren Interaktionen und positiven Nutzersignalen.

Wie Du Deine Core Web Vitals verbesserst, kannst Du hier nachlesen.