Probleme mit Cumulative Layout Shift (CLS) finden und beheben

Bevor du etwas änderst, stelle sicher, dass du wirklich ein CLS-Problem hast. Melde dich in der Google Search Console an, navigiere zu den Core Web Vitals und prüfe sowohl Mobilgeräte als auch Desktop.

Markiert Google URLs mit „CLS-Problem: mehr als 0,25“ oder „CLS-Problem: mehr als 0,1“, hast du die Bestätigung aus dem Chrome User Experience Report (CrUX): Echte Nutzer erleben auf deiner Website Layout-Verschiebungen.

Anders als bei LCP und INP, wo es auf Rechenleistung und Netzwerk-Geschwindigkeit ankommt, sind CLS-Probleme oft geräte- oder bildschirmabhängig. Wenn das gleiche Problem Mobilgeräte und Desktop betrifft (Bilder ohne Maße, Font-Swaps, dynamisch eingefügte Inhalte), meldet Desktop wegen der Bildschirmgröße oft einen deutlich höheren CLS-Wert. Der Grund: Ein größerer Teil des sichtbaren Viewports verschiebt sich. Die Search Console fasst URLs zusammen. Sie zeigt dir also, welche Seitentypen betroffen sind – aber nicht, welche Elemente sich verschieben. Dafür brauchst du Real User Monitoring.

Die Search Console bestätigt zwar, dass das Problem existiert, liefert dir aber kaum Ansatzpunkte. Du musst herausfinden, welche Elemente sich verschieben – auf welchen Seiten und unter welchen Bedingungen. Dafür brauchst du ein RUM-Tool.

Ich habe CoreDash gebaut, um genau diese Fragen zu beantworten. Du bindest ein einziges Script-Tag ein, und das Tool sammelt CLS-Attributionsdaten von jedem echten Besucher. Der entscheidende Datenpunkt beim CLS-Debugging ist das sich verschiebende Element: der eigentliche DOM-Knoten, der sich bewegt hat. Ohne diese Information debuggst du blind.

Sich verschiebende Elemente finden

Gruppiere deine CLS-Daten zuerst nach Elementen. Navigiere in CoreDash zur CLS-Seite und sortiere die Datentabelle nach „CLS by Element“. So siehst du, welche Elemente über alle Besucher hinweg die meisten Layout-Verschiebungen verursachen. Klicke auf den schlechtesten Eintrag, um alle Metriken auf die Seiten zu filtern, auf denen sich genau dieses Element verschoben hat.

Betroffene Seiten finden

Prüfe nach dem Filtern nach dem folgenschwersten Element die URL-Aufschlüsselung. CLS-Probleme können die gesamte Website oder nur bestimmte Templates betreffen. Jetzt sehen wir, ob sich der CLS auf bestimmten Seitentypen häuft: Produktseiten mit Bildergalerien, Blogbeiträge mit Werbeplätzen oder Landingpages mit Hero-Animationen. Wenn du weißt, welche Seiten durchfallen, weißt du, worauf du dich konzentrieren musst.

Erstbesucher vs. wiederkehrende Besucher prüfen

Diesen schnellen Check mache ich immer – und er ist wichtiger, als die meisten denken. CLS durch Font-Swaps tritt nur auf, wenn der Web-Font nicht gecacht ist. CLS durch width: auto bei Bildern entsteht nur, wenn das Bild nicht im Browser-Cache liegt. Ist dein CLS bei Erstbesuchern deutlich schlechter, hast du es mit einer cache-abhängigen Verschiebung zu tun. Als Entwickler siehst du sie auf deinem Rechner nie, außer du deaktivierst den Cache (Tipp: Deaktiviere in Chrome immer den Cache ... aber das ist eine andere Geschichte).

Gerätetypen und Viewport-Größen prüfen

Beim CLS zeigt sich zwischen Mobilgeräten und Desktop meist ein anderes Muster als bei LCP und INP. Responsive Layouts können Verschiebungen verursachen, die nur bei ganz bestimmten Viewport-Breiten und -Höhen auftreten. Ein Werbeplatz, der auf dem Desktop Probleme macht, liegt mobil vielleicht gar nicht im Viewport. Ein Navigationsmenü animiert bei kleineren Breakpoints möglicherweise anders. Gruppiere deine CLS-Daten nach Gerätetyp, um zu sehen, wo die Verschiebungen auftreten.

Deine RUM-Daten haben dir gezeigt, welche Elemente sich verschieben und warum. Jetzt reproduzierst du das Problem lokal und findest die Ursache.

Den Core Web Vitals Visualizer nutzen

Layout-Verschiebungen siehst du am schnellsten mit der Chrome-Erweiterung Core Web Vitals Visualizer. Lade die Seite, klicke auf das Icon der Erweiterung und lade neu. Jede Layout-Verschiebung wird farbig hervorgehoben – du siehst genau, was sich wie weit bewegt hat. Ich nutze das immer als ersten Schritt, noch bevor ich das Performance-Panel öffne, weil es sofort ein visuelles Ergebnis liefert.

