CLS (Cumulative Layout Shift)

Was ist der Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift (CLS) misst, wie stark sich sichtbare Inhalte einer Webseite während des Ladens unerwartet verschieben. CLS ist ein zentraler Web-Vital-Kennwert von Google und zeigt dir, wie stabil das Layout ist – und wie angenehm oder frustrierend Nutzer deine Seite wahrnehmen.

1. Grundlagen: Was bedeutet CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift) ist eine Kennzahl für die visuelle Stabilität einer Webseite. Sie zeigt an, wie stark sich Elemente wie Texte, Bilder, Buttons oder Banner nach dem ersten Rendern noch verschieben. Ein niedriger CLS-Wert steht für ein stabiles Layout, ein hoher Wert für störende Layout-Sprünge.

Google nutzt CLS als Teil der Core Web Vitals, um die User Experience einer Seite zu bewerten. Besonders in Conversion-kritischen Bereichen wie Produktdetailseiten, Warenkorb oder Checkout können unerwartete Verschiebungen direkte Auswirkungen auf Umsatz und Kampagnen-Performance haben.

2. Wie wird der CLS-Wert berechnet?

CLS basiert auf zwei Faktoren: der Fläche, die sich auf dem Bildschirm verschiebt, und der Entfernung, um die sich diese Fläche bewegt. Daraus entsteht ein dimensionsloser Score.

CLS = Layout Shift Impact × Layout Shift Distance

Zur Einordnung:

Layout Shift Impact: Anteil des Viewports (sichtbarer Bereich), der von der Verschiebung betroffen ist.
Layout Shift Distance: Wie weit sich das betroffene Element relativ zur Bildschirmhöhe bewegt.

Vereinfacht gesagt: Je mehr Fläche sich sichtbar verschiebt und je größer die Verschiebung ist, desto höher fällt der Cumulative Layout Shift aus.

3. Gute und schlechte CLS-Werte: Benchmarks

Google gibt klare Schwellenwerte vor, an denen du dich orientieren kannst:

CLS-Bereich	Bewertung	Empfehlung
≤ 0,10	Gut	Layout weitgehend stabil, kein akuter Handlungsbedarf
0,11–0,25	Optimierungsbedarf	Relevante Elemente prüfen, problematische Verschiebungen reduzieren
> 0,25	Schlecht	Sofortige Analyse; UX- und SEO-Risiko, besonders im E-Commerce

Wichtig: Google wertet CLS aus echten Nutzerdaten (Field Data), wenn ausreichend Traffic vorhanden ist. Ein kurzzeitiger Peak durch ein spezielles Modul (z. B. eine Promo-Leiste) kann also den Score beeinflussen, wenn er häufig genug vorkommt.

4. Typische Ursachen für einen hohen CLS (Cumulative Layout Shift)

Layout-Verschiebungen entstehen meist durch nachträgliches Laden oder Umsortieren von Elementen. Typische Ursachen auf E-Commerce-Seiten sind:

Bild- und Videoelemente ohne feste Höhe: Medien werden ohne reservierte Fläche geladen, der Text springt, sobald die Datei da ist.
Späte Einbindung von Werbebannern oder Recommendation-Widgets: Anzeigen, Cross-Selling-Module oder Produktkarussells schieben den Inhalt nach unten.
Lazy Loading ohne Platzhalter: Bilder und Sektionen werden erst beim Scrollen geladen, ohne dass vorher Platz reserviert ist.
Dynamische Schriften (Webfonts): FOUT/FOIT (Flash of Unstyled/Invisible Text) führt dazu, dass sich Textblöcke ändern und das Layout springen kann.
Nachträglich eingeblendete Leisten: Cookie-Banner, Promo-Bars, Newsletter-Popups oder Live-Chat-Widgets, die im sichtbaren Bereich erscheinen.
Unsaubere CSS-/JavaScript-Manipulationen: Skripte, die DOM-Elemente verschieben oder Größen erst spät setzen.

Im E-Commerce sind vor allem Produktbilder, Trust-Elemente, Bewertungen und dynamische Personalisierungs- oder A/B-Testing-Elemente klassische Treiber eines schlechten CLS-Werts.

5. Warum ist CLS für E-Commerce und SEO so wichtig?

Ein schlechter Cumulative Layout Shift ist nicht nur ein technischer Schönheitsfehler, sondern hat direkte Auswirkungen auf zentrale KPIs im E-Commerce.

