Cumulative Layout Shift (CLS)

SEO-Glossar

Definition

Der Cumulative Layout Shift (CLS) ist eine Kennzahl aus den Core Web Vitals, die misst, wie stark sich sichtbare Inhalte einer Seite während des Ladens unerwartet verschieben. Solche Layout-Verschiebungen können durch verzögert geladene Bilder, Schriftarten, Ads oder dynamische Inhalte verursacht werden.

CLS berechnet sich als Summe aller einzelnen Layout-Shift-Ereignisse während der gesamten Ladephase einer Seite. Jeder Shift wird gewichtet nach der Flächenänderung im Viewport und dem Abstand der verschobenen Elemente, um die visuelle Instabilität zu quantifizieren. Ein CLS-Wert von 0 bedeutet keine Verschiebung, ein Wert über 0,1 gilt als verbesserungswürdig. ¹

Definition

SEO-Relevanz

CLS ist direkt SEO-relevant, da Google die Core Web Vitals seit dem Page Experience Update (2021) als Rankingfaktor nutzt. Seiten mit hoher visueller Instabilität können:

schlechtere Rankings erhalten
die Nutzererfahrung verschlechtern
Absprungraten erhöhen

Typische Ursachen für hohe CLS-Werte:

Bilder oder Videos ohne feste Abmessungen
dynamisch eingefügte Ads oder Widgets
Webfonts, die den Text nachladen und verschieben
Lazy-Loading ohne Platzhalter

Durch die Reduzierung von Layout-Shifts verbessert sich nicht nur das Rankingpotenzial, sondern auch die Conversion und Nutzerzufriedenheit, da Inhalte stabiler angezeigt werden. ²

SEO-Relevanz

Praxis-Tipp

Vergib feste Größenangaben für Bilder, Videos und iFrames.
Verwende Platzhalter für Ads oder dynamische Inhalte, die später geladen werden.
Lade Webfonts so, dass Textumschübe vermieden werden (font-display: optional oder swap).
Teste Seiten regelmäßig mit Tools wie Google PageSpeed Insights, Lighthouse oder Web Vitals Extension. ³

Ein praktisches Beispiel:

Eine Produktseite lädt Produktbilder asynchron ohne feste Abmessungen. Beim Laden verschieben sich Text und Buttons, Nutzer klicken versehentlich auf falsche Elemente. Nach der Anpassung der Bildgrößen und Einführung von Platzhaltern sinkt der CLS von 0,35 auf 0,05 – visuelle Stabilität und Nutzerfreundlichkeit steigen deutlich.

Praxis-Tipp

Quellen

¹ Google Web.dev – Cumulative Layout Shift
https://web.dev/cls/

² Google Search Central – Understanding Core Web Vitals and Google search results

https://developers.google.com/search/docs/appearance/core-web-vitals

³ Chrome for Developers – Lighthouse performance scoring

https://developer.chrome.com/docs/lighthouse/performance/performance-scoring