SEO

CLS (Cumulative Layout Shift)

Auch bekannt als: CLS, Cumulative Layout Shift, Layout-Shift

Der Cumulative Layout Shift (CLS) ist die Core-Web-Vitals-Metrik, die die kumulative visuelle Stabilität einer Webseite misst — wie stark Layout-Elemente während des Ladens und der ersten Nutzungs-Sekunden noch ungeplant verspringen. Hohe CLS-Werte entstehen typisch durch nachladende Bilder ohne reservierten Platz, nachladende Werbung oder dynamisch eingespielte Cookie-Banner. Ziel: Unter 0,1 für „Good", 0,1–0,25 für „Verbesserung nötig", über 0,25 für „Schlecht".

Was CLS konkret misst

Der Wert wird berechnet als impact fraction × distance fraction für jeden ungeplanten Layout-Sprung — wie groß ist der Bereich, der verspringt (impact), wie weit verspringt er (distance). Mehrere Sprünge werden aufaddiert. CLS-Wert 0,1 entspricht ungefähr „10 % der sichtbaren Fläche ist innerhalb der Layout-Stabilität-Sitzung um 100 % der Bildschirm-Höhe verschoben". User-getriggerte Layout-Änderungen (Klick auf „Mehr lesen") zählen nicht — nur unerwartete Sprünge ohne User-Input.

Die häufigsten CLS-Killer

Bilder ohne width/height-Attribute — vor dem Laden ist die Höhe 0, danach Pop-Up.
Iframes ohne reservierten Platz — YouTube-Embeds, Maps, Werbung.
Webfonts ohne size-adjust — Text springt beim Font-Wechsel.
Dynamisch eingespielte Werbung oben in der Seite.
Cookie-Banner, die die Seite nach unten drücken.
Async-geladener Content, der Layout über bestehendem Inhalt einfügt.

CLS optimieren — Standardlösungen

Width und Height auf jedem Bild — Browser reserviert vor dem Laden den richtigen Platz.
Aspect-Ratio-CSS für responsive Bilder: aspect-ratio: 16 / 9.
Min-Height für Iframes und Werbeflächen — Platzhalter sichern.
Font-display: optional oder size-adjust in @font-face.
Cookie-Banner als Overlay, nicht als Push-Element.
Async-Content unten anhängen, nicht in bestehendes Layout einfügen.

Praxisbeispiel

Beispiel: Eine Magazin-Domain hatte CLS 0,32 (Schlecht). Audit: Hero-Bild ohne explizite Höhe (springt beim Laden), Newsletter-Banner unterhalb (lädt async ein und schiebt Content nach unten), Webfont ohne fallback-Tuning (Text-Sprung beim Font-Wechsel). Drei Fixes über 2 Sprints: Explizite Bildmaße, Min-Height auf Banner-Slot, Webfont-fallback mit size-adjust. Nach 6 Wochen: CLS 0,04 (Good). Beobachteter Sekundär-Effekt: Klicks auf falsche Buttons (verursacht durch Layout-Shifts) sanken merklich, Bounce Rate verbesserte sich um 6 %.

Wird in Rankmio genutzt fuer

CLS-Audit im SEO-Check

Zur Funktion →

Letzte Aktualisierung: 2026-06-17 · Alle Glossar-Eintraege ansehen