CLS (Cumulative Layout Shift) vermeiden: Stabile Layouts für bessere Rankings

Nichts ist frustrierender als ein Button, der im Moment des Klickens wegspringt. Cumulative Layout Shift (CLS) misst genau diese Instabilität - und bleibt auch 2026 ein entscheidender Ranking-Faktor.

Was ist CLS?

CLS (Cumulative Layout Shift) misst, wie viel sich sichtbare Elemente während des Seitenladens unerwartet verschieben:

CLS = Summe aller unerwarteten Layout-Verschiebungen

CLS-Bewertung

CLS-Wert	Bewertung
≤ 0.1	Gut (grün)
0.1 - 0.25	Verbesserungsbedürftig (orange)
> 0.25	Schlecht (rot)

Warum ist CLS wichtig?

1. User Experience: Verhindert Fehlklicks
2. Core Web Vitals: Ranking-Faktor seit 2021
3. Conversion: Instabile Seiten konvertieren schlechter
4. Barrierefreiheit: Besonders wichtig für Screenreader-Nutzer

CLS messen

1. PageSpeed Insights

https://pagespeed.web.dev/

Zeigt CLS für Lab- und Field-Daten.

2. Chrome DevTools

1. DevTools öffnen (F12)
2. Performance-Tab
3. Aufnahme starten und Seite neu laden
4. “Layout Shift”-Einträge suchen

3. Web Vitals Extension

Chrome-Erweiterung zeigt CLS in Echtzeit.

4. Search Console

Core Web Vitals Bericht zeigt betroffene Seiten.

5. JavaScript API

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout Shift:', entry.value);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

Häufige CLS-Ursachen und Lösungen

1. Bilder ohne Dimensionen

Problem:

<!-- SCHLECHT - keine Dimensionen -->
<img src="bild.jpg" alt="Beispiel">

Das Bild lädt nach und schiebt Content nach unten.

Lösung:

<!-- GUT - mit Dimensionen -->
<img src="bild.jpg" alt="Beispiel" width="800" height="600">

<!-- BESSER - mit aspect-ratio -->
<img src="bild.jpg" alt="Beispiel"
     style="aspect-ratio: 4/3; width: 100%; height: auto;">

CSS-Alternative:

.image-container {
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0; /* Placeholder */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Videos und Iframes

Problem:

<!-- SCHLECHT -->
<iframe src="https://youtube.com/embed/..."></iframe>

Lösung:

<div class="video-container">
  <iframe src="https://youtube.com/embed/..."
          width="560" height="315"
          loading="lazy"></iframe>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. Web Fonts (FOUT/FOIT)

Problem: Flash of Unstyled Text oder Invisible Text

Lösung 1: font-display

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* oder: swap */
}

font-display	Verhalten
auto	Browser entscheidet
block	Unsichtbar, dann Custom
swap	System-Font, dann Custom
fallback	Kurz unsichtbar, System wenn zu langsam
optional	Custom nur wenn gecacht

Lösung 2: Preload

<link rel="preload" href="/fonts/font.woff2"
      as="font" type="font/woff2" crossorigin>

Lösung 3: Metriken anpassen

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

4. Dynamische Werbung (Ads)

Problem: Ads laden nach und schieben Content.

Lösung: Platzhalter reservieren

<div class="ad-container" style="min-height: 250px;">
  <!-- Ad wird hier eingefügt -->
</div>

.ad-container {
  min-height: 250px; /* Standard Ad-Höhe */
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-container::before {
  content: 'Werbung';
  color: #999;
  font-size: 12px;
}

5. Cookie-Banner und Notifications

Problem: Banner erscheint und schiebt Content.

Lösung: Overlay statt Push

/* SCHLECHT - schiebt Content */
.cookie-banner {
  position: relative;
}

/* GUT - Overlay */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

6. Dynamisch eingefügter Content

Problem: Content wird per JavaScript nachgeladen.

Lösung: Platzhalter verwenden

<div class="dynamic-content" style="min-height: 200px;">
  <div class="skeleton-loader"></div>
</div>

.skeleton-loader {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

7. Tabs und Akkordeons

Problem: Tab-Inhalt hat unterschiedliche Höhen.

Lösung: Feste Mindesthöhe

.tab-content {
  min-height: 300px; /* Höhe des größten Tabs */
}

Oder: Transform statt Display

/* SCHLECHT */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* GUT - kein Layout Shift */
.tab-panel {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.tab-panel.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

8. Infinite Scroll und “Mehr laden”

Problem: Neuer Content schiebt Footer/Navigation.

Lösung:

// Content über dem Viewport einfügen
function addContent(items) {
  const container = document.querySelector('.content');
  const lastItem = container.lastElementChild;

  items.forEach(item => {
    // Am Ende einfügen, nicht am Anfang
    container.appendChild(item);
  });
}

CLS bei responsiven Layouts

Problem: Unterschiedliche Layouts

/* Mobile */
.sidebar { display: none; }

/* Desktop */
@media (min-width: 768px) {
  .sidebar { display: block; }
}

Lösung: Container-Queries oder CSS clamp()

.content {
  width: clamp(300px, 70%, 800px);
}

Problem: Responsive Bilder mit srcset

<img srcset="small.jpg 400w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 400px) 100vw, 800px"
     width="800" height="600"
     alt="Beispiel">

Alle Bilder müssen dasselbe Seitenverhältnis haben!

JavaScript-basierte Lösungen

Resize Observer für dynamische Inhalte

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    // Höhe anpassen bevor Layout-Shift passiert
    entry.target.style.minHeight =
      `${entry.contentRect.height}px`;
  }
});

