Cumulative Layout Shift 2026 beheben: Schritt-für-Schritt

Cumulative Layout Shift (CLS)-Werte über 0,1 werden von Googles Core Web Vitals-Schwellenwerten als „verbesserungsbedürftig“ eingestuft, und Werte über 0,25 als „schlecht“. Die Behebung von CLS, bevor es an die Nutzer ausgeliefert wird, ist günstiger als die Wiederherstellung verlorener Rankings im Nachhinein – beginnen Sie mit der Messung und beheben Sie dann die Ursachen in der Reihenfolge ihrer Priorität.

Was ist Cumulative Layout Shift?#

CLS ist eine Core Web Vitals-Metrik, die quantifiziert, wie stark sich sichtbare Seiteninhalte unerwartet während der gesamten Lebensdauer eines Seitenbesuchs verschieben. Jede einzelne Layoutverschiebung trägt einen Wert bei, der gleich dem Impact Fraction (wie viel des Viewports sich verschoben hat), multipliziert mit dem Distance Fraction (wie weit er sich verschoben hat) ist. Google aggregiert diese zu einem Sitzungsfenster-Wert und meldet das schlechteste Fenster.

Ein Wert von 0 bedeutet, dass sich nichts bewegt hat. Ein Wert von 0,1 oder darunter ist "gut". Alles darüber ist eine messbare UX- und Ranking-Belastung.

Warum ist CLS im Jahr 2026 immer noch wichtig?#

Google verwendet Felddaten aus dem Chrome User Experience Report (CrUX) – nicht nur Labordaten –, um die Core Web Vitals für das Ranking zu bewerten. CLS ist eines von drei Signalen im Page Experience Update, zusammen mit Largest Contentful Paint (LCP) und Interaction to Next Paint (INP).

Abgesehen von den Rankings verursacht ein hoher CLS echten Schaden: Nutzer tippen versehentlich auf die falsche Schaltfläche, Formulare werden zurückgesetzt und der Lesefluss wird mitten im Satz unterbrochen. Diese Ergebnisse erhöhen die Absprungraten und verringern die Conversion.

Wie misst man CLS akkurat?#

Verwenden Sie sowohl Labor- als auch Feld-Tools, da diese unterschiedliche Fehlermodi erfassen.

Labor-Tools (zur Fehlersuche):

• Chrome DevTools Performance Panel – zeichnen Sie einen Seitenaufbau auf und inspizieren Sie Layout Shift-Cluster im Experience Track
• Lighthouse (in DevTools oder CLI integriert) – markiert CLS und verlinkt zu beitragenden Elementen
• WebPageTest – bietet eine Filmstreifenansicht, so dass Sie visuell überprüfen können, wann Verschiebungen auftreten

Feld-Tools (für Echt-Nutzer-Daten):

• Google Search Console → Core Web Vitals-Bericht – zeigt den CLS-Status gruppiert nach URL-Typ
• PageSpeed Insights – kombiniert CrUX-Felddaten mit Lighthouse-Labordaten auf demselben Bildschirm
• Web Vitals JavaScript-Bibliothek (web-vitals npm package) – ermöglicht es Ihnen, CLS in Ihrer eigenen Analyse zu protokollieren

Priorisieren Sie immer zuerst die Behebung von URLs, die in der Search Console als "schlecht" gekennzeichnet sind, da diese das Ranking direkt beeinflussen.

Was verursacht einen hohen CLS-Wert?#

Die überwiegende Mehrheit der CLS-Probleme lässt sich auf eine kleine Anzahl von Ursachen zurückführen.

Bilder und Videos ohne explizite Abmessungen

Wenn der Browser die Abmessungen eines Bildes vor dem Laden nicht kennt, weist er keinen Platz zu. Das Bild schiebt dann den Inhalt nach unten, wenn es eintrifft. Lösung: Setzen Sie immer die Attribute width und height auf <img> und <video>-Elementen und verwenden Sie CSS aspect-ratio als Fallback.

Anzeigen, Einbettungen und iFrames ohne reservierten Platz

Drittanbieter-Anzeigenplätze und Social Embeds injizieren Inhalte asynchron. Der Browser hat keine Vorwarnung bezüglich ihrer Größe. Lösung: Reservieren Sie die maximal erwartete Slot-Höhe mit einem CSS-Platzhalter, bevor die Anzeige geladen wird.

