Cumulative Layout Shift (CLS)

Cumulative Layout Shift ist die dritte Core-Web-Vitals-Metrik und misst die visuelle Stabilitaet einer Website. CLS addiert alle Layout-Verschiebungen waehrend des gesamten Seitenbesuchs und gibt einen Score zwischen 0 (perfekt stabil) und theoretisch unbegrenzt (chaotisch). Eine Verschiebung von 50 % der Bildschirmflaeche entspricht etwa einem Score von 0,5.

Die Bewertungsskala: Gut (unter 0,1), verbesserungsbeduerftig (0,1-0,25) und schlecht (ueber 0,25). Die Messung erfolgt als 75-Perzentil aus Real User Monitoring Daten.

Typische CLS-Verursacher sind: Bilder ohne definierte width/height-Attribute (das Layout springt, sobald das Bild laedt), spaet geladene Custom-Fonts (FOIT/FOUT -- Flash of Invisible/Unstyled Text), dynamisch eingefuegte Banner oder Cookie-Popups, Werbebanner mit variabler Hoehe, und AJAX-Content, der Platz einnimmt ohne Platzhalter.

Optimierungsansaetze: Bilder immer mit width/height-Attributen (oder aspect-ratio CSS) ausliefern, font-display: optional fuer Custom-Fonts, kritische Fonts via preload einbinden, Platzhalter fuer asynchron geladene Elemente reservieren (CSS min-height), CSS-Transitions statt JavaScript-Animations fuer UI-Aenderungen, und Cookie-Banner als Overlay (position: fixed) statt inline im Content.

Fuer lokale Unternehmen ist CLS oft der einfachste Core-Web-Vitals-Quick-Win: Eine fehlerhaft eingebettete Google Maps iFrame oder ein Cookie-Banner ohne Platzhalter kann den Score von 0,05 (gut) auf 0,3 (schlecht) treiben. Die Fixes sind typischerweise in einem Tag umgesetzt.

Alunah-Praxisbeispiel: Eine Friseur-Website in Braunschweig hatte CLS 0,42, weil ein Late-Loading-Instagram-Widget das Hero-Bild nach unten schob. Nach Einfuehrung einer min-height-Reservierung fiel der CLS auf 0,05, und das Google-Ranking stieg innerhalb von 4 Wochen um durchschnittlich 2,3 Positionen.