Cumulative Layout Shift (CLS)

Cumulative Layout Shift, kurz CLS, ist eine der drei Core Web Vitals von Google. Die Kennzahl misst die visuelle Stabilität, also wie stark sich der Inhalt einer Seite beim Laden und während der Nutzung unerwartet verschiebt. Jeder kennt den Effekt, einen Button antippen zu wollen und im letzten Moment daneben zu treffen, weil eine Anzeige oder ein Bild nachlädt und alles verschiebt. CLS gibt genau diesem Ärgernis eine Zahl, und ein niedriger Wert bedeutet, dass das Layout dort bleibt, wo der Besucher es erwartet. Dieser Leitfaden erklärt, was CLS misst, welcher Wert gut ist und wie sich Verschiebungen gezielt beheben lassen.

Was CLS misst

CLS betrachtet unerwartete Layout-Verschiebungen, also Momente, in denen ein sichtbares Element von einem gezeichneten Frame zum nächsten seine Position ändert, ohne dass der Besucher das ausgelöst hat. Jede Verschiebung erhält einen Layout-Shift-Score, berechnet als Impact Fraction mal Distance Fraction, also wie viel des Ansichtsbereichs betroffen war, multipliziert mit der Strecke, um die sich die Elemente bewegt haben. Je mehr des Bildschirms springt und je weiter es sich bewegt, desto höher der Score.

Die Kennzahl summiert nicht einfach alle Verschiebungen der Seite. Sie erfasst das größte Bündel eng aufeinanderfolgender Verschiebungen, ein sogenanntes Session-Window, und meldet dieses schlechteste Bündel als CLS. Ein Session-Window öffnet mit der ersten Verschiebung, verlängert sich, solange weitere Verschiebungen innerhalb einer Sekunde folgen, und ist bei fünf Sekunden gedeckelt. So wird eine lange Seite an ihrem schlechtesten Moment gemessen und nicht endlos für ihre Länge bestraft.

Entscheidend ist, dass nur unerwartete Verschiebungen zählen. Bewegt sich ein Element innerhalb von 500 Millisekunden nach einer Nutzerinteraktion, etwa ein Aufklappmenü nach einem Klick, gilt die Verschiebung als erwartet und wird ausgenommen.

Wie der Layout-Shift-Score berechnet wird

Ein kurzes Beispiel macht die Formel greifbar. Angenommen, ein Textblock nimmt die Hälfte des sichtbaren Bildschirms ein und wird, weil darüber ein Bild lädt, um ein Viertel der Bildschirmhöhe nach unten geschoben. Die Impact Fraction beträgt 0,5, weil die Hälfte des Ansichtsbereichs betroffen war, die Distance Fraction 0,25, weil sich der Inhalt um ein Viertel bewegt hat. Der Layout-Shift-Score ist 0,5 mal 0,25 = 0,125, mit einer einzigen Verschiebung schon über der guten Schwelle von 0,1. So aufgeschlüsselt wird klar, warum eine große Bewegung prominenter Inhalte weit mehr wiegt als viele kleine am Bildschirmrand.

Was ist ein guter CLS-Wert?

CLS ist eine einheitenlose Zahl. Google definiert drei Bereiche, gemessen am 75. Perzentil der realen Seitenaufrufe:

• Gut: 0,1 oder darunter
• Verbesserungswürdig: zwischen 0,1 und 0,25
• Schlecht: mehr als 0,25

Weil am 75. Perzentil über mobile und stationäre Geräte gemessen wird, müssen drei von vier Aufrufen unter dem Zielwert bleiben. Ein Wert, der am Desktop passt, kann trotzdem durchfallen, wenn mobile Besucher auf langsameren Verbindungen springende Anzeigen und Bilder sehen.

Feld- und Labdaten

