Cumulative Layout Shift (CLS)
Was ist Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Webseite während ihrer Nutzung. Die Core-Web-Vitals-Kennzahl erfasst unerwartete Verschiebungen sichtbarer Elemente. Ein Wert bis 0,1 gilt als gut, Werte über 0,25 als schlecht. Je niedriger der CLS-Wert ausfällt, desto stabiler bleibt das Layout.
Cumulative Layout Shift (CLS) beschreibt als kumulative Layoutverschiebung, wie stark sichtbare Inhalte nachträglich ihre Position verändern. Ein typisches Beispiel ist ein Text, der nach unten springt, weil oberhalb verspätet ein Bild, eine Werbefläche oder ein Hinweis eingeblendet wird. CLS gehört gemeinsam mit LCP und INP zu den Core Web Vitals.
So entsteht Cumulative Layout Shift
Eine Layoutverschiebung entsteht, wenn ein bereits sichtbares Element seine Ausgangsposition zwischen zwei gerenderten Frames verändert. Der Browser berücksichtigt dabei nur unerwartete Bewegungen. Verschiebt sich ein Bereich unmittelbar nach einer bewussten Nutzereingabe, etwa nach dem Öffnen eines Menüs, zählt die Bewegung in der Regel nicht als störender Layout Shift.
Häufige Ursachen für einen erhöhten Cumulative Layout Shift sind:
Bei Onlineshops entsteht Cumulative Layout Shift beispielsweise, wenn ein dynamisch geladener Warenkorb die Kopfzeile vergrößert oder Produktinformationen nach unten drückt. Dieses Fehlerbild tritt unter anderem bei AJAX-basierten Warenkorbfunktionen auf.
Wie wird CLS berechnet?
Der Wert einer einzelnen Layoutverschiebung ergibt sich aus zwei Faktoren: dem Anteil des betroffenen sichtbaren Bereichs und der relativen Bewegungsdistanz. Die Formel lautet: Layout-Shift-Wert = Impact Fraction × Distance Fraction. Die Impact Fraction beschreibt die vom Element vor und nach der Bewegung belegte Fläche. Die Distance Fraction setzt die größte Verschiebung ins Verhältnis zur Größe des sichtbaren Browserfensters.
Cumulative Layout Shift addiert nicht unbegrenzt jede Bewegung eines vollständigen Seitenbesuchs. Maßgeblich ist die Gruppe zusammenhängender Verschiebungen mit dem höchsten Gesamtwert. Eine solche Gruppe beginnt mit einer Layoutverschiebung, endet nach einer Sekunde ohne weitere Verschiebung und ist auf höchstens fünf Sekunden begrenzt. Dadurch verzerren einzelne spätere Bewegungen langer Sitzungen den Wert weniger stark.
CLS-Grenzwerte 2026
Für die Bewertung der Core Web Vitals wird der CLS-Wert in drei Bereiche eingeteilt. Bei Felddaten gilt eine Seite als gut, wenn mindestens 75 Prozent der erfassten Seitenaufrufe den entsprechenden Grenzwert erfüllen. Mobile und Desktop-Aufrufe sollten getrennt beurteilt werden, weil Bildschirmgröße, Verbindung und Seitendarstellung voneinander abweichen.
| CLS-Wert | Bewertung | Handlung |
|---|---|---|
| Bis 0,1 | Gut | Layout beobachten und bei Änderungen erneut prüfen |
| Über 0,1 bis 0,25 | Verbesserungswürdig | Verursachende Elemente identifizieren und Platz reservieren |
| Über 0,25 | Schlecht | Layoutverschiebungen priorisiert technisch beheben |
Ein CLS-Wert von 0 bedeutet, dass während der Messung keine bewertete unerwartete Verschiebung aufgetreten ist. Ein niedriger Laborwert garantiert jedoch keinen guten Feldwert. Laborbedingungen bilden nur einen definierten Seitenaufruf ab, während Felddaten unterschiedliche Geräte, Bildschirmgrößen, Verbindungen, Cookie-Zustände und personalisierte Inhalte enthalten.
CLS richtig messen
Messbar ist Cumulative Layout Shift mit Labor- und Felddaten. Labordaten entstehen bei einem kontrollierten Test und helfen bei der Fehlersuche. Felddaten stammen aus realen Seitenaufrufen und zeigen, welche Erfahrung Nutzer tatsächlich gemacht haben. Weichen beide Werte voneinander ab, sollten dynamische Inhalte, eingeloggte Zustände und unterschiedliche Viewports geprüft werden.
Prüfe den PageSpeed und die Core Web Vitals deiner Seite mit dem kostenlosen Ladezeiten-Check. Wiederhole die Messung für mehrere Seitentypen, etwa Startseite, Kategorie, Produktdetailseite und Kontaktformular. Ein guter Wert auf der Startseite sagt nichts über Templates mit anderen Bildern, Bannern oder Funktionen aus.
Cumulative Layout Shift verbessern
Die wirksamste CLS-Optimierung besteht darin, benötigten Platz vor dem Laden eines Elements zu reservieren. Bilder und Videos erhalten feste Seitenverhältnisse über die Attribute width und height oder über CSS mit aspect-ratio. Der Browser kann den Platz dadurch berechnen, bevor die eigentliche Datei geladen ist.
Lazy Loading verursacht nicht automatisch einen schlechten Cumulative Layout Shift. Das Problem entsteht erst, wenn der Browser vor dem Nachladen keine Abmessungen des Mediums kennt. Ein verzögert geladenes Bild mit reserviertem Seitenverhältnis bleibt stabil, während dasselbe Bild ohne reservierten Platz den nachfolgenden Inhalt verschieben kann.
Eine technische Prüfung sollte deshalb Seitentemplates und Komponenten untersuchen, nicht nur einzelne URLs. Die technische Onpage-Optimierung umfasst unter anderem Ladeverhalten, Quellcode und Seitendarstellung. Bei umfangreichen Websites liefert ein SEO-Audit mit technischer Analyse eine priorisierte Grundlage für die Umsetzung.
CLS, LCP und INP abgrenzen
Der Unterschied zwischen CLS, LCP und INP liegt in der gemessenen Nutzererfahrung. Cumulative Layout Shift bewertet die visuelle Stabilität. Largest Contentful Paint erfasst, wie lange das größte sichtbare Inhaltselement zum Laden benötigt. Interaction to Next Paint misst, wie schnell eine Seite nach einer Nutzereingabe visuell reagiert.
Eine Webseite kann einen guten LCP und trotzdem einen schlechten Cumulative Layout Shift erreichen. Das größte Bild kann früh erscheinen, während ein später eingeblendeter Banner den gesamten Inhalt verschiebt. Umgekehrt kann ein stabiles Layout langsam laden. Die drei Core Web Vitals müssen deshalb einzeln analysiert und gemeinsam bewertet werden.
Relevanz für SEO, SEA und GEO
Cumulative Layout Shift ist Teil der Seitenerfahrung, die Google zusammen mit weiteren Signalen bewertet. Ein guter CLS-Wert ersetzt weder relevante Inhalte noch interne Verlinkung oder Backlinks. Bei ansonsten vergleichbaren Seiten kann eine stabile Bedienung jedoch zur technischen Qualität beitragen und verhindern, dass Nutzer durch springende Schaltflächen oder Formulare ihr Ziel verfehlen.
Für SEA wirkt Cumulative Layout Shift vor allem auf der Landingpage. Verschiebt sich ein Bestellbutton während des Klicks oder springt ein Formular beim Ausfüllen, können Kaufabbrüche und Fehlbedienungen entstehen. Die Kennzahl ist kein eigenständiger Google-Ads-KPI, sollte aber gemeinsam mit Conversion-Rate und Nutzerverhalten geprüft werden.
Für GEO, also Generative Engine Optimization, ist Cumulative Layout Shift keine direkte Kennzahl der KI-Sichtbarkeit. Technisch zuverlässige Seiten erleichtern jedoch eine konsistente Bereitstellung von Inhalten für Nutzer und Suchsysteme. Eine Optimierung der Benutzerfreundlichkeit verbindet deshalb visuelle Stabilität mit klaren Interaktionen und verständlichen Seitenstrukturen.
Häufige Fragen zum CLS-Wert
Warum ist mein CLS-Wert auf dem Handy schlechter?
Mobile Ansichten reagieren empfindlicher auf nachgeladene Elemente, weil der sichtbare Bereich kleiner ist. Responsive Bilder, mobile Banner, wechselnde Navigationen und Cookie-Hinweise können deshalb einen größeren Anteil des Viewports verschieben.
Kann ein Cookie-Banner den CLS verschlechtern?
Ein Cookie-Banner kann den CLS erhöhen, wenn er nachträglich Platz im normalen Seitenlayout beansprucht und vorhandene Inhalte verschiebt. Ein Overlay über dem Inhalt verursacht dagegen meist keine Layoutverschiebung, kann aber die Bedienbarkeit beeinträchtigen.
Zählen Animationen zum Cumulative Layout Shift?
Animationen zählen, wenn sie eine Neuberechnung des Layouts auslösen und sichtbare Elemente unerwartet verschieben. Animationen über CSS-Eigenschaften wie transform verändern die visuelle Position, ohne das Layout neu anzuordnen, und werden deshalb in der Regel nicht als Layout Shift gewertet.
Warum unterscheiden sich Laborwert und Felddaten?
Ein Labortest bildet einen kontrollierten Seitenaufruf ab. Felddaten enthalten reale Geräte, Bildschirmgrößen, Netzwerkbedingungen, Cookie-Zustände und dynamische Inhalte. Abweichungen sind deshalb normal und liefern Hinweise auf Fehler, die nur unter bestimmten Bedingungen auftreten.
Beeinflusst Lazy Loading den CLS-Wert?
Lazy Loading erhöht den CLS-Wert nur dann, wenn für das nachgeladene Element kein Platz reserviert wurde. Mit festen Abmessungen oder einem definierten Seitenverhältnis kann ein Bild verzögert laden, ohne nachfolgende Inhalte zu verschieben.
Muss jede Unterseite einzeln geprüft werden?
Nicht jede URL benötigt eine manuelle Einzelprüfung. Du solltest jedoch alle wichtigen Templates testen, etwa Kategorien, Produkte, Ratgeber, Formulare und Checkout-Seiten, weil unterschiedliche Komponenten eigene Layoutverschiebungen verursachen können.
Wenn du technische Ursachen und Prioritäten deiner Website einordnen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Kostenlosen Potenzialcheck anfragen
Sie haben noch Fragen?
