Cumulative Layout Shift verbessern: CLS verstehen, messen und nachhaltig reduzieren
- Alexander Peter Hihler
- 24. Dez. 2025
- 4 Min. Lesezeit
Aktualisiert: vor 3 Tagen
Das Wichtigste in Kürze
|
1. Cumulative Layout Shift verstehen
1.1 Was bedeutet Cumulative Layout Shift?
Cumulative Layout Shift, kurz CLS, beschreibt die visuelle Stabilität einer Website während des Ladens. Der Wert misst, wie stark sich sichtbare Inhalte unerwartet verschieben, nachdem sie bereits angezeigt wurden. Solche Layout-Verschiebungen entstehen häufig, wenn Inhalte nachgeladen werden, ohne dass zuvor Platz dafür reserviert wurde.
Google definiert CLS als einen Bestandteil der Core Web Vitals und bewertet damit, wie zuverlässig sich eine Seite für Nutzer anfühlt. Je häufiger und stärker sich Elemente verschieben, desto schlechter fällt der CLS-Wert aus.
1.2 Wie wird der CLS-Wert gemessen?
Der CLS-Wert ergibt sich aus der Kombination von Verschiebungsdistanz und der Größe des betroffenen Elements im sichtbaren Bereich. Google berücksichtigt dabei nur unerwartete Layout-Änderungen, die während der aktiven Nutzung auftreten. Aktionen wie bewusste Klicks oder Scrollen zählen nicht in die Bewertung ein.
Gemessen wird der Wert unter anderem mit Google Lighthouse, den Chrome DevTools sowie über Felddaten aus dem Chrome User Experience Report.
1.3 Warum springende Layouts Nutzer frustrieren
Springende Inhalte unterbrechen den Lesefluss, führen zu Fehlklicks und erzeugen Unsicherheit. Studien zeigen, dass Nutzer instabile Seiten als weniger vertrauenswürdig wahrnehmen und schneller abspringen. Besonders auf mobilen Geräten wirkt sich ein schlechter CLS-Wert unmittelbar auf die Nutzerzufriedenheit aus.
2. Bedeutung von CLS für Nutzererlebnis und SEO
2.1 Einfluss auf Usability und Conversion
Eine stabile Darstellung sorgt dafür, dass Nutzer Inhalte schneller erfassen und sicher interagieren können. Verschiebungen von Call-to-Action-Elementen oder Formularen führen dagegen häufig zu Frustration und Abbrüchen. Eine Analyse des HTTP Archive zeigt, dass Seiten mit niedrigem CLS signifikant bessere Engagement-Werte erzielen.
2.2 Zusammenhang zwischen CLS und Core Web Vitals
CLS ist neben Largest Contentful Paint und Interaction to Next Paint eine der drei zentralen Kennzahlen der Core Web Vitals. Während LCP die Ladegeschwindigkeit bewertet und INP die Reaktionsfähigkeit misst, steht CLS ausschließlich für visuelle Stabilität. Erst das Zusammenspiel aller drei Metriken ermöglicht eine konsistente Nutzererfahrung.
2.3 Sind die Core Web Vitals ein Rankingfaktor?
Google bestätigt, dass Core Web Vitals als Bestandteil der Page Experience in das Ranking einfließen. Sie sind kein isolierter Hebel, können aber bei vergleichbaren Inhalten den Ausschlag geben.
3. Ursachen für einen schlechten CLS-Wert
3.1 Bilder, Videos und iFrames ohne feste Abmessungen
Fehlende Größenangaben sind eine der häufigsten Ursachen für Layout-Verschiebungen. Wenn Medien ohne definierte Breite und Höhe geladen werden, kann der Browser keinen Platz reservieren. Sobald das Element erscheint, verschiebt es den restlichen Seiteninhalt.
3.2 Webfonts und verspätete Schriftladungen
Webfonts, die erst nach dem initialen Rendering geladen werden, können Text neu umbrechen. Dieser Effekt, bekannt als Flash of Unstyled Text oder Flash of Invisible Text, beeinflusst den CLS-Wert deutlich, wenn keine geeigneten Fallbacks definiert sind.
3.3 Dynamische Inhalte, Ads und Third-Party-Skripte
Nachgeladene Werbebanner, eingebettete Widgets oder Tracking-Skripte verändern häufig das Layout. Besonders problematisch sind Elemente, die oberhalb bereits sichtbarer Inhalte eingefügt werden.
3.4 Cookie-Banner, Pop-ups und Overlays
Cookie-Hinweise und Interstitials erscheinen oft erst nach dem Seitenaufbau. Werden sie nicht als Overlay umgesetzt, verschieben sie den gesamten Content und verschlechtern den CLS-Wert messbar.
4. Cumulative Layout Shift gezielt verbessern
4.1 Feste Größen und Platzhalter richtig einsetzen
Alle Medien sollten feste Dimensionen oder ein korrektes Seitenverhältnis erhalten. Moderne CSS-Eigenschaften wie aspect-ratio ermöglichen eine flexible und zugleich stabile Darstellung. Platzhalter sorgen dafür, dass der Browser den benötigten Raum von Beginn an einplant.
4.2 CLS durch optimiertes Font-Loading reduzieren
Die Verwendung von font-display: swap oder optional verhindert unsichtbaren Text und reduziert Layout-Verschiebungen. Zusätzlich sollten systemnahe Fallback-Schriften gewählt werden, deren Metriken den finalen Webfonts ähneln.
4.3 Dynamische Inhalte layoutstabil integrieren
Für dynamische Inhalte empfiehlt es sich, feste Containerhöhen zu definieren oder Skeleton-Elemente zu verwenden. Werbebereiche sollten immer mit reserviertem Platz eingebunden werden, auch wenn initial kein Inhalt geladen wird.
4.4 CLS messen und Verbesserungen validieren
Zur Analyse eignen sich Google Lighthouse, die Chrome DevTools sowie spezielle Chrome Extensions zur CLS-Messung. Entscheidend ist die Kombination aus Lab- und Felddaten, um reale Nutzererfahrungen korrekt abzubilden.
5. CLS-Probleme in Shopify beheben
5.1 Typische CLS-Ursachen in Shopify-Themes
Viele Shopify-Themes laden Bilder, Produktvarianten oder Bewertungen dynamisch nach. Fehlende Platzhalter führen hier besonders häufig zu Layout-Verschiebungen auf Produkt- und Kategorieseiten.
5.2 Apps, die Layout Shifts verursachen
Apps für Bewertungen, Upselling oder Tracking fügen Inhalte oft nachträglich ein. Jede zusätzliche App erhöht das Risiko für CLS-Probleme, insbesondere wenn sie oberhalb des sichtbaren Bereichs agiert.
5.3 Priorisierte Maßnahmen mit minimalem Entwicklungsaufwand
Produktbilder sollten immer mit festen Seitenverhältnissen eingebunden werden. App-Skripte lassen sich häufig verzögert laden oder in feste Container integrieren. Bereits kleine Anpassungen im Theme-Code können den CLS-Wert deutlich verbessern.
6. Häufig gestellte Fragen
Was ist ein guter CLS-Wert?
Ein guter CLS-Wert liegt laut Google bei maximal 0,1. Werte zwischen 0,1 und 0,25 gelten als verbesserungswürdig, während alles darüber als problematisch eingestuft wird.
Was bedeutet Cumulative Layout Shift konkret?
Cumulative Layout Shift beschreibt die Summe aller unerwarteten Layout-Verschiebungen, die während der Nutzung einer Seite auftreten und die visuelle Stabilität beeinträchtigen.
Sind die wichtigsten Web Vitals ein Rankingfaktor?
Die Core Web Vitals sind Teil der Page-Experience-Signale und können bei ansonsten vergleichbaren Seiten Einfluss auf die Platzierung in den Suchergebnissen haben.
Wie lässt sich ein schlechter CLS-Wert verbessern?
Ein schlechter CLS-Wert lässt sich durch feste Größenangaben für Medien, optimiertes Font-Loading und layoutstabile Einbindung dynamischer Inhalte nachhaltig reduzieren.
Wie kann man einen CLS-Fehler in Shopify beheben?
In Shopify lassen sich CLS-Fehler meist durch Anpassungen im Theme, reservierten Platz für Apps und optimierte Bilddarstellung effektiv beheben.
