Cumulative Layout Shift (CLS) ist eine Kennzahl aus Googles Core Web Vitals und misst, wie stark sich sichtbare Inhalte einer Website während der Nutzung unerwartet verschieben. Typisches Beispiel: Ein nachladendes Bild oder Werbebanner drückt den Text nach unten, während man gerade liest oder klicken will. Je niedriger der Wert, desto stabiler die Seite; als gut gilt ein CLS bis 0,1.
Wie wird der Cumulative Layout Shift gemessen?
Der Browser registriert jede unerwartete Verschiebung sichtbarer Elemente und berechnet daraus einen Wert, der sich aus dem betroffenen Anteil des sichtbaren Bereichs und der Distanz der Verschiebung zusammensetzt. Mehrere kurz aufeinanderfolgende Verschiebungen werden zu Gruppen zusammengefasst; die größte Gruppe bestimmt den CLS der Seite. Layout-Verschiebungen, die direkt auf eine Nutzeraktion folgen — etwa das Aufklappen eines Menüs nach einem Klick — zählen nicht als unerwartet und fließen nicht ein.
Google bewertet den CLS wie alle Core Web Vitals anhand realer Nutzerdaten am 75. Perzentil: Bis 0,1 gilt als gut, zwischen 0,1 und 0,25 als optimierungsbedürftig, darüber als schlecht. Messbar ist der Wert über die Google Search Console, PageSpeed Insights und die Browser-Entwicklertools.
Warum ist ein niedriger CLS wichtig?
Springende Layouts sind eines der ärgerlichsten Web-Erlebnisse: Man will auf einen Button tippen, der Inhalt verschiebt sich im letzten Moment — und man landet auf einer Werbeanzeige oder einem falschen Link. Solche Fehlklicks frustrieren Besucher, führen zu Absprüngen und können im schlimmsten Fall ungewollte Aktionen auslösen, etwa in Formularen oder Bestellstrecken.
Als Teil der Core Web Vitals fließt der CLS außerdem als Ranking-Signal in die Google-Suche ein. Für Websites mit Conversion-Zielen — vom Kontaktformular einer Kanzlei bis zum Online-Shop — ist visuelle Stabilität zudem direkt umsatzrelevant, weil sie das Vertrauen in die Seite und die Bedienbarkeit im entscheidenden Moment betrifft.
Typische Ursachen und Lösungen für Layout Shifts
Die häufigste Ursache sind Bilder und Videos ohne festgelegte Abmessungen: Der Browser weiß beim Rendern nicht, wie viel Platz er reservieren muss, und schiebt den Inhalt nach, sobald die Datei geladen ist. Die Lösung sind explizite Breiten- und Höhenangaben oder CSS-Seitenverhältnisse. Gleiches gilt für eingebettete Inhalte wie Karten, Videos und Werbeflächen — auch für sie sollte fester Platz reserviert werden.
Weitere Verursacher sind nachträglich eingespielte Banner (Cookie-Hinweise, Aktionsleisten), die Inhalte verdrängen statt zu überlagern, sowie Webfonts, deren spätes Laden Textumbrüche verändert. Abhilfe schaffen reservierte Bereiche, überlagernde statt schiebende Banner und eine Font-Ladestrategie mit passender Fallback-Schrift. Nach jeder Änderung sollte der Wert erneut mit Felddaten geprüft werden, da Labortests dynamische Inhalte oft nicht erfassen.