Webfonts, die FOUT oder FOIT verursachen

Flash of Unstyled Text (FOUT) oder Flash of Invisible Text (FOIT) verursachen Textumbruch, wenn der benutzerdefinierte Font ausgetauscht wird, wodurch umgebende Elemente verschoben werden. Lösung: Verwenden Sie font-display: optional für nicht kritische Fonts oder font-display: swap in Kombination mit den Deskriptoren size-adjust und ascent-override, um die Fallback-Metriken an den benutzerdefinierten Font anzupassen.

Dynamisch injizierter Inhalt über bestehendem Inhalt

Banner, Cookie-Einwilligungshinweise und "Sticky"-Header, die nach dem ersten Rendern über dem Falz eingefügt werden, schieben die Seite nach unten. Lösung: Rendern Sie diese Elemente serverseitig vor oder verwenden Sie CSS position: fixed / sticky, so dass sie Inhalte eher überlagern als verschieben.

Animationen, die Layout-auslösende CSS-Eigenschaften verwenden

Die Animation von top, left, width, height oder margin erzwingt die Neuberechnung des Layouts und trägt zum CLS bei. Lösung: Animieren Sie nur transform und opacity, die auf der GPU kombiniert werden und kein Layout auslösen.

Wie man bildbezogene CLS-Werte behebt#

Dies ist die wirkungsvollste Korrektur für die meisten Seiten.

1. Überprüfen Sie jedes <img>-Tag – bestätigen Sie, dass sowohl die Attribute width als auch height mit den intrinsischen Pixelabmessungen vorhanden sind.
2. Fügen Sie CSS img { height: auto; } global hinzu, damit die responsive Skalierung auch dann funktioniert, wenn explizite Abmessungen festgelegt sind.
3. Setzen Sie für Responsive Images mit srcset die größten Abmessungen als width/height-Attribute – der Browser verwendet das Seitenverhältnis, nicht die tatsächliche Größe.
4. Verwenden Sie für <picture>-Elemente mit Art-Direction-Zuschnitten an verschiedenen Breakpoints die CSS-Eigenschaft aspect-ratio pro Breakpoint in einem <style>-Block.
5. Für lazy-geladene Bilder unterhalb des Falzes sollten trotzdem Abmessungen angegeben werden – Lazy Loading verzögert das Abrufen, aber nicht die Platzzuweisung.

Wie man fontbezogene CLS-Werte behebt#

Font-Swap CLS ist subtil, aber messbar, besonders auf textlastigen Seiten.

1. Hosten Sie Fonts, wann immer möglich, selbst, um die DNS-Lookup-Latenz zu eliminieren, die die Font-Verfügbarkeit verzögert.
2. Verwenden Sie <link rel="preload" as="font"> für den primären Body-Font, damit er vor dem ersten Paint eintrifft.
3. Fügen Sie font-display: optional für dekorative Fonts hinzu, die für das Layout nicht kritisch sind – der Browser verwendet den Fallback, wenn der Font nicht zwischengespeichert ist, wodurch jeder Swap vermieden wird.
4. Verwenden Sie die CSS-Deskriptoren size-adjust, ascent-override und descent-override innerhalb von @font-face, um die Metriken Ihres Fallback-Fonts an den benutzerdefinierten Font anzupassen, wodurch ein Reflow beim Swap vermieden wird.
5. Testen Sie mit gedrosselter Netzwerkverbindung auf Slow 3G, um Worst-Case-Swap-Szenarien zu reproduzieren.

Wie kann man CLS durch Anzeigen und Drittanbieter beheben?#

Drittanbieter-Inhalte sind die am schwersten zu kontrollierende CLS-Quelle, da Sie den Code nicht besitzen.

