CLS (Cumulative Layout Shift)
CLS misst, wie stark sich sichtbare Elemente während des Ladens einer Seite unerwartet verschieben — einer von Googles Core Web Vitals.
Was ist CLS (Cumulative Layout Shift)?
CLS misst, wie stark sich sichtbare Elemente unerwartet verschieben, während eine Seite geladen oder verwendet wird. Der Wert ist einheitenlos und berechnet sich aus der Impact Fraction (wie viel des Viewports betroffen ist) multipliziert mit der Distance Fraction (wie weit sich die Elemente bewegen). CLS ist neben LCP und INP einer der drei Core Web Vitals von Google, und ein guter Wert liegt im 75. Perzentil bei 0.1 oder niedriger — alles über 0.25 gilt als unzureichend.
Warum ist CLS (Cumulative Layout Shift) wichtig?
Layout-Verschiebungen sind in einem Online-Shop direkt schädlich: Ein Käufer möchte gerade auf „Kaufen“ tippen, aber ein Banner oder ein spät ladendes Bild verschiebt den Button und der Tipp landet auf etwas anderem. Das sorgt für Frustration, Fehlklicks und Misstrauen direkt vor der Conversion. CLS ist auch Teil von Googles Page-Experience-Signalen, sodass dauerhaft hohe Werte die Rankings nach unten ziehen können. Eine stabile Seite wirkt schneller und professioneller — selbst wenn die reine Ladegeschwindigkeit identisch ist.
Typische Anwendungsfälle
- Bilder und Videos ohne Dimensionsangaben. Ohne
width/heightoderaspect-ratiokann der Browser keinen Platz im Voraus reservieren, sodass der Inhalt springt, wenn die Medien geladen werden — kombinieren Sie dies mit einem passenden Alt-Text. - Cookie-Banner und Popups. Inhalte, die oben oder in der Mitte der Seite eingefügt werden, verschieben alles darunter liegende.
- App-Widgets. Bewertungen, „Zuletzt angesehen“ und Upsell-Blöcke, die nach dem Rest geladen werden, verändern das Layout.
- Web-Schriftarten. Der Wechsel von einer Fallback-Schriftart zur endgültigen Schriftart kann dazu führen, dass Text neu umbrochen wird und sich verschiebt.
- Anzeigen und Iframes ohne reservierten Platz im Bereich oberhalb des Falzes (above the fold).
Shopify-Perspektive
In Shopify resultieren die meisten Layout-Verschiebungen aus Apps und Theme-Anpassungen und nicht aus der Kernplattform selbst. Reservieren Sie stets Platz für dynamische Blöcke, legen Sie feste Dimensionen für Produktbilder fest und laden Cookie-Banner und Popups so, dass sie Inhalte nicht verschieben. Messen Sie den Effekt mit PageSpeed Insights oder Lighthouse sowohl auf dem Mobiltelefon als auch auf dem Desktop, und behalten Sie den Geschwindigkeitsbericht unter Onlineshop im Shopify-Adminbereich im Auge, der auf Google-Lighthouse-Daten basiert.