CLS (Cumulative Layout Shift) – Definition & Bedeutung
CLS (Cumulative Layout Shift) misst, wie stark Inhalte während des Ladens unerwartet verspringen – etwa wenn ein nachladendes Bild den Text verschiebt. Als Core-Web-Vitals-Metrik bewertet CLS die visuelle Stabilität; gut ist ein Wert unter 0,1.
Was ist CLS?
Der Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals und quantifiziert unerwartete Layout-Verschiebungen: Elemente, die sich nach dem ersten Rendern noch bewegen, weil Bilder, Werbung, Webfonts oder nachgeladene Inhalte Platz beanspruchen. Die Metrik summiert alle unerwarteten Sprünge während des Seitenbesuchs zu einem Wert ohne Einheit – je höher, desto instabiler wirkt die Seite.
Grenzwerte
- Gut: bis 0,1
- Verbesserungswürdig: 0,1–0,25
- Schlecht: über 0,25
Wie bei allen Core Web Vitals zählt der 75. Perzentil-Wert echter Nutzer. Verschiebungen, die direkt auf eine Nutzeraktion folgen (z. B. ein aufklappendes Menü), werden nicht angerechnet – nur das Unerwartete zählt.
Typische Ursachen
- Bilder ohne feste Dimensionen: fehlende width/height-Angaben lassen Inhalte nachrutschen
- Nachträglich eingefügte Banner: Cookie-/Consent-Banner, Countdown-Leisten und Werbeplätze, die Inhalt verdrängen statt zu überlagern
- Webfonts: der Wechsel von Fallback- auf Zielschrift verändert Textumbrüche (FOUT)
- Dynamische Inhalte: Produktempfehlungen, Trust-Siegel oder Bewertungs-Widgets, die ohne reservierten Platz erscheinen
Warum CLS im E-Commerce zählt
Layout-Sprünge kosten im Shop bares Geld: Der klassische Fall ist der Kaufen-Button, der im Moment des Klicks nach unten rutscht – und der Nutzer landet auf einem Werbe-Banner. Das frustriert, wirkt unseriös und drückt die Conversion. Zusammen mit LCP und INP gehört CLS zum Performance-Set, das Google als Ranking-Signal heranzieht. Praktische Gegenmaßnahmen: Platz für alles Nachladende fest reservieren (aspect-ratio, min-height), Banner überlagern statt einschieben und Fonts mit font-display-Strategie laden – mehr dazu im Core-Web-Vitals-Leitfaden und im Shop-Health-Check.
Häufige Fragen
Warum ist mein CLS-Wert im Feld schlechter als im Labor?
Laborwerte messen nur den initialen Ladevorgang unter festen Bedingungen. Felddaten erfassen den kompletten Besuch echter Nutzer – inklusive spät nachladender Inhalte, personalisierter Elemente und Consent-Banner, die im Labor oft gar nicht erscheinen. Für das Ranking zählen die Felddaten.
Zählt das Cookie-Banner in den CLS-Wert?
Ja, wenn es Inhalt verschiebt. Ein Banner, das als Overlay über der Seite liegt, erzeugt keinen Layout Shift – eines, das den Seiteninhalt nach unten drückt, geht voll in die Metrik ein. Die Einbindung des Consent-Managements ist deshalb ein häufiger, leicht behebbarer CLS-Treiber.
Wie bekomme ich CLS unter 0,1?
Drei Maßnahmen lösen die meisten Fälle: allen Bildern und Embeds feste Dimensionen bzw. ein aspect-ratio geben, für dynamisch nachladende Elemente (Empfehlungen, Widgets, Banner) Platz per min-height reservieren und Webfonts mit font-display: swap plus passenden Fallback-Metriken laden.
Bereit, gemeinsam Großes zu schaffen?
Lass uns unverbindlich über dein Projekt sprechen.