Cumulative Layout Shift: Warum stabile Layouts ranken

Cumulative Layout Shift (CLS) misst wie viel sich der Seiteninhalt während des Ladens verschiebt. Ein Nutzer liest gerade einen Absatz – und plötzlich springt alles nach unten weil ein Bild oder Banner geladen wurde. Das ist frustrierend und schlecht fürs Ranking. Warum Seiten mit stabilen Layouts besser ranken und wie Sie CLS beheben: CLS ist neben LCP und INP einer der drei Core Web Vitals die Google direkt als Rankingfaktor wertet.

Was CLS misst und wie es berechnet wird

CLS ist eine Score, keine Zeitangabe. Berechnet wird der Anteil der Seite der sich wie weit verschoben hat:

CLS = Impact Fraction × Distance Fraction

• Impact Fraction: Wie viel Prozent des Viewports war von dem Shift betroffen?
• Distance Fraction: Wie weit hat sich das Element relativ zur Viewport-Höhe verschoben?

Google’s Grenzwerte:

• Unter 0,1: Gut (grün)
• 0,1 – 0,25: Verbesserungsbedarf (orange)
• Über 0,25: Schlecht (rot)

CLS ist der am häufigsten scheiternde Core Web Vital – laut CrUX-Daten haben 45 % der untersuchten deutschen Websites CLS-Werte über dem Grenzwert 0,1. Gleichzeitig ist CLS oft der am einfachsten behebbare CWV-Faktor.

Die häufigsten CLS-Ursachen

1. Bilder ohne Größenangaben:

<!-- CLS verursacht: -->
<img src="hero.webp" alt="Hero-Bild">

<!-- CLS-frei: -->
<img src="hero.webp" alt="Hero-Bild" width="1200" height="600">

Ohne width und height weiß der Browser nicht wie viel Platz er reservieren soll. Das Bild lädt – der Content springt.

2. Werbeanzeigen und Cookie-Banner: Elemente die nach dem initialen Rendering in die Seite eingefügt werden und anderen Content verdrängen. Cookie-Banner müssen mit position: fixed implementiert sein.

3. Webfonts mit FOUT: Flash of Unstyled Text – Fallback-Font wird durch Webfont ersetzt und Text springt weil sich die Buchstabenbreiten unterscheiden.

4. Dynamisch eingefügte Elemente: Chat-Widgets, Newsletter-Popups, dynamische Bannerbereiche die nach dem Load erscheinen.

5. Animationen mit Non-Compositor-Properties: Animationen die top, left, width, height statt transform und opacity ändern – lösen Layout-Neuberechnung aus.

CLS messen

Echtzeit in Chrome DevTools:

1. F12 → Performance Tab
2. Seite neu laden mit Aufzeichnung
3. Im Waterfall-Diagramm nach Layout-Shift-Ereignissen suchen (blau markiert)

Lighthouse: Zeigt CLS-Score und identifiziert die Elemente die Shifts verursachen.

WebPageTest: Filmstreifen-Ansicht zeigt frame-by-frame wie Shifts entstehen.

Search Console: Zeigt reale CrUX-CLS-Daten für alle Seitengruppen.

CLS beheben: Konkrete Lösungen

Bilder und Videos: Aspect Ratio reservieren

<!-- In HTML: Dimensionen angeben -->
<img src="produkt.webp" alt="Produkt" width="800" height="600">

<!-- In CSS: Responsiv mit aspect-ratio -->
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Oder mit dem alten Padding-Trick (für ältere Browser): */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Fonts: font-display optimieren

@font-face {
  font-family: 'MeineFont';
  src: url('/fonts/meine-font.woff2') format('woff2');
  font-display: optional; /* Kein FOUT, minimal CLS */
}

font-display: optional lädt den Font nur wenn er sehr schnell verfügbar ist – kein CLS durch Font-Swap.

Dynamische Elemente: Platz reservieren

/* Für Cookie-Banner: position: fixed verhindert Layout-Shift */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Kein CLS weil position: fixed nicht im normalen Fluss */
}

/* Für Werbeplätze: Mindestgröße reservieren */
.ad-container {
  min-height: 90px; /* Standard Banner-Höhe */
  width: 100%;
}

Animationen: Transform statt Position

/* Schlechter (verursacht CLS): */
.element {
  transition: top 0.3s ease;
}

/* Gut (kein CLS, GPU-beschleunigt): */
.element {
  transition: transform 0.3s ease;
  transform: translateY(0);
}
.element:hover {
  transform: translateY(-10px);
}

Websites die alle drei Hauptursachen beheben (Bildgrößen, font-display, position:fixed für Banner), verbessern ihren CLS-Score in 85 % der Fälle auf unter 0,1 – der Aufwand ist minimal verglichen mit dem Einfluss auf Core Web Vitals.

Mehr zu Core Web Vitals finden Sie in unserem Artikel über CSS optimieren für Core Web Vitals.