Bedingungen in Chrome nachstellen und Netzwerk-Screenshots prüfen

Mit aufgewärmtem Cache sind CLS-Probleme oft unsichtbar. Öffne die DevTools, deaktiviere den Cache im Network-Tab und drossle die Verbindung auf „Slow 4G“ (mein Favorit: das deckt CLS durch Race-Conditions auf). Klicke nun auf das Zahnrad-Symbol und deaktiviere das Caching (bei geöffneten DevTools). Das simuliert die Bedingungen von Erstbesuchern. Aktiviere im Network-Tab die Screenshots. Lade die Seite neu und achte auf Verschiebungen.

Das Performance-Panel in Chrome nutzen

Die meisten Layout-Verschiebungen lassen sich leicht erkennen, wenn man weiß, wie. Manchmal entgehen sie einem trotzdem. Dann ist es Zeit, die Chrome DevTools zu öffnen (Strg+Umschalt+I) und für ein detailliertes Debugging ins Performance-Panel zu wechseln. Drücke Strg+Umschalt+E, um die Seite neu zu laden und aufzuzeichnen. Scrolle nach dem Laden ein paarmal hoch und runter. Stoppe die Aufzeichnung.

Suche nach der Spur „Layout Shifts“. Jede Verschiebung wird als farbiger Block dargestellt. Klicke auf eine Verschiebung, um folgende Details zu sehen:

• Der verschobene Knoten: das DOM-Element, das sich bewegt hat
• Der Shift-Score: Impact Fraction multipliziert mit Distance Fraction
• hadRecentInput: ob der Verschiebung eine Nutzereingabe vorausging (Klicks und Taps haben eine Toleranzzeit von 500 ms, Scrollen nicht)

Achte darauf, wann die Verschiebungen auftreten. Verschiebungen beim Laden der Seite deuten auf Bilder ohne Maße, Font-Swaps oder CSS-Transitions hin. Verschiebungen beim Scrollen weisen auf scroll-gesteuerte Animationen mit Layout-Eigenschaften hin.

Schnelltest: Alle Transitions deaktivieren

CSS-Transitions, die Layout-Eigenschaften animieren, sind eine tückische CLS-Ursache: Sie verschieben Inhalte nur während der Ladephase und lassen sich schwer reproduzieren. Füge dieses Snippet in die Konsole ein, lade die Seite mit deaktiviertem Cache komplett neu (Hard Reload) und vergleiche den CLS:

document.head.insertAdjacentHTML('beforeend',
  '<style>*{transition-property:none!important}</style>');

Sinkt dein CLS nach dem Deaktivieren der Transitions, hast du die Ursache gefunden. Nutze den Leitfaden zum Debuggen von CSS-Transitions, um die verantwortlichen Transitions aufzuspüren.

Du weißt, welche Elemente sich verschieben und warum. Jetzt geht es an die Behebung. Der CLS hat keine aufeinanderfolgenden Phasen wie der LCP. Stattdessen lassen sich Layout-Verschiebungen in klare Ursachen unterteilen. Hier sind die häufigsten – in der Reihenfolge, wie sie mir bei Audits begegnen.

1. Bilder, Videos und Iframes ohne Maße

Das ist die häufigste Ursache für CLS im Web. Laut dem Web Almanac 2025 haben 62 % der mobilen Seiten mindestens ein Bild ohne Maße. Der Fix: Gib bei <img>-, <video>- und <iframe>-Tags immer die Attribute width und height an.

<img src="hero.jpg" width="800" height="450" alt="Description">

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Pass bei width: auto in deinem CSS auf. Diese eine Deklaration überschreibt die Seitenverhältnis-Berechnung des Browsers und verursacht Layout-Verschiebungen – selbst wenn width und height im HTML korrekt gesetzt sind. Das habe ich auf Dutzenden Websites gesehen: Im Markup war alles richtig, aber eine globale CSS-Regel wie img { width: auto; height: auto; max-width: 100%; } hat alles zunichtegemacht. Die ausführliche Erklärung findest du unter Layout-Verschiebungen durch automatische Bildgrößen beheben. Einen umfassenden Leitfaden zu allen CLS-Ursachen bei Bildern und Medien (Videos, Iframes, Art Direction, responsive Bilder, lazy loading, Platzhalter) findest du unter Wie Bilder und Medien Layout-Verschiebungen verursachen.

2. Web-Font-Swaps

Wenn ein Web-Font lädt und den Fallback-Font ersetzt, führt der Größenunterschied zu einer Layout-Verschiebung. Laut dem Web Almanac 2025 nutzen nur 11 % der Seiten ein Preloading für Web-Fonts. Die überwiegende Mehrheit der Websites ist daher anfällig für CLS durch Font-Swaps.

