SEO

CLS (Cumulative Layout Shift)

Q: Was ist CLS (Cumulative Layout Shift)?

CLS misst visuelle Instabilität — wie stark sich Layout-Elemente unerwartet verschieben während des Ladevorgangs. Kernmetrik der Core Web Vitals. Schwellwerte: unter 0,1 „gut", 0,1–0,25 „verbesserungsbedürftig", über 0,25 „schlecht".

Q: Was verursacht Layout Shifts?

Vier häufige Ursachen: (1) Bilder ohne width/height-Attribute, (2) dynamisch injizierte Werbeanzeigen, (3) Web Fonts, die FOUT/FOIT auslösen, (4) client-side-eingefügte Content-Blöcke.

Q: Wie fixiert man CLS?

Über feste Dimensionen: allen Bildern und Iframes width/height setzen, Ad-Slots mit min-height reservieren, Web Fonts mit font-display: optional oder Preload, keine späten Content-Injektionen ins Above-the-Fold.

Q: Warum ist CLS auch UX-relevant?

Nutzer klicken sonst auf falsche Elemente. Klassisches Beispiel: Nutzer will „Bestellen" klicken, im letzten Moment schiebt sich eine Anzeige darüber, versehentlich wird die Anzeige geklickt. CLS-Optimierung verbessert Conversion Rate.

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 %.

Häufige Fragen

Was ist CLS (Cumulative Layout Shift)?

CLS misst visuelle Instabilität — wie stark sich Layout-Elemente unerwartet verschieben während des Ladevorgangs. Kernmetrik der Core Web Vitals. Schwellwerte: unter 0,1 „gut", 0,1–0,25 „verbesserungsbedürftig", über 0,25 „schlecht".

Was verursacht Layout Shifts?

Vier häufige Ursachen: (1) Bilder ohne width/height-Attribute, (2) dynamisch injizierte Werbeanzeigen, (3) Web Fonts, die FOUT/FOIT auslösen, (4) client-side-eingefügte Content-Blöcke.

Wie fixiert man CLS?

Über feste Dimensionen: allen Bildern und Iframes width/height setzen, Ad-Slots mit min-height reservieren, Web Fonts mit font-display: optional oder Preload, keine späten Content-Injektionen ins Above-the-Fold.

Warum ist CLS auch UX-relevant?

Nutzer klicken sonst auf falsche Elemente. Klassisches Beispiel: Nutzer will „Bestellen" klicken, im letzten Moment schiebt sich eine Anzeige darüber, versehentlich wird die Anzeige geklickt. CLS-Optimierung verbessert Conversion Rate.

Wird in Rankmio genutzt für

CLS-Audit im SEO-Check

Zur Funktion →

Letzte Aktualisierung: 2026-06-17 · Alle Glossar-Einträge ansehen

Kostenloser SEO- & GEO-Check

SEO-Score, KI-Sichtbarkeit und Zitierbarkeit deiner Website in 30 Sekunden — ohne Registrierung.

Jetzt kostenlos prüfen

Bereit, deine Website zu optimieren?

Kostenlos registrieren, 10 Credits erhalten und direkt loslegen.

Jetzt registrieren