Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) misst, wie stark sich Layout-Elemente während des Ladens unerwartet verschieben, und steht für die visuelle Stabilität einer Seite.Zum Glossareintrag → gehört zu den Core Web VitalsCore Web Vitals sind ein Set von Google-Metriken, die die reale Nutzererfahrung einer Website in den Bereichen Ladeleistung, Interaktivität und visuelle Stabilität messen.Zum Glossareintrag → und misst, wie stark sich sichtbare Elemente während des Ladens unerwartet verschieben. Solche Sprünge stören das Nutzererlebnis, etwa wenn ein Button im letzten Moment verrutscht. Als guter Wert gilt ein CLS von höchstens 0,1.

Ein schlechter CLS entsteht oft durch Bilder ohne Angabe von width und height, Werbeflächen ohne reservierten Platz, eingebettete Videos ohne Platzhalter, nachladende Banner, Cookie-Banner oder Webfonts. Verbessern lässt sich CLS so:

• Breite und Höhe bei Bildern angeben, damit der Browser Platz reservieren kann,
• Platz für Werbung und Embeds reservieren,
• Cookie-Banner stabil positionieren,
• Font-Loading optimieren und Platzhalter (Skeletons) nutzen,
• nachladende Inhalte nicht oberhalb bereits sichtbarer Inhalte einfügen.

Was Layout-Verschiebungen verursacht #

Die üblichen Verdächtigen sind Bilder ohne width/height-Attribute, spät ladende Webfonts mit anderen Metriken, Ads und Embeds ohne reservierten Platz sowie Banner, die über bestehendem Inhalt eingefügt werden. Jede Verschiebung bewegt genau das, was der Nutzer gerade lesen oder anklicken wollte.

So behebt man CLS #

• Bild- und Video-Dimensionen immer deklarieren (oder CSSCascading Style Sheets (CSS) ist die Sprache, mit der das Layout und die Gestaltung von Webseiten festgelegt werden. CSS bestimmt unter anderem Farben, Schriften, Abstände und Anordnung.Zum Glossareintrag → aspect-ratio nutzen)
• Platz für Ads, Embeds und Consent-Banner reservieren
• Kritische Fonts preloaden und font-display: swap mit metrik-kompatiblen Fallbacks einsetzen
• Nach dem Laden nie Inhalt oberhalb des Viewports einfügen

Ein guter CLS bleibt beim 75. PerzentilDas 75. Perzentil ist der Schwellenwert, bei dem mindestens 75 % der Seitenaufrufe den guten Wert erreichen. Core Web Vitals werden an diesem Punkt bewertet, nicht am Durchschnitt.Zum Glossareintrag → echter Nutzer bei 0.1 oder darunter.