Der Fix besteht aus zwei Schritten. Passe zuerst den Fallback-Font über metrische Overrides an die Maße des Web-Fonts an:

<style>
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

Nutze einen Fallback-Font-Generator, um die passenden Override-Werte für deine Schriftkombination zu ermitteln. Zweitens: Beschleunige die Auslieferung: Hoste deine Fonts selbst, lade kritische Font-Dateien per Preload und nutze WOFF2 mit Subsetting. Eine vollständige Strategie findest du unter Responsives Laden von Web-Fonts und Sicherstellen, dass Text beim Laden von Web-Fonts sichtbar bleibt.

3. CSS-Animationen und -Transitions

Laut dem Web Almanac 2025 laufen auf 40 % der mobilen Seiten Non-Composited Animations. Diese animieren Eigenschaften wie width, height, top, left, margin und padding, die bei jedem Frame eine Layout-Neuberechnung auslösen.

Der häufigste Übeltäter ist transition: all. Wer transition: all .3s ease schreibt, animiert jede Eigenschaftsänderung – auch Layout-Eigenschaften. Wenn Elemente beim Laden der Seite vom ungestylten in den gestylten Zustand übergehen, erzeugt das unregelmäßige Layout-Verschiebungen. Diese lassen sich kaum reproduzieren. Ich sehe dieses Muster ständig.

Der Fix: Ersetze layout-auslösende Eigenschaften durch Compositor-Eigenschaften.

• Nutze transform: translateY() statt top/bottom
• Nutze transform: translateX() statt left/right
• Nutze transform: scale() statt width/height
• Nutze opacity statt visibility in Kombination mit Höhenänderungen
• Nutze niemals transition: all. Gib die genaue Eigenschaft an: transition: background-color .2s ease

transform und opacity laufen komplett auf dem Compositor-Thread und triggern niemals das Layout. Den kompletten Debugging-Prozess findest du unter Layout-Verschiebungen durch CSS-Transitions.

4. Anzeigen, Embeds und dynamisch eingefügte Inhalte

Anzeigen laden spät und schieben Inhalte nach unten. Cookie-Banner ploppen auf und verschieben die Seite. AJAX-Requests fügen neue Inhalte ein, ohne vorher Platz zu reservieren. Das ist immer dasselbe Problem: Auf der Seite erscheint etwas, von dem der Browser beim Rendern noch nichts wusste.

Die Lösung für all das: Platz reservieren. Setze für Werbeplätze ein min-height, das der erwarteten Anzeigengröße entspricht:

<style>
.ad-slot {
    min-height: 250px;
    contain: layout style;
}
@media (min-width: 600px) {
    .ad-slot { min-height: 90px; }
}
</style>

Die Deklaration contain: layout style isoliert den Werbecontainer vom Rest der Seite. Nutze für Cookie-Banner position: fixed als Overlay, statt Inhalte nach unten zu drücken. Reserviere für AJAX-Inhalte Platz mit min-height. Du musst die Größe nicht auf den Pixel genau erraten: Eine Abweichung von 50 Pixeln verursacht weit weniger CLS als eine 400-Pixel-Verschiebung ohne Platzreservierung.

Nutze bei Drittanbieter-Embeds wie YouTube, Google Maps und Chat-Widgets das Facade-Pattern: Zeige einen statischen Platzhalter an und lade das echte Embed erst, wenn der Nutzer damit interagiert. Null CLS, null verschwendete Ressourcen.

5. Durch Scrollen ausgelöste Layout-Verschiebungen

Diese CLS-Ursache wird Lighthouse nie entdecken. Lighthouse scrollt die Seite nicht. Deshalb sind scroll-ausgelöste Layout-Verschiebungen in Lab-Tests völlig unsichtbar. Du findest sie nur über RUM-Daten oder indem du im Performance-Panel manuell beim Scrollen einen Trace aufzeichnest.

Das häufigste Beispiel ist ein Hide-on-Scroll-Header, der die Eigenschaft top animiert. Was die meisten Entwickler nicht wissen: Scrollen ist in der Layout Instability Specification keine ausgenommene Eingabe. Klicks und Taps haben eine Toleranzzeit von 500 ms. Scrollen nicht. Jede durch Scrollen ausgelöste Verschiebung fließt voll in deinen CLS-Wert ein.

Der Fix: Nutze bei jeder scroll-ausgelösten Animation transform: translateY() statt top. Das Gleiche gilt für Parallax-Effekte, schrumpfende Navigationsleisten und scroll-abhängige Fortschrittsbalken. Bewegt sich etwas beim Scrollen, animiere es mit transform. Eine ausführliche Anleitung mit Video-Beispielen findest du unter Wie scroll-ausgelöste Animationen CLS verursachen.