User Experience (UX): Springende Buttons oder verschobene Inhalte frustrieren Nutzer und führen zu Abbrüchen.
Conversion Rate (CR): Wenn der „In den Warenkorb“-Button unerwartet verrutscht oder Nutzer versehentlich auf das falsche Element klicken, sinkt die Conversion Rate.
Vertrauen: Eine wackelige Seite wirkt technisch unsauber und reduziert das Vertrauen in Shop und Marke.
SEO: CLS ist Teil der Core Web Vitals und fließt in das Page-Experience-Signal bei Google ein. Schlechte Werte können Rankings belasten, vor allem bei vergleichbarer inhaltlicher Qualität.
SEA-Performance: Auch bezahlter Traffic (z. B. Google Ads, Google Shopping) performt schlechter, wenn Nutzer eine instabile Seite erleben.

Für Shops mit großen Sortimentskatalogen, vielen Varianten und hohem Traffic wirkt sich ein schlechter CLS oft unmittelbar in Umsatz, CPC-Entwicklung und Retourquoten aus.

6. Messung von CLS (Cumulative Layout Shift): Tools und Datenquellen

Um CLS zu verstehen und zu verbessern, brauchst du sowohl Labor- als auch Felddaten. Beide Perspektiven ergänzen sich.

6.1 Laborwerte: CLS in synthetischen Tests

Lighthouse (im Chrome DevTools): Misst CLS unter kontrollierten Bedingungen auf einem Referenzgerät.
PageSpeed Insights: Liefert im Bereich „Labordaten“ einen CLS-Wert aus einer simulierten Umgebung.
WebPageTest: Bietet detaillierte Wasserfall-Analysen und visuelle Replays, um Layout-Shifts nachvollziehbar zu machen.

Laborwerte helfen besonders, wenn du gezielt einzelne Templates (z. B. Produktdetailseiten oder Kategorieseiten) optimieren willst.

6.2 Felddaten: Realer CLS aus Nutzersicht

Chrome User Experience Report (CrUX): Anonymisierte Felddaten aus echten Chrome-Nutzungen.
PageSpeed Insights – Felddaten: Zeigt CLS auf Basis von CrUX für Desktop und Mobile.
Google Search Console – Core Web Vitals: Gruppiert URLs nach CLS-Status (gut, Verbesserungsbedarf, schlecht).

Felddaten sind entscheidend, weil sie echte User-Situationen abbilden: Gerätevielfalt, Netze, Browser-Versionen und Interaktionen auf deiner Seite.

7. CLS verbessern: Konkrete Maßnahmen für stabile Layouts

Zur Optimierung des Cumulative Layout Shift solltest du systematisch vorgehen: zuerst identifizieren, welche Elemente Layout-Sprünge verursachen, dann gezielt gegensteuern.

7.1 Grundlegende technische Best Practices

Feste Breiten und Höhen für Medien setzen: Definiere width und height (oder ein Seitenverhältnis) für Bilder, Videos und iframes, damit der Browser Platz reservieren kann.
Platzhalter (Placeholders) verwenden: Nutze Skelette oder graue Platzhalter für nachladende Inhalte, damit sich der umliegende Text nicht verschiebt.
Werbeplätze und Widgets vorab reservieren: Plane Slots im Layout, auch wenn der Inhalt erst später geladen wird.
Webfonts optimieren: Fallback-Schriften definieren und Strategien wie font-display: swap sinnvoll einsetzen, um Textverschiebungen zu reduzieren.
Animations- und Transitions sauber umsetzen: Verwende CSS-Transformationen (transform, opacity) statt Layout-verändernder Eigenschaften wie top, left, height.

7.2 E-Commerce-spezifische CLS-Optimierung

Auf Shopseiten gibt es wiederkehrende Muster, bei denen du gezielt ansetzen kannst:

