Cumulative Layout Shift (CLS): Springende Inhalte beheben

Was ist das Problem#

Cumulative Layout Shift (CLS) misst, wie stark sich sichtbare Inhalte einer Seite während des Ladens unerwartet verschieben. Typisches Beispiel: Ein Besucher beginnt zu lesen, während im Hintergrund noch ein Bild nachlädt — sobald das Bild erscheint, schiebt es den Text nach unten, und der Besucher verliert die Stelle oder tippt versehentlich auf den falschen Link. EverAudit meldet einen CLS-Befund, wenn der gemessene Wert den Zielwert von 0,1 überschreitet; oberhalb von 0,25 gilt der Befund als kritisch.

Neben dem Gesamtwert (cumulative-layout-shift) identifiziert EverAudit auch die konkreten Verursacher (cls-culprits-insight, layout-shifts) sowie — optional über den Chrome UX Report — den CLS-Wert echter Besucher (field-cls-poor, field-cls-needs-improvement), der zeigt, wie stark das Springen bei tatsächlichen Nutzern über verschiedene Geräte hinweg ausfällt.

Warum EverAudit das prüft#

CLS ist einer der drei Core Web Vitals und damit Teil des Signals, mit dem Google die Nutzererfahrung einer Seite bewertet. Anders als LCP oder Interaktivitätswerte lässt sich CLS außerdem sehr präzise auf einzelne Elemente zurückführen — deshalb meldet EverAudit nicht nur den Gesamtwert, sondern nennt, wo möglich, die konkreten Elemente, die den Sprung verursachen. Das macht den Befund direkt umsetzbar, statt nur eine abstrakte Kennzahl zu liefern.

Welche Auswirkung hat es#

Springende Inhalte sind mehr als ein kosmetisches Problem. Sie führen zu Fehlklicks, wenn ein Besucher genau in dem Moment tippt, in dem sich ein Element verschiebt — mit spürbaren Folgen, wenn dabei versehentlich eine Werbung statt eines Links angeklickt wird oder ein Formular ungewollt abgesendet wird. Ein instabiler Seitenaufbau wirkt zudem unruhig und wenig professionell, unabhängig davon, wie schnell die Seite insgesamt lädt. Da CLS in die Bewertung der Core Web Vitals einfließt, wirkt sich ein hoher Wert zusätzlich potenziell auf die Sichtbarkeit in der Google-Suche aus.

Wie Sie es beheben#

1. Feste Abmessungen für Bilder und Videos setzen. Geben Sie width und height immer explizit an — der Browser reserviert dann bereits vor dem Laden den richtigen Platz anhand des Seitenverhältnisses:

<img src="/produkt.avif" width="800" height="600" alt="Produktfoto">

Alternativ funktioniert das auch über CSS mit aspect-ratio, wenn die Abmessungen nicht im Markup stehen:

img { aspect-ratio: 4 / 3; width: 100%; height: auto; }

2. Platz für nachladende Elemente reservieren. Werbebanner, eingebettete Social-Media-Posts oder dynamisch geladene Widgets sollten einen Container mit fester Mindesthöhe erhalten, damit sie beim Erscheinen nichts verschieben:

.ad-slot { min-height: 250px; }

3. Webfonts mit stabilem Fallback ausliefern. Wechselt die Schriftart nach dem Laden auf eine deutlich andere Zeichenbreite, verschiebt sich der umliegende Text. font-display: swap in Kombination mit einer metrik-kompatiblen Fallback-Schrift (per size-adjust in @font-face) reduziert diesen Effekt.

4. Neue Inhalte nie oberhalb bestehender Inhalte einfügen, ohne dass der Nutzer gerade dort interagiert — etwa ein spät geladener Cookie-Banner, der den sichtbaren Bereich nach unten schiebt. Reservieren Sie dafür von Anfang an Platz oder blenden Sie den Banner als Overlay ein, statt den Dokumentfluss zu verändern.

5. Animationen mit transform statt Layout-Eigenschaften umsetzen. Verändern Sie für Ein-/Ausblendeffekte transform und opacity statt top, left, width oder height — diese Eigenschaften lösen keinen Layout-Shift aus, weil sie außerhalb des normalen Seitenflusses berechnet werden.

6. Betroffene Elemente gezielt anhand der EverAudit-Meldung prüfen. Da EverAudit häufig das konkrete Element benennt, das den größten Anteil am CLS-Wert hat, lohnt es sich, dort zuerst anzusetzen statt pauschal die gesamte Seite zu überarbeiten.

Fazit#

Cumulative Layout Shift lässt sich fast immer auf fehlenden reservierten Platz zurückführen — sei es bei Bildern, Werbeflächen oder nachladenden Widgets. Wer für jedes dynamische Element von Anfang an die richtige Größe im Layout einplant, erreicht in der Regel einen CLS-Wert deutlich unter dem Zielwert von 0,1, ohne Einbußen bei Funktionalität oder Design.