CLS auf null bringen: Wie du jeden Layout Shift identifizierst und behebst

Du kennst das Phänomen: Du willst auf einen Link klicken und genau in dem Moment springt ein Bild ins Layout, der Link rutscht weg und du klickst auf etwas völlig anderes. Genau das misst der Cumulative Layout Shift (CLS). Google bewertet einen CLS unter 0,1 als "gut". Alles darüber ist ein Ranking-Problem.

Was verursacht Layout Shifts?

Layout Shifts entstehen immer dann, wenn ein Element nach dem ersten Rendern seine Position oder Größe ändert. Die häufigsten Ursachen:

• Bilder ohne Dimensionen: Wenn width und height fehlen, weiß der Browser nicht, wie viel Platz er reservieren soll. Das Bild lädt nach und verdrängt alles darunter.
• Webfonts (FOUT): Der Browser zeigt zuerst einen Fallback-Font an. Wenn der eigentliche Font lädt, ändert sich die Textgröße und verdrängt Inhalte darunter.
• Werbeanzeigen und Embeds: Ad-Banner, die dynamisch eingebunden werden, schieben Inhalte weg wenn sie erscheinen.
• Dynamisch eingefügte Elemente: Cookie-Banner, Newsletter-Popups, Chat-Widgets, die nach dem Laden erscheinen und anderen Inhalt verschieben.
• Animationen mit transform-fremden Eigenschaften: Animationen die top, left, width oder height verändern anstatt transform zu nutzen.

Layout Shifts finden: So geht das

Bevor du etwas fixen kannst, musst du wissen, was shiftet. Drei Wege:

• Chrome DevTools Layout Shift Regions: Öffne DevTools, gehe zu "Rendering" (unter den drei Punkten) und aktiviere "Layout Shift Regions". Jeder Shift wird im Browser farblich markiert.
• Google Lighthouse: Der Lighthouse-Report zeigt den CLS-Score und oft auch die verursachenden Elemente.
• CrUX in der Search Console: Die Google Search Console zeigt CLS-Probleme auf Basis echter Nutzerdaten, geordnet nach betroffenen URLs.

Fix 1: Bilder mit Dimensionen versehen

Das ist die häufigste und einfachste Lösung. Setze bei jedem img-Tag explizit width und height:

<img src="bild.webp" width="800" height="500" alt="Beschreibung">

Der Browser berechnet daraus automatisch das Seitenverhältnis und reserviert den entsprechenden Platz noch bevor das Bild geladen ist. Bei WordPress erledigt das seit Version 5.5 automatisch, aber prüfe ältere Bilder im Editor.

Fix 2: Webfonts ohne Shift laden

Mit font-display: swap zeigt der Browser sofort den Fallback-Font und tauscht ihn aus, sobald der eigentliche Font geladen ist. Das verursacht einen kurzen Shift. Besser ist font-display: optional: Der Browser nutzt den Webfont nur wenn er schnell genug geladen wird, sonst bleibt der Fallback. Für maximale Stabilität: Lade Webfonts lokal statt von Google Fonts und nutze Preload. Mehr dazu in unserem Artikel zu Web Fonts ohne Layout Shift.

Fix 3: Platz für Anzeigen und Embeds reservieren

Wenn du Werbeanzeigen oder externe Embeds einbindest, reserviere den Platz vorab per CSS, auch wenn noch kein Inhalt da ist:

.ad-container {
  min-height: 250px;
  width: 100%;
}

So gibt es keinen Shift, wenn die Anzeige nachlädt. Das gleiche Prinzip gilt für YouTube-Embeds, Social-Media-Posts und andere externe Inhalte.

Fix 4: Cookie-Banner und Popups richtig einbinden

Cookie-Banner die nach dem Laden von oben hereinschweben und Inhalte nach unten drücken, sind ein häufiger CLS-Verursacher. Lösung: Binde den Banner so ein, dass er über dem Inhalt liegt (position: fixed oder position: sticky), statt den Seiteninhalt zu verdrängen.

CLS nach den Fixes erneut messen

Nach jedem Fix: Lighthouse erneut ausführen und in der Search Console prüfen, ob die betroffenen URLs in 28 Tagen auf "gut" wechseln. Die Search Console arbeitet mit Felddaten und reagiert verzögert auf Verbesserungen.

Bei rocks.optimize identifizieren und beheben wir alle Layout-Shift-Quellen systematisch. Im Rahmen unserer Core Web Vitals Optimierung bekommst du einen CLS nahe null, dokumentiert und nachweisbar.