Produktbilder und Galerien: Stelle sicher, dass alle Produktbilder im Grid und auf PDPs (Product Detail Pages) feste Proportionen haben und gleich große Container nutzen.
Preis- und Verfügbarkeits-Boxen: Reserviere die Fläche für Preis, Rabatt, Verfügbarkeit und Varianten, auch wenn diese Daten erst nachgeladen werden.
Bewertungen und Trust-Elemente: Bette Sternebewertungen, Siegel und Trust-Badges direkt ins Layout ein, statt sie nachträglich einzublenden.
Personalisierung, A/B-Tests und Recommendation-Engines: Sorge dafür, dass Tests und Personalisierung innerhalb fest definierter Container stattfinden.
Cookie-Banner und Promo-Bars: Wenn möglich, diese Elemente außerhalb des Haupt-Contents platzieren (z. B. überlappend statt verschiebend) und früh laden.

8. CLS im Kontext der Core Web Vitals und weiterer Metriken

CLS ist eine von drei Core Web Vitals, die Google als besonders wichtig für die Page Experience definiert:

Metrik	Fokus	Frage
LCP	Largest Contentful Paint – Ladegeschwindigkeit des Hauptinhalts	Wie schnell ist das wichtigste Element sichtbar?
FID / INP	Interaktivität – Reaktionszeit bis zur ersten Interaktion / allgemeine Responsiveness	Wie schnell reagiert die Seite auf Eingaben?
CLS	Visuelle Stabilität – Layout-Verschiebungen	Bleibt der sichtbare Bereich stabil?

Für ein gutes Ranking und eine starke Nutzererfahrung reicht es nicht, nur die Ladezeit zu optimieren. Eine Seite kann schnell laden und trotzdem schlechte Werte beim Cumulative Layout Shift haben, wenn Inhalte erst nach und nach ihre finale Position finden.

9. Zusammenspiel von CLS, Content und Automatisierung

Gerade in großen E-Commerce-Setups mit tausenden Produkten spielt die technische Struktur des Frontends und des Contents zusammen. Automatisiert erzeugte Produkttexte, die in konsistenten Templates ausgeliefert werden, können helfen, ein stabiles Layout zu gewährleisten:

Standardisierte H-Struktur: Gleich aufgebaute Überschriften- und Textblöcke pro Kategorie oder Hersteller erleichtern dir, ein einheitliches Layout ohne Überraschungen sicherzustellen.
Feed-basierte Inhalte: Wenn Produktattribute, Bulletpoints und Tabellen aus einem konsistenten Feed kommen, lassen sich feste Containergrößen und Layout-Regeln zuverlässiger definieren.
Bulk-Rollouts: Bei großflächigen Template-Änderungen kannst du CLS-Optimierungen auf ganze Sortimente rollen, anstatt jede Seite einzeln anzufassen.

So schaffst du die Basis, um CLS-Verbesserungen nicht nur auf ein paar Templates, sondern auf den gesamten Produktkatalog zu übertragen.

10. Workflow für die Optimierung von CLS (Cumulative Layout Shift)

Ein strukturierter Prozess hilft dir, CLS dauerhaft im Griff zu behalten, anstatt nur punktuell zu reagieren.

10.1 Analysephase

Nutze die Core-Web-Vitals-Berichte der Google Search Console, um betroffene URL-Gruppen zu identifizieren.
Prüfe exemplarische Seiten mit PageSpeed Insights (Mobile und Desktop getrennt).
Nutze Video-Replays (z. B. WebPageTest) oder DevTools, um konkrete Layout-Shifts sichtbar zu machen.

10.2 Priorisierung

Beginne mit Seiten mit hohem Umsatzanteil: Produktdetailseiten, Topseller-Kategorien, Checkout.
Konzentriere dich auf wiederverwendete Templates, um mit wenig Aufwand viele URLs zu verbessern.

10.3 Umsetzung

Arbeite eng mit Frontend-Entwicklung und ggf. deinem Agenturpartner zusammen.
Definiere Layout-Richtlinien (z. B. feste Mediencontainer, Slots für Ads/Widgets, Verhalten von Bannern).
Teste Änderungen zunächst auf Staging-Systemen, bevor du sie live für alle Produkte ausrollst.

10.4 Monitoring

Überwache CLS kontinuierlich über Search Console und PageSpeed Insights.
Beobachte parallel CR, Warenkorbabbrüche und Klickpfade in deinem Analytics-Tool.
Überprüfe bei jedem größeren Release, ob neue Module oder Widgets Layout-Shifts erzeugen.

Starke Layout-Verschiebungen auf Conversion-kritischen Seiten wie Produktdetailseiten oder Checkout können direkt Umsatz kosten. Nimm CLS-Optimierung deshalb als festen Bestandteil in deine Release- und Qualitätssicherungsprozesse auf.