1. Reservieren Sie explizite Slot-Abmessungen. Schließen Sie jede Anzeige oder Einbettung in einen Container mit einer festen min-height ein, die der größten erwarteten Größe entspricht.
2. Verwenden Sie einen CSS-Skeleton-Platzhalter. Ein grauer Hintergrundblock in der gleichen Größe wie die erwartete Anzeige verhindert eine störende Verschiebung von leer zu Inhalt.
3. Laden Sie Drittanbieter-Skripte mit async oder defer. Skripte, die den Main Thread blockieren, verzögern den Zeitpunkt, an dem der reservierte Platz gefüllt wird, wodurch sich das Verschiebungsfenster verlängert.
4. Überprüfen Sie mit der "Block"-Funktion von WebPageTest. Blockieren Sie einzelne Drittanbieter-Domains, um zu isolieren, welches Skript welche Verschiebung verursacht.
5. Erwägen Sie, Consent-Banner und Cookie-Hinweise in Overlay-Modale zu verschieben, anstatt in Banner am oberen Seitenrand, die Inhalte verschieben.

Wie kann man den bfcache verwenden, um CLS bei der Navigation zu verhindern?#

Der Back-Forward-Cache (bfcache) stellt einen vollständig gerenderten Seiten-Snapshot wieder her, wenn Nutzer vorwärts oder rückwärts navigieren, wodurch Layoutverschiebungen durch das erneute Laden dynamischer Inhalte vermieden werden. Die meisten modernen Browser unterstützen bfcache, aber Seiten mit unload-Event-Listenern, Cache-Control: no-store-Headern oder laufenden IndexedDB-Transaktionen sind nicht berechtigt.

Um die bfcache-Berechtigung zu maximieren:

• Entfernen Sie alle unload-Event-Listener; ersetzen Sie sie durch pagehide
• Vermeiden Sie Cache-Control: no-store auf Seiten, die keine sensiblen Daten enthalten
• Schließen Sie offene IndexedDB-Verbindungen, bevor der Nutzer navigiert

Dies ist eine Priorität für 2025–2026, da Google CLS jetzt über Navigationen hinweg misst, nicht nur bei anfänglichen Ladevorgängen.

Wie validiert man Korrekturen vor dem Deployment?#

Veröffentlichen Sie CLS-Korrekturen niemals blind – überprüfen Sie sie zuerst in einer Staging-Umgebung.

1. Führen Sie Lighthouse gegen die Staging-URL aus und bestätigen Sie, dass der CLS-Score auf 0,1 oder darunter sinkt.
2. Zeichnen Sie ein Performance-Profil in Chrome DevTools auf und bestätigen Sie, dass keine Layout Shift-Einträge im Experience Track während der kritischen User Journey erscheinen.
3. Verwenden Sie die PerformanceObserver-API mit type: 'layout-shift', um einzelne Shift-Einträge während der QA-Tests zu protokollieren:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift value:', entry.value, entry);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

4. Überwachen Sie nach dem Deployment den Bericht "Core Web Vitals" der Search Console. Die Felddaten werden in der Regel innerhalb von 28 Tagen aktualisiert, wenn neue CrUX-Daten gesammelt werden.

Was ist ein guter CLS-Zielwert für 2026?#

Streben Sie 0,1 oder darunter an. Viele qualitativ hochwertige Seiten erreichen 0,05 oder weniger. Die praktische Obergrenze für "keine sichtbare Verschiebung", die die meisten Nutzer wahrnehmen, liegt bei etwa 0,05 – darüber werden subtile Bewegungen wahrnehmbar, insbesondere auf mobilen Geräten, wo die Viewport-Anteile in absoluten Pixeln größer sind.

Priorisieren Sie mobile CLS getrennt von Desktop. Die Ranking-Signale von Google stammen aus mobilen CrUX-Daten für mobil indizierte Seiten, und mobile Viewports machen jede Layout-Verschiebung visuell eindrucksvoller.

CLS Fix Prioritätsreihenfolge#

Wenn die Zeit begrenzt ist, beheben Sie die Fehler in dieser Reihenfolge, basierend auf Häufigkeit und Auswirkung:

1. Bilder ohne Abmessungen – breiteste Wirkung, einfachste Behebung
2. Font-Swap Reflow – große Auswirkungen auf textlastige Seiten
3. Dynamischer Inhalt oberhalb der Falzes (Banner, Hinweise) – sofortige visuelle Beeinträchtigung
4. Reservierung von Anzeigen- und Embed-Slots – schwierig, aber für werbefinanzierte Seiten unerlässlich
5. Layout-auslösende Animationen – in der Regel geringerer CLS-Beitrag, aber eine Überprüfung wert
6. bfcache-Berechtigung – moderne Priorität, einfache Erfolge mit dem Entfernen von unload-Listenern