Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift bewertet visuelle Stabilität - wie oft Elemente springen, nachdem die Seite bereits gerendert wurde. Im E-Commerce ist CLS die Metrik, die den Frust beim Mis-Tap auf einen Promo-Banner einfängt, weil eine Produktkachel im letzten Moment verrutscht ist. Sie ist dimensionslos, wird über das 75. Perzentil realer Sessions aggregiert und gehört zu den Core Web Vitals.

Definition

CLS summiert Impact-Fraction mal Distance-Fraction jeder unerwarteten Layoutverschiebung zwischen Pageload und Unload, gebündelt in Session-Fenstern. Bis 0,1 gilt als gut, über 0,25 als schlecht. Typische Auslöser sind Bilder ohne width- und height-Attribute, spät ladende Webfonts mit Text-Reflow, asynchron eingebundene Drittbanner, A/B-Test-Skripte, die neue DOM-Knoten injizieren, sowie Badges aus Personalisierungs-Services. CLS ist eine Runtime-Metrik - serverseitig generiertes HTML allein löst das Problem nicht, das Client-Verhalten ist gleich entscheidend.

Warum es zählt

Layout-Shifts beschädigen Vertrauen und steigern Fehlklicks auf Add-to-Cart und Checkout-CTAs. Auf PDPs ist CLS besonders schädlich, weil Preise, Lagermeldungen und Trust-Badges oft aus unterschiedlichen Services nachladen. Als Teil des Page-Experience-Signals beeinflusst CLS die search-engine-optimization-seo. In composable-commerce-Stacks mit viel ab-testing und personalization zeigt CLS, wie diszipliniert das Frontend Platz für asynchrone Inhalte reserviert. Es ist außerdem die Vital, die durch schnelle conversion-rate-optimization-cro-Experimente am leichtesten regressiert.

Anwendungsfälle

Teams mit Next.js, Nuxt oder Astro beheben CLS durch explizite width- und height-Attribute, aspect-ratio in CSS, Preload kritischer Fonts und font-display:optional gegen späten Text-Reflow. Banner-Slots aus dem content-management-system-cms werden mit Platzhalter-Boxen gerendert, sodass personalisierte Inhalte in den reservierten Bereich fallen. Edge Rendering und ISR senken die Varianz durch stabiles Initial-HTML, Experiment-Frameworks dürfen nur innerhalb fest dimensionierter Container mutieren. RUM-Dashboards segmentieren CLS nach Template, um Regressionen aus neuen Merchandising-Modulen oder hyperpersonalization-Rollouts früh zu erkennen.

Verwandt

Mehr dazu: Performance and Core Web Vitals · Composable Headless Frontend.