CLS ist die Core-Web-Vital-Kennzahl, bei der Labor und Feld am stärksten auseinandergehen, und das zu verstehen erspart viel Verwirrung. Laborwerkzeuge wie Lighthouse messen nur Verschiebungen während des Ladevorgangs in einer kontrollierten Umgebung. Felddaten aus dem Chrome UX Report messen die gesamte Zeit, die ein realer Besucher die Seite geöffnet hat, inklusive Verschiebungen beim Scrollen, beim Nachladen von Inhalten oder nach einer Interaktion. Eine Seite kann deshalb im Labor einen nahezu perfekten CLS und im Feld einen schlechten zeigen. Für das reale Bild zählen die Felddaten. Im Browser lassen sich Verschiebungen über die Performance-API beobachten, wobei die erwarteten ausgefiltert werden:

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

Die Eigenschaft sources verweist auf die genauen Elemente, die sich bewegt haben, und ist der schnellste Weg zur Ursache.

Was Layout-Verschiebungen verursacht

• Bilder und Videos ohne Abmessungen. Kennt der Browser die Größe nicht im Voraus, reserviert er keinen Platz und ordnet die Seite neu, sobald die Datei lädt.
• Anzeigen, Einbettungen und iframes. Inhalte, deren Höhe erst beim Eintreffen feststeht, schieben alles darunter nach unten.
• Dynamisch eingefügte Inhalte. Banner, Hinweise oder Empfehlungsblöcke über bestehendem Inhalt verschieben alles darunter.
• Webschriften. Eine spät ladende Schrift kann in anderer Größe einspringen als die Ersatzschrift und den Text neu umbrechen.
• Animationen, die Layout auslösen. Das Animieren von Eigenschaften wie top, height oder margin zwingt den Browser, Positionen bei jedem Frame neu zu berechnen.

CLS beheben

1. Bildern und Videos immer Abmessungen geben

Jedem Bild und Video feste width- und height-Attribute oder ein CSS-aspect-ratio geben, damit der Browser den korrekten Platz reserviert, bevor die Datei eintrifft:

<img src="foto.jpg" width="800" height="600" alt="Produkt">

/* responsiv: Seitenverhältnis halten, Breite flexibel */
img { aspect-ratio: 4 / 3; width: 100%; height: auto; }

Das ist der häufigste CLS-Fix und überschneidet sich mit der Arbeit an Largest Contentful Paint, wo korrekte Abmessungen ebenfalls zählen.

2. Platz für Anzeigen und Einbettungen reservieren

Jedem Container, der eine Anzeige oder Einbettung aufnimmt, eine Mindesthöhe geben, bemessen am häufigsten Format, damit der Platz nicht zusammenfällt und sich dann ausdehnt. Bleibt ein Platz unbefüllt, so gestalten, dass die reservierte Fläche gewollt wirkt statt eine störende Lücke zu hinterlassen. Bei responsiven Layouts, in denen die Anzeigengröße variiert, die Höhe des kleinsten erwarteten Formats reservieren, damit die Verschiebung begrenzt bleibt.

3. Keine Inhalte über bestehendem Inhalt einfügen

Banner, Cookie-Hinweise oder Werbeleisten nicht über bereits gelesenem Inhalt einfügen, es sei denn als direkte Reaktion auf eine Interaktion. Ist das nötig, den Platz von Anfang an reservieren oder das Element überlagern, statt das Layout nach unten zu drücken.

4. Webschriften stabilisieren

Schriftbedingte Verschiebungen reduzieren, indem man font-display: swap setzt, damit der Text sofort sichtbar ist, die Schrift oberhalb der Falz vorlädt und eine Ersatzschrift wählt, deren Maße nahe an der Webschrift liegen. Die CSS-Deskriptoren size-adjust, ascent-override und descent-override erlauben, die Ersatzschrift so genau anzugleichen, dass der spätere Wechsel kaum noch etwas verschiebt.

5. Mit transform animieren, nicht mit Layout-Eigenschaften

Beim Animieren transform und opacity verwenden, die der Browser ohne Neuberechnung des Layouts zusammensetzen kann. Das Animieren von top, left, width oder height erzwingt ein Reflow bei jedem Frame und kann als Layout-Verschiebung zählen.

