Deutsch Deutsch English English

Cumulative Layout Shift (CLS)

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) ist eine der drei Core Web Vitals-Metriken von Google und misst die visuelle Stabilität einer Webseite. CLS quantifiziert, wie oft unerwartete Layout-Verschiebungen während des gesamten Lebenszyklus einer Seite auftreten.

Definition und Bedeutung

CLS misst die Summe aller Layout-Verschiebungen, die nicht durch Benutzerinteraktionen verursacht werden. Diese Verschiebungen entstehen, wenn sichtbare Elemente ihre Position ändern, nachdem sie bereits gerendert wurden.

Wichtige Kennzahlen:

  • Gut: CLS ≤ 0.1
  • Verbesserungsbedarf: 0.1 < CLS ≤ 0.25
  • Schlecht: CLS > 0.25

Wie wird CLS berechnet?

Berechnungsformel

CLS wird durch die folgende Formel berechnet:

CLS = Σ (Impact Fraction × Distance Fraction)

Impact Fraction: Anteil des Viewports, der von der Layout-Verschiebung betroffen ist
Distance Fraction: Größte Distanz, die ein Element verschoben wurde (relativ zur Viewport-Größe)

Messzeitpunkt

CLS wird während der gesamten Lebensdauer einer Seite gemessen, nicht nur beim ersten Laden. Dies umfasst:

  • Initiales Laden
  • Dynamische Inhalte
  • Benutzerinteraktionen
  • Asynchrone Ressourcen

Häufige Ursachen für Layout Shifts

1. Bilder ohne Dimensionen

Problem: Bilder werden ohne feste Breite und Höhe geladen, wodurch das Layout springt, sobald das Bild geladen wird.

Lösung:

<!-- Schlecht -->
<img src="image.jpg" alt="Beschreibung">

<!-- Gut -->
<img src="image.jpg" alt="Beschreibung" width="800" height="600">

2. Dynamisch eingefügte Inhalte

Problem: Inhalte werden nach dem initialen Laden hinzugefügt und verschieben bestehende Elemente.

Beispiele:

  • Werbebanner
  • Social Media Widgets
  • Kommentare
  • Empfehlungen

3. Web Fonts ohne Fallback

Problem: Web Fonts werden nachgeladen und ersetzen Fallback-Schriften, wodurch Textgrößen und -abstände sich ändern.

Lösung:

@font-face {
  font-family: 'Custom Font';
  font-display: swap; /* Verhindert FOIT */
  src: url('font.woff2') format('woff2');
}

4. Asynchrone Skripte

Problem: JavaScript lädt Inhalte nach und verschiebt dabei das Layout.

Beispiele:

  • Analytics-Tracking
  • Chat-Widgets
  • Cookie-Banner

CLS-Optimierungsstrategien

1. Bilder optimieren

Reservierter Platz für Bilder:

<div class="image-container" style="aspect-ratio: 16/9;">
  <img src="image.jpg" alt="Beschreibung" loading="lazy">
</div>

CSS-Lösung:

.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Web Fonts optimieren

Font-Display-Strategien:

@font-face {
  font-family: 'Custom Font';
  font-display: swap; /* Schneller Text sichtbar */
  src: url('font.woff2') format('woff2');
}

/* Fallback-Schrift definieren */
body {
  font-family: 'Custom Font', Arial, sans-serif;
}

3. Dynamische Inhalte vorbereiten

Reservierter Platz für dynamische Inhalte:

<div class="content-area">
  <div class="placeholder" style="height: 200px;">
    <!-- Inhalt wird hier eingefügt -->
  </div>
</div>

4. CSS-Transformationen nutzen

Statt Layout-Änderungen:

/* Schlecht - verursacht Layout Shift */
.element {
  margin-top: 20px;
}

/* Gut - nutzt Transform */
.element {
  transform: translateY(20px);
}

CLS-Messung und Monitoring

Tools zur CLS-Messung

Tool
Beschreibung
Datenquelle
Google PageSpeed Insights
Lab-Daten für schnelle Tests
Real-World-Daten aus Chrome User Experience Report
Google Search Console
Core Web Vitals-Bericht
Field Data für echte Nutzer
Chrome DevTools
Performance-Tab
Layout Shift Records
Web Vitals Extension
Echtzeit-Messung
Sofortiges Feedback

Chrome DevTools verwenden

Schritt-für-Schritt-Anleitung:

  1. DevTools öffnen (F12)
  2. Performance-Tab auswählen
  3. Record-Button klicken
  4. Seite laden und interagieren
  5. Stop drücken
  6. Layout Shifts in der Timeline suchen

Layout Shift Records analysieren:

  • Cumulative Score: Gesamter CLS-Wert
  • Sources: Ursache der Verschiebung
  • Nodes: Betroffene DOM-Elemente

Best Practices für CLS-Optimierung

1. Dimensionen für alle Medien definieren

<!-- Bilder -->
<img src="image.jpg" width="800" height="600" alt="Beschreibung">

<!-- Videos -->
<video width="800" height="450" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Iframes -->
<iframe src="embed.html" width="800" height="600"></iframe>

2. CSS-Container verwenden

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

.media-container img,
.media-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. Font-Loading optimieren

<!-- Preload wichtige Fonts -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font-Display swap -->
<style>
@font-face {
  font-family: 'Custom Font';
  font-display: swap;
  src: url('font.woff2') format('woff2');
}
</style>

4. Dynamische Inhalte vorbereiten