observer.observe(document.querySelector('.dynamic-content'));

IntersectionObserver für Lazy Loading

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
}, { rootMargin: '200px' }); // Früh genug laden

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

CLS-Debugging Workflow

1. Problem identifizieren

// In der Konsole ausführen
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('CLS Entry:', entry);
      console.log('Element:', entry.sources);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

2. Element finden

Die sources-Property zeigt das verschiebende Element:

entry.sources.forEach(source => {
  console.log('Node:', source.node);
  console.log('Previous Rect:', source.previousRect);
  console.log('Current Rect:', source.currentRect);
});

3. Ursache beheben

Element	Typische Ursache	Lösung
<img>	Keine Dimensionen	width/height setzen
<iframe>	Keine Dimensionen	Container mit aspect-ratio
Text	Font-Loading	font-display: optional
Div	Dynamischer Content	min-height setzen
Banner	Push statt Overlay	position: fixed

CLS optimieren: Checkliste

Bilder & Medien

• Alle Bilder haben width und height
• Videos haben Container mit aspect-ratio
• Lazy-loaded Bilder haben Platzhalter

Fonts

• font-display: swap oder optional
• Critical Fonts preloaded
• Fallback-Fonts mit ähnlichen Metriken

Dynamischer Content

• Ads haben reservierten Platz
• Lazy-loaded Content hat min-height
• Skeleton-Loader für async Content

Layout

• Banner/Modals als Overlay
• Tabs mit fester Mindesthöhe
• Kein Content über viewport eingefügt

Testing

• PageSpeed Insights zeigt grünes CLS
• Search Console ohne CLS-Warnungen
• Real User Monitoring implementiert

Fortgeschrittene Techniken

CSS contain

.widget {
  contain: layout; /* Isoliert Layout-Berechnungen */
}

content-visibility

.offscreen-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Geschätzte Höhe */
}

Will-change (sparsam verwenden)

.animated-element {
  will-change: transform;
}

Fazit

CLS-Optimierung ist keine Hexerei - die meisten Probleme lassen sich mit expliziten Dimensionen und reserviertem Platz lösen. Investieren Sie in stabile Layouts, und Ihre Nutzer (und Rankings) werden es Ihnen danken.

Für eine umfassende Core Web Vitals Optimierung analysieren wir gerne Ihre Website.

---

FAQ

Warum ist mein CLS auf Desktop gut, aber Mobile schlecht?

Unterschiedliche Layouts, Viewport-Größen und Ladezeiten. Fonts und Bilder können sich auf Mobile anders verhalten. Testen Sie beide Versionen separat.

Zählen animierte Elemente zum CLS?

Nur wenn sie andere Elemente verschieben. CSS-Transforms (translate, scale) verursachen keinen Layout Shift. Änderungen an width/height/margin schon.

Wie finde ich heraus, welches Element den Shift verursacht?

Chrome DevTools > Performance > Layout Shift Einträge anklicken. Oder die JavaScript Performance API nutzen, um sources zu identifizieren.

Ist CLS wichtiger als LCP oder INP?

Alle drei Core Web Vitals sind gleichwertig. Seit März 2024 hat INP (Interaction to Next Paint) den alten FID-Wert ersetzt und misst die Interaktivität strenger. CLS betrifft aber die gesamte Nutzersession, nicht nur den Ladevorgang - daher besonders relevant für die User Experience. Für optimale Rankings sollten alle drei Metriken im grünen Bereich liegen: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1.