CLS

Was ist CLS?

CLS (Cumulative Layout Shift) ist eine der drei Core Web Vitals und misst, wie stark der sichtbare Seiteninhalt während des Ladens unerwartet verschoben wird. Klassisches Beispiel: Man will auf einen Link klicken, kurz vorher lädt ein Werbebanner nach und verschiebt alles — der Klick trifft das falsche Element. CLS quantifiziert genau diese visuelle Instabilität. Der Zielwert liegt unter 0,1 — ein reiner Zahlenwert ohne Einheit.

CLS ist kein Zeitwert, sondern ein Score: Er berechnet sich aus der Größe der verschobenen Elemente relativ zum Viewport multipliziert mit der Verschiebeentfernung relativ zum Viewport.

Wie wird CLS berechnet?

Jede Layout-Verschiebung erzeugt einen Teilwert. Der CLS-Score summiert diese Teilwerte über die gesamte Lebensdauer der Seite auf — mit einer Einschränkung: Verschiebungen, die innerhalb von 500ms nach einer Nutzeraktion (Klick, Scroll, Tastendruck) stattfinden, werden nicht gewertet. Google unterscheidet zwischen "expected" (durch Nutzer ausgelöst) und "unexpected" (ohne Auslöser) Layout Shifts.

Die Formel für einen einzelnen Layout Shift:

Layout Shift Score = Impact Fraction × Distance Fraction

Impact Fraction = Anteil des Viewports, den das verschobene Element belegt
Distance Fraction = Strecke der Verschiebung relativ zur Viewport-Höhe

Beispiel: Ein Element belegt 50 % des Viewports und verschiebt sich um 25 % der Viewport-Höhe → 0,5 × 0,25 = 0,125. Das allein wäre schon über dem "gut"-Schwellenwert.

CLS für WordPress-Betreiber

Die häufigsten CLS-Ursachen auf WordPress-Seiten:

Bilder ohne definierte Dimensionen: Das ist die mit Abstand häufigste Ursache. Wenn ein <img>-Tag keine width und height Attribute hat, weiß der Browser beim Parsen des HTML nicht, wie viel Platz er reservieren soll. Sobald das Bild lädt und seine Dimensionen bekannt werden, verschiebt sich der nachfolgende Text. Lösung: Immer width und height angeben.

<!-- Schlecht — kein Platz reserviert, Layout Shift beim Laden: -->
<img src="/foto.webp" alt="">

<!-- Gut — Browser reserviert den Platz vorab: -->
<img src="/foto.webp" width="1200" height="600" alt="">

Werbeanzeigen und Embeds: Dynamisch nachgeladene Inhalte ohne vorab definierten Platzhalter sind ein klassischer CLS-Verursacher. Abhilfe: Container mit fixer Mindesthöhe (min-height) als Platzhalter definieren.

Schriften (FOUT): Web-Fonts, die erst spät laden, können einen "Flash of Unstyled Text" erzeugen, der Zeilenhöhen und Abstände verändert. font-display: swap mindert das Problem, font-display: optional verhindert CLS vollständig (lädt den Font nur, wenn er bereits im Cache ist).

Cookie-Banner und Newsletter-Popups: Wenn diese beim Laden in den Content eingebettet werden (statt als Fixed-Element), erzeugen sie massive Layout Shifts. Korrekte Implementierung: immer position: fixed oder position: sticky.

Was passiert bei schlechtem CLS?

Schlechter CLS ist aus zwei Gründen problematisch: Erstens ist er ein direkter Google-Ranking-Faktor als Core Web Vital. Zweitens führt er zu Fehlklicks — der Nutzer trifft nicht das gewollte Element. Das ist besonders auf mobilen Touchscreens frustrierend und schadet der Nutzererfahrung messbar.

Häufige Fragen

Warum ist mein CLS auf Mobile schlechter als auf Desktop? Der Viewport ist kleiner, also sind relative Verschiebungsanteile größer. Außerdem laden Bilder und Fonts auf Mobile oft langsamer nach, was den Timing-Effekt verschlimmert.

Zählt das Öffnen eines Akkordeons als CLS? Nein — Verschiebungen, die innerhalb von 500ms nach einer Nutzeraktion stattfinden, werden nicht gewertet. Das Aufklappen eines Akkordeons, das der Nutzer anklickt, erzeugt keinen CLS-Score.

Verwandte Begriffe

FCP · LCP