Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) ist eine Kennzahl der Core Web Vitals, die quantifiziert, wie stark sichtbarer Inhalt während der Lebensdauer einer Seite unerwartet seine Position verschiebt. Sie erfasst das Problem des "springenden Inhalts", bei dem Nutzer versuchen, auf eine Schaltfläche zu tippen, die sich in letzter Sekunde verschiebt.
Cumulative Layout Shift (CLS) ist eine Kennzahl der Core Web Vitals, die quantifiziert, wie stark sichtbarer Inhalt während der Lebensdauer einer Seite unerwartet seine Position verschiebt. Sie erfasst das Problem des "springenden Inhalts", bei dem Nutzer versuchen, auf eine Schaltfläche zu tippen, die sich in letzter Sekunde verschiebt.
Warum es wichtig ist
CLS ist ein bestätigtes Google-Ranking-Signal und eines der drei Core Web Vitals. Googles Schwellenwerte: gut <= 0,1, Verbesserungsbedarf 0,1 bis 0,25, schlecht > 0,25. Ein hoher CLS-Wert schadet dem Vertrauen der Nutzer. Googles Untersuchungen zeigen, dass Seiten mit einem CLS über 0,15 eine um 24 % höhere Absprungrate aufweisen. Es ist außerdem das am günstigsten zu behebende Core Web Vital, da fast jede Ursache eine einfache Lösung hat.
So wird CLS berechnet
CLS-Wert = Impact-Anteil × Distanz-Anteil, summiert über alle unerwarteten Layout-Verschiebungen während der Lebensdauer der Seite.
- Impact-Anteil: der Anteil des Viewports, der vom sich verschiebenden Element betroffen ist (Vereinigung von Vorher und Nachher).
- Distanz-Anteil: die größte Distanz, die ein Element zurückgelegt hat, als Anteil des Viewports.
Seit 2021 verwendet Chrome "windowed CLS", bei dem nur das schlimmste 5-Sekunden-Fenster zählt, sodass eine langlebige SPA nicht für immer für einen schlechten Moment bestraft wird.
Häufige Ursachen
Bilder ohne Abmessungen: Ein <img> ohne width- und height-Attribute zwingt den Browser zu einem Reflow, sobald das Bild geladen wird.
Anzeigen und Einbettungen ohne reservierten Platz: Anzeigenplätze von Drittanbietern, die nach dem ersten Rendern eingefügt werden, schieben den Inhalt nach unten.
Webschriften, die FOIT/FOUT verursachen: Wenn eine benutzerdefinierte Schrift geladen wird, fließt der Text neu um, weil die Ersatzschrift andere Maße hat.
Dynamisch eingefügter Inhalt: Widgets wie "Das könnte Ihnen auch gefallen", Cookie-Banner und Benachrichtigungen, die oberhalb bestehender Inhalte erscheinen.
Animationen, die nicht transform-basiert sind: Das Animieren von top oder left löst ein Layout aus, das Animieren von transform hingegen nicht.
So beheben Sie CLS
Setzen Sie explizite Abmessungen für Bilder und Videos: <img width="800" height="600">. Der Browser reserviert den Platz, bevor die Datei geladen wird.
Reservieren Sie Platz für Anzeigenplätze: Geben Sie Anzeigencontainern eine feste min-height, damit eingefügte Anzeigen den Inhalt nicht verschieben.
Verwenden Sie font-display: optional oder laden Sie Webschriften vor, um FOUT zu minimieren.
Fügen Sie neuen Inhalt unterhalb des sichtbaren Bereichs ein oder bei einer Nutzerinteraktion, nicht oberhalb bestehender Inhalte.
Animieren Sie ausschließlich mit transform und opacity. Diese lösen kein Layout aus.
Verwenden Sie das CSS aspect-ratio für responsive Medien ohne explizite Abmessungen.
CLS messen
Felddaten: CrUX, der Core-Web-Vitals-Bericht der Search Console, der Feldabschnitt von PageSpeed Insights.
Labordaten: Lighthouse, das Performance-Panel der Chrome DevTools. Beachten Sie, dass der Labor-CLS vom Feld abweichen kann, da reale Nutzer unterschiedliche Scroll-Positionen und Interaktionen auslösen.
CLS wird auf dem 75. Perzentil der realen Nutzerdaten bewertet, daher sind für SEO die Felddaten maßgeblich.
Sources: