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

Stellen Sie sich vor: Ein Besucher will im Webshop eines Bauhaus-Designshops in Dessau auf “In den Warenkorb” klicken — und im selben Moment springt der Button nach unten, weil ein verspätetes Hero-Bild geladen wird. Genau diese Instabilität misst Cumulative Layout Shift (CLS). Für Anhalter Webseiten — Pharma-Distributoren in Bitterfeld-Wolfen, Wittenberger Hotellerie, Köthener Maschinenbauer — entscheidet ein sauberer CLS-Wert oft, ob die Conversion zustande kommt oder der Nutzer abspringt. Und Google sieht jede Verschiebung mit.

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. Ob Bauhaus-Designshop, Anhaltinischer Heilpraktiker, Wittenberger Hotellerie oder Köthener Maschinenbau: stabile Layouts zahlen direkt auf Conversion und Rankings ein.

Für eine umfassende Core Web Vitals Optimierung analysieren wir gerne Ihre Website — gemeinsam mit unserem Tutorial zu LCP-Optimierung und der technischen SEO-Beratung decken wir alle drei Core Web Vitals ab.

Sie betreuen einen Standort außerhalb Anhalts? Schauen Sie bei unserer Schwester-Site seo-halle.com für den Großraum Halle (Saale), seo-leipzig.com für Leipzig oder seo-stuttgart.com für Süddeutschland. Reine Frontend-Performance ist auch das Thema von webdesigner-halle.de.

---

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.