6. CLS in WordPress reduzieren

In WordPress stammt CLS meist von Themes, Page-Buildern und Plugins. Sicherstellen, dass über den Editor eingefügte Bilder ihre Breite- und Höhe-Attribute behalten, für Anzeigen- und Einbettungsblöcke Platz reservieren und Plugins vermeiden, die Banner oder Empfehlungsboxen über dem Artikel einfügen. Ein Performance-Plugin kann Schriften vorladen und fehlende Bildabmessungen ergänzen, danach aber testen, weil manche Lazy-Loading-Einstellungen eigene Verschiebungen einführen.

CLS und die anderen Core Web Vitals

CLS ist eine von drei Core Web Vitals, neben Largest Contentful Paint für die Ladeleistung und Interaction to Next Paint für die Reaktionsschnelligkeit. Sie greifen ineinander: Feste Abmessungen am Hauptbild verbessern sowohl CLS als auch LCP, und reservierter Platz hält die Seite stabil, während andere Optimierungen laden. Einen Überblick über alle drei gibt die Seite zu den Core Web Vitals.

CLS prüfen und verifizieren

Die Chrome DevTools können verschobene Bereiche hervorheben: Im Rendering-Panel „Layout Shift Regions" aktivieren, dann markieren blaue Flächen jede Verschiebung. Das Performance-Panel zeichnet jede Verschiebung mit dem verantwortlichen Element auf. PageSpeed Insights liefert den Laborwert, der aber nur den Ladevorgang abdeckt, deshalb die reale Verbesserung in den Felddaten des Chrome UX Report über das nachlaufende 28-Tage-Fenster prüfen. Mobil mit Drosselung testen und die ganze Seite scrollen, da viele Verschiebungen erst beim Nachladen weiter unten auftreten. Wie bei den anderen Core Web Vitals werden die Felddaten pro URL ausgewiesen, sofern eine Seite genug Verkehr hat, sonst als Origin-Durchschnitt.

Häufige Fragen

Was ist ein guter CLS-Wert?

0,1 oder darunter am 75. Perzentil der realen Nutzer gilt als gut. Zwischen 0,1 und 0,25 ist verbesserungswürdig, mehr als 0,25 ist schlecht. CLS ist eine einheitenlose Zahl.

Was verursacht einen hohen CLS?

Meist Bilder und Videos ohne Abmessungen, Anzeigen und Einbettungen ohne reservierten Platz, über bestehendem Inhalt eingefügte Elemente, spät ladende Webschriften und Animationen von Layout-Eigenschaften.

Warum ist mein CLS im Labor niedrig, im Feld aber hoch?

Laborwerkzeuge messen nur Verschiebungen während des Ladens, Felddaten die gesamte Nutzung inklusive Scrollen und nachladender Inhalte. Google nutzt die Felddaten.

Wie behebe ich Layout-Verschiebungen durch Bilder?

Jedem Bild feste Breite und Höhe oder ein CSS-aspect-ratio geben, damit der Browser den Platz reserviert, bevor das Bild lädt, und die Seite nicht neu umbricht.

Wie verhindere ich Verschiebungen durch Anzeigen?

Für jeden Anzeigenplatz eine Mindesthöhe reservieren, bemessen am häufigsten Format, damit der Platz nicht zusammenfällt und sich beim Eintreffen der Anzeige ausdehnt.

Ist CLS ein Google-Ranking-Faktor?

Ja. CLS ist eine der drei Core Web Vitals und damit Teil der Page-Experience-Signale, bewertet anhand der Felddaten echter Nutzer.

Wie lange dauert es, bis sich Verbesserungen zeigen?

Im Labor sind Verbesserungen sofort messbar. In den Felddaten, die Google für das Ranking nutzt, zeigen sie sich über das nachlaufende 28-Tage-Fenster, also über einige Wochen hinweg.