CLS (Cumulative Layout Shift) ist eine Kennzahl der Core Web Vitals, die die visuelle Stabilität einer Seite misst, indem die Summe unerwarteter Layoutverschiebungen erfasst wird, die während der Lebensdauer der Seite auftreten.
Eine "Layoutverschiebung" tritt auf, wenn sich ein sichtbares Element von einem gerenderten Frame zum nächsten ohne eine benutzerinitiierte Ursache bewegt. Jede Verschiebung wird nach Einfluss (wie viel des Viewports sich bewegt hat) und Distanz (wie weit sich Dinge bewegt haben) bewertet; CLS ist die Summe aller solchen Verschiebungen. 2026 Schwellenwerte: ≤ 0.1 gut, ≤ 0.25 Verbesserungsbedarf, > 0.25 schlecht.
Häufige CLS-Lösungen für E-Commerce: immer width und height Attribute für Bilder setzen, damit Browser Platz reservieren; Platz für eingebettete Inhalte (iframes, Anzeigen, Videos) mit expliziten Dimensionen oder Aspect-Ratio-CSS reservieren; Font-Swap-Reflows vermeiden, indem size-adjust bei @font-face oder font-display: optional verwendet wird; keine Banner oder Popups über bestehenden Inhalten einfügen; sicherstellen, dass Skeleton-Loader den Abmessungen des geladenen Inhalts entsprechen, den sie ersetzen.
CLS ist oft die am einfachsten zu behebende Core Web Vital und hat den größten Einfluss auf die wahrgenommene Qualität – selbst kleine Layoutverschiebungen wirken unprofessionell.