11. Häufige Fragen zu CLS (Cumulative Layout Shift)

Wie wird der Cumulative Layout Shift (CLS) genau berechnet?

CLS wird berechnet, indem der Anteil des sichtbaren Bereichs, der sich unerwartet verschiebt (Layout Shift Impact), mit der relativen Verschiebungsdistanz multipliziert wird (Layout Shift Distance). Für jede unerwartete Verschiebung wird ein Teilwert ermittelt, alle Teilwerte werden im Laufe einer Sitzung kumuliert und ergeben den Cumulative Layout Shift.

Was ist ein guter CLS-Wert laut Google?

Google empfiehlt, dass der CLS-Wert einer Seite bei maximal 0,10 liegen sollte, damit die Seite als visuell stabil gilt. Werte zwischen 0,11 und 0,25 gelten als verbesserungswürdig, während Werte über 0,25 als schlecht eingestuft werden und ein klares Signal für dringenden Optimierungsbedarf darstellen.

Wie kann ich einen hohen CLS-Wert in meinem Onlineshop reduzieren?

Du reduzierst einen hohen CLS-Wert, indem du für Bilder und Videos feste Breiten und Höhen definierst, Platzhalter für nachladende Inhalte verwendest, Werbe- und Widget-Slots vorab im Layout reservierst, Webfonts optimierst und dynamische Elemente wie Cookie-Banner, Promo-Bars oder Personalisierungs-Module so einbindest, dass sie vorhandene Inhalte nicht nachträglich verschieben.

Welchen Einfluss hat CLS auf meine SEO-Rankings?

CLS ist Teil der Core Web Vitals und geht in das Page-Experience-Signal von Google ein. Ein schlechter Cumulative Layout Shift kann die Sichtbarkeit beeinträchtigen, insbesondere wenn deine Inhalte inhaltlich ähnlich stark sind wie die deiner Wettbewerber. In der Praxis wirkt sich ein guter CLS-Wert in Kombination mit guten Ladezeiten und relevanten Inhalten positiv auf SEO und auf die Nutzerzufriedenheit aus.

Welche Tools eignen sich zur Messung des Cumulative Layout Shift?

Zur Messung von CLS eignen sich vor allem PageSpeed Insights, Lighthouse in den Chrome DevTools, WebPageTest und der Bericht zu den Core Web Vitals in der Google Search Console. PageSpeed Insights und Search Console liefern dir Felddaten aus echten Nutzersituationen, während Lighthouse und WebPageTest Laborwerte in einer kontrollierten Umgebung bereitstellen.

Warum treten Layout-Verschiebungen vor allem auf mobilen Geräten auf?

Auf mobilen Geräten ist der Platz im Viewport begrenzter und viele Elemente wie Bilder, Bannern, Leisten oder Widgets nehmen relativ mehr Raum ein. Bereits kleine Verschiebungen wirken sich daher stärker auf den CLS-Wert aus. Zusätzlich sind mobile Netze oft langsamer und instabiler, was dazu führt, dass Ressourcen zeitversetzt geladen werden und Layout-Sprünge sichtbarer werden.

Wie häufig sollte ich den CLS in meinem E-Commerce-Setup überprüfen?

In einem aktiven E-Commerce-Setup mit laufenden Releases, neuen Modulen und Kampagnen lohnt sich eine regelmäßige Überprüfung mindestens einmal pro Monat. Zusätzlich solltest du bei jedem größeren Template- oder Funktions-Update gezielt Stichproben auf wichtigen Seitentypen wie Startseite, Kategorieseiten, Produktdetailseiten und Checkout durchführen, um neue Layout-Verschiebungen frühzeitig zu erkennen.

12. Nächste Schritte: CLS optimieren und Content skalieren

Wenn du CLS, Ladezeiten und Content-Qualität gemeinsam angehst, schaffst du die Basis für bessere Rankings, effizientere Kampagnen und höhere Conversion Rates. Technisch saubere Templates, stabile Layouts und konsistente, feed-basierte Produkttexte spielen dabei zusammen.

Du möchtest feed2content.ai ® kennenlernen? Sieh dir unsere Funktionen live an und teste feed2content.ai ® kostenfrei.

Kostenlos starten

Du hast noch Fragen?

Kontakt