/* Platzhalter für dynamische Inhalte */
.dynamic-content {
  min-height: 200px;
  background: #f5f5f5;
}

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

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

CLS-Debugging-Techniken

1. Layout Shift Debugging

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

2. Visuelle Debugging-Tools

Chrome DevTools:

  • Rendering-Tab → "Layout Shift Regions" aktivieren
  • Performance-Tab → Layout Shift Records analysieren

Browser-Extensions:

  • Web Vitals Extension
  • Lighthouse CI

3. Automatisierte Tests

// Puppeteer/Playwright Test
const { chromium } = require('playwright');

async function measureCLS() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  const cls = await page.evaluate(() => {
    return new Promise((resolve) => {
      let clsValue = 0;
      new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (!entry.hadRecentInput) {
            clsValue += entry.value;
          }
        }
        resolve(clsValue);
      }).observe({type: 'layout-shift', buffered: true});
    });
  });
  
  console.log('CLS Score:', cls);
  await browser.close();
}

Häufige CLS-Fehler und Lösungen

1. Cookie-Banner ohne reservierten Platz

Problem: Cookie-Banner erscheint plötzlich und verschiebt Content.

Lösung:

/* Platz für Cookie-Banner reservieren */
body {
  padding-bottom: 60px; /* Höhe des Cookie-Banners */
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-banner.show {
  transform: translateY(0);
}

2. Lazy Loading ohne Dimensionen

Problem: Lazy-loaded Bilder verschieben Layout beim Laden.

Lösung:

<div class="image-wrapper" style="aspect-ratio: 16/9;">
  <img 
    src="placeholder.jpg" 
    data-src="real-image.jpg" 
    alt="Beschreibung"
    loading="lazy"
    class="lazy-image"
  >
</div>

3. Dynamische Werbung

Problem: Werbebanner werden nachgeladen und verschieben Content.

Lösung:

<!-- Reservierter Platz für Werbung -->
<div class="ad-container" style="height: 250px; background: #f0f0f0;">
  <div id="ad-slot"></div>
</div>

<script>
// Werbung erst laden, wenn Container sichtbar
const adContainer = document.getElementById('ad-slot');
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadAd();
    observer.disconnect();
  }
});
observer.observe(adContainer);
</script>

CLS und SEO-Impact

Ranking-Faktor seit 2021

CLS ist seit Mai 2021 ein offizieller Google-Ranking-Faktor und Teil der Core Web Vitals. Schlechte CLS-Werte können zu:

  • Ranking-Verlusten in den Suchergebnissen
  • Reduzierter Sichtbarkeit in Google Search Console
  • Schlechter User Experience und höherer Bounce Rate
  • Verlust von Conversions und Engagement

Mobile-First-Indexierung

Da Google mobile-first indexiert, ist CLS besonders wichtig für:

  • Mobile Performance und User Experience
  • Mobile Search Rankings
  • Core Web Vitals auf mobilen Geräten

CLS-Monitoring-Strategien

1. Kontinuierliches Monitoring

Tools für kontinuierliches Monitoring:

  • Google Search Console
  • PageSpeed Insights API
  • Custom Analytics-Integration
  • Real User Monitoring (RUM)

2. Alerts und Benachrichtigungen

// CLS-Alert-System
function checkCLS() {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.value > 0.25) {
        // Alert senden
        sendAlert('CLS Warning', `CLS: ${entry.value}`);
      }
    }
  }).observe({type: 'layout-shift', buffered: true});
}

3. A/B-Testing für CLS

Test-Design für CLS-Optimierung:

  • Variante A: Original-Layout
  • Variante B: Optimiertes Layout mit reservierten Plätzen
  • Metriken: CLS, Bounce Rate, Conversion Rate

Zukunft der CLS-Messung

Erweiterte CLS-Metriken

Google arbeitet an erweiterten CLS-Metriken:

  • CLS 2.0: Verbesserte Messung von Layout Shifts
  • Subframe CLS: Messung in iframes
  • Windowed CLS: Messung in bestimmten Zeitfenstern

Neue Optimierungsmöglichkeiten

CSS-Container-Queries:

@container (min-width: 300px) {
  .content {
    font-size: 1.2rem;
  }
}

CSS-Scroll-Timeline:

@scroll-timeline scroll-timeline {
  source: selector(#scroll-container);
  orientation: vertical;
}

Checkliste für CLS-Optimierung

✅ Technische Checkliste

  • [ ] Alle Bilder haben feste Dimensionen
  • [ ] Web Fonts verwenden font-display: swap
  • [ ] Dynamische Inhalte haben reservierten Platz
  • [ ] CSS-Transformationen statt Layout-Änderungen
  • [ ] Lazy Loading mit Aspect Ratio
  • [ ] Cookie-Banner ohne Layout-Shift
  • [ ] Werbung mit festen Dimensionen

✅ Monitoring-Checkliste

  • [ ] Google Search Console überwachen
  • [ ] PageSpeed Insights regelmäßig testen
  • [ ] Chrome DevTools Performance-Tab nutzen
  • [ ] Real User Monitoring implementieren
  • [ ] Alerts für CLS-Schwellenwerte einrichten

✅ Content-Checkliste

  • [ ] Alle Medien-Dateien optimiert
  • [ ] Font-Loading-Strategie definiert
  • [ ] Dynamische Inhalte vorbereitet
  • [ ] Mobile-First-Ansatz umgesetzt
  • [ ] User Experience priorisiert

Verwandte Themen

Letztes Update: