CLS (Cumulative Layout Shift)
Kurzdefinition
CLS ist die Core-Web-Vitals-Stabilitätskennzahl, die misst, wie stark sich visuelle Elemente beim Laden einer Seite unerwartet verschieben.
Lädt ein Bild oder ein Werbeplatz spät und schiebt dabei Text nach unten, zählt diese Bewegung zum CLS. Der Wert ergibt sich aus der Größe der verschobenen Fläche multipliziert mit der Distanz der Verschiebung; das Ziel ist ein Wert nahe null.
Er erscheint in PageSpeed Insights und Search Console. Der offizielle Schwellenwert liegt bei 0,1: darunter gilt als gut, 0,1 bis 0,25 als verbesserungswürdig, darüber als schlecht. Feste Größenangaben für Bilder verhindern diese Verschiebung meist schon von vornherein.
Er wird oft mit der Seitengeschwindigkeit verwechselt, doch CLS betrifft die Stabilität, nicht die Geschwindigkeit; eine schnell ladende Seite kann trotzdem schlecht abschneiden, wenn sich Elemente während des Ladens verschieben.
Der häufigste Fehler ist, einen Cookie-Hinweis oder ein Werbebanner erst einzublenden, nachdem die Seite bereits gerendert wurde, wodurch der gesamte darunterliegende Inhalt nach unten geschoben und der CLS-Wert stark verschlechtert wird. Richtig ist, für solche Komponenten von vornherein eine feste Höhe zu reservieren oder sie so einzublenden, dass Sie den bestehenden Inhaltsfluss nie verschieben.
Warum es wichtig ist
Verschiebt sich eine Schaltfläche genau in dem Moment, in dem ein Besucher tippen will, trifft er die falsche Stelle, was Misstrauen und Absprünge erzeugt. Ein niedriger CLS verhindert solche Fehlklicks in Formularen, im Warenkorb und beim Checkout.
Beispielszenario
Auf der Preisseite einer Spa-Kette schob ein spät ladendes Banner den Text nach unten, sodass Besucher versehentlich ein anderes Paket antippten; eine feste Höhe für den Banner-Platz stoppte die Verschiebung.
