Cumulative Layout Shift (CLS)
Was ist Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) ist eine Kennzahl der Core Web Vitals, die unerwartete Verschiebungen sichtbarer Seitenelemente während einer Nutzung erfasst. Der dimensionslose Wert sollte höchstens 0,1 betragen. Je höher der Wert ausfällt, desto instabiler wirkt das Layout, etwa wenn Text, Buttons oder Bilder beim Laden ihre Position verändern.
Cumulative Layout Shift (CLS) erklärt
Cumulative Layout Shift (CLS), deutsch: kumulative Layoutverschiebung, misst die visuelle Stabilität einer Website. Die Kennzahl erfasst, wie stark sichtbare Elemente ihre Position verändern, ohne dass der Nutzer die Verschiebung ausgelöst hat. Cumulative Layout Shift gehört gemeinsam mit Largest Contentful Paint und Interaction to Next Paint zu den Core Web Vitals.
Ein typisches Beispiel ist ein Artikel, dessen Text bereits lesbar ist. Wird nachträglich ein Bild ohne reservierten Platz geladen, rutscht der Text nach unten. Besonders problematisch wird eine solche Verschiebung, wenn ein Nutzer gerade einen Button anklicken möchte und durch die Bewegung unbeabsichtigt ein anderes Element auswählt.
Wie wird der CLS-Wert berechnet?
Ein einzelner Layout Shift Score ergibt sich aus zwei Faktoren: dem Anteil des sichtbaren Bereichs, der von der Verschiebung betroffen ist, und der relativen Strecke, um die sich das Element bewegt. Die vereinfachte Formel lautet:
Der endgültige Cumulative Layout Shift entspricht nicht automatisch der Summe aller Verschiebungen während des gesamten Seitenbesuchs. Der Browser fasst zusammenhängende Verschiebungen in sogenannten Session Windows zusammen. Ein solches Zeitfenster beginnt mit einer Verschiebung, endet nach einer Pause von mindestens einer Sekunde und dauert höchstens fünf Sekunden. Für den CLS-Wert zählt das Zeitfenster mit der höchsten Summe.
Verschiebungen werden außerdem nicht immer negativ bewertet. Verändert sich das Layout innerhalb von 500 Millisekunden nach einer Nutzereingabe, kann die Bewegung als erwartete Reaktion gelten. Das betrifft beispielsweise das Öffnen eines Menüs oder das Ausklappen eines FAQ-Elements. Eine nachträglich eingeblendete Werbefläche ohne Nutzereingabe fließt dagegen in die Bewertung ein.
Welche CLS-Werte sind gut?
| CLS-Wert | Bewertung | Handlungsbedarf |
|---|---|---|
| Bis 0,1 | Gut | Visuelle Stabilität regelmäßig kontrollieren |
| Über 0,1 bis 0,25 | Optimierungsbedarf | Größte Verschiebungen identifizieren und beheben |
| Über 0,25 | Schlecht | Ursachen auf wichtigen Seitentypen priorisiert korrigieren |
Für die Bewertung realer Nutzerdaten wird das 75. Perzentil betrachtet. Eine Seite besteht den CLS-Grenzwert, wenn mindestens 75 Prozent der gemessenen Seitenaufrufe einen Wert von höchstens 0,1 erreichen. Ein guter Durchschnittswert allein reicht deshalb nicht aus, wenn ein relevanter Teil der Besucher ein instabiles Layout erlebt.
CLS im PageSpeed prüfen
PageSpeed-Auswertungen können Laborwerte und Felddaten enthalten. Laborwerte entstehen in einer simulierten Testsituation und helfen bei der Fehlersuche. Felddaten stammen aus realen Seitenaufrufen und bilden unterschiedliche Geräte, Viewports, Verbindungen und Nutzungssituationen ab. Ein guter Labortest kann daher neben schwächeren Felddaten stehen, wenn eine Verschiebung nur bei bestimmten Besuchern oder nach längerer Nutzung auftritt.
Messbar ist Cumulative Layout Shift zum Beispiel so: Prüfe zunächst den Seitentyp mit einem kostenlosen Ladezeiten-Check und vergleiche danach mehrere typische URLs sowie mobile und Desktop-Ergebnisse. Einzelne Tests zeigen konkrete Fehler, während Felddaten die tatsächliche Erfahrung der Nutzer abbilden.
Prüfe den PageSpeed deiner Website direkt im Artikel:
Häufige Ursachen für Layout Shifts
Ein hoher Cumulative Layout Shift entsteht meistens, weil der Browser beim ersten Rendern nicht weiß, wie viel Platz ein Element benötigt. Sobald Bilder, Schriftarten, Anzeigen oder externe Inhalte eintreffen, muss der Browser das bestehende Layout neu berechnen. Folgende Ursachen treten besonders häufig auf:
Bei Onlineshops entstehen Verschiebungen häufig durch wechselnde Produktbilder, Preisboxen, Verfügbarkeitsinformationen oder nachgeladene Empfehlungen. Bei redaktionellen Seiten sind Anzeigen, Videos und Schriftarten typische Auslöser. Eine umfassende Kontrolle der technischen SEO sollte deshalb verschiedene Seitentypen und Bildschirmgrößen abdecken.
Cumulative Layout Shift verbessern
Die wirksamste Maßnahme besteht darin, den benötigten Platz vor dem Laden zu reservieren. Bilder und Videos erhalten feste Abmessungen oder ein CSS-Seitenverhältnis. Anzeigen und externe Einbettungen benötigen Container mit einer Mindesthöhe. Nachgeladene Hinweise sollten vorhandene Inhalte überlagern oder unterhalb des sichtbaren Bereichs erscheinen, statt den Seiteninhalt zu verschieben.
Ein verbreiteter Denkfehler besteht darin, nur die Dateigröße von Bildern zu reduzieren. Komprimierte Bilder können die Ladezeit verbessern, verhindern aber keine Layoutverschiebung, wenn ihre Abmessungen fehlen. Für einen niedrigen CLS-Wert muss der Browser den Platz des Bildes kennen, bevor die Bilddatei vollständig geladen ist. Berücksichtige diese Vorgabe bereits bei der technisch und auf SEO ausgerichteten Website-Entwicklung.
CLS für SEO, SEA und GEO
Cumulative Layout Shift ist ein technisches Qualitätssignal innerhalb der Seitenerfahrung. Ein guter CLS-Wert garantiert kein besseres Ranking, weil Google Relevanz, Inhalt, Links und weitere Signale berücksichtigt. Bei inhaltlich vergleichbaren Seiten kann eine stabile Nutzererfahrung jedoch einen zusätzlichen Qualitätsvorteil liefern.
Für SEA kann ein instabiles Layout die Wirkung einer Landingpage beeinträchtigen. Verschiebt sich ein Formular oder Call-to-Action während einer Interaktion, entstehen Fehlklicks und mögliche Abbrüche. CLS sollte deshalb gemeinsam mit Conversion-Rate, Ladezeit und tatsächlichen Nutzerwegen geprüft werden.
Für GEO, also Generative Engine Optimization, ist CLS keine eigenständige Sichtbarkeitskennzahl. Eine technisch stabile Seite erleichtert jedoch das zuverlässige Rendern und Verarbeiten von Inhalten durch Suchmaschinen und andere automatisierte Systeme. Gute Core Web Vitals unterstützen damit die technische Grundlage für Google und KI-Suchen.
CLS, LCP und INP abgrenzen
Der Unterschied zwischen Cumulative Layout Shift, Largest Contentful Paint und Interaction to Next Paint liegt im gemessenen Teil der Nutzererfahrung. CLS bewertet die visuelle Stabilität, LCP die Ladezeit des größten sichtbaren Inhaltselements und INP die Reaktionsgeschwindigkeit nach einer Interaktion. Eine Seite kann deshalb schnell laden und trotzdem einen schlechten CLS-Wert besitzen.
| Kennzahl | Gemessene Eigenschaft | Typisches Fehlerbild |
|---|---|---|
| CLS | Visuelle Stabilität | Elemente springen während der Nutzung |
| LCP | Ladegeschwindigkeit des Hauptinhalts | Großes Bild oder Textelement erscheint spät |
| INP | Reaktionsfähigkeit | Die Seite reagiert verzögert auf Klicks oder Eingaben |
Häufige Fragen zum CLS-Wert
Kann ein CLS-Wert negativ sein?
Nein. Der CLS-Wert beginnt bei 0 und steigt mit den bewerteten Layoutverschiebungen. Ein Wert von 0 bedeutet, dass während der Messung keine unerwartete Verschiebung erkannt wurde.
Warum unterscheiden sich mobile und Desktop-Werte?
Mobile und Desktop-Werte können sich unterscheiden, weil Bildschirmgröße, Schriftumbruch, Navigation und eingeblendete Elemente variieren. Prüfe beide Ansichten getrennt und priorisiere die Geräteklasse mit dem meisten relevanten Traffic.
Beeinflusst ein Cookie-Banner den CLS-Wert?
Ein Cookie-Banner kann den CLS-Wert erhöhen, wenn es vorhandene Inhalte nach unten oder zur Seite verschiebt. Ein reservierter Bereich oder eine Überlagerung des Inhalts vermeidet diese Layoutbewegung.
Zählt Scrollen als Layout Shift?
Normales Scrollen zählt nicht als Layout Shift. Lädt die Seite beim Scrollen neue Inhalte und verschiebt dadurch bereits sichtbare Elemente, kann diese Bewegung jedoch in den CLS-Wert einfließen.
Wie schnell verbessert sich der angezeigte CLS-Wert?
Laborwerte können sich direkt nach einer technischen Korrektur ändern. Felddaten benötigen neue reale Seitenaufrufe und werden über einen längeren Zeitraum zusammengefasst, weshalb Verbesserungen dort zeitversetzt sichtbar werden.
Wenn du Layoutverschiebungen, Ladezeiten und weitere technische Faktoren systematisch prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
