CLS beheben: wenn die Seite beim Laden springt

Kurz gesagt: Cumulative Layout Shift (CLS) misst, wie stark sichtbare Inhalte unerwartet verrutschen. Laut web.dev gilt ein Wert von 0,1 oder weniger als gut, über 0,25 als schlecht. Die häufigsten Ursachen sind Bilder ohne Größenangabe, Werbung, Einbettungen und Iframes ohne reservierten Platz, nachträglich eingeblendete Inhalte wie Banner sowie Webfonts. Fast alle lassen sich beheben, indem Sie dem Browser vorab sagen, wie viel Platz ein Element brauchen wird.

Jeder kennt den Moment: Man will auf einen Link tippen, und genau dann rutscht der Text nach unten, weil oben ein Bild oder Banner nachlädt. Statt „Kontakt“ hat man „Newsletter abonnieren“ erwischt. Genau das misst CLS. Der Wert gehört zu den Core Web Vitals, mit denen Google die Nutzererfahrung einer Seite beschreibt.

Die häufigsten Ursachen auf einen Blick

Ursache	Was passiert	Typische Lösung
Bilder und Videos ohne Maße	Browser kennt die Höhe erst nach dem Laden, Inhalt darunter rutscht	`width` und `height` angeben oder CSS `aspect-ratio`
Werbung, Einbettungen, Iframes	Platz entsteht erst, wenn der fremde Inhalt da ist	Platz mit `min-height` oder `aspect-ratio` reservieren
Nachträglich eingefügte Inhalte	Banner, Hinweise oder Formulare schieben die Seite	Platz vorab reservieren oder als Überlagerung anzeigen
Webfonts	Ersatzschrift und Webfont haben unterschiedliche Maße	passende Ersatzschrift, Preload, `font-display: optional`
Animationen mit Layout-Eigenschaften	Elemente verändern Position oder Größe im Dokumentfluss	`transform` statt Eigenschaften wie `top` oder `height` animieren

Die ersten vier Ursachen nennt web.dev ausdrücklich als die häufigsten Gründe für einen schlechten CLS-Wert.

Wie CLS gemessen wird

Ein paar Grundlagen helfen, die Zahlen richtig zu lesen.

Bewertung nach Sitzungsfenstern. Laut web.dev fasst CLS Layout-Verschiebungen zu „Session Windows“ zusammen: Verschiebungen mit weniger als einer Sekunde Abstand, höchstens fünf Sekunden lang. Gewertet wird das Fenster mit der höchsten Summe. Eine lange geöffnete Seite wird dadurch nicht automatisch schlechter bewertet.

Erwartete Verschiebungen zählen nicht. Verschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzeraktion passieren – etwa beim Aufklappen eines Menüs nach einem Klick –, werden laut web.dev nicht mitgezählt.

Felddaten und Labordaten unterscheiden sich. PageSpeed Insights zeigt oben, was echte Nutzer erlebt haben, und darunter einen Labortest des Ladevorgangs. Laut web.dev deuten große Unterschiede zwischen beiden oft auf Verschiebungen nach dem Laden hin, zum Beispiel beim Scrollen, wenn nachgeladene Inhalte keinen reservierten Platz haben. Als Zielmarke empfiehlt web.dev das 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop.

So finden Sie die verursachenden Elemente:

PageSpeed Insights für einen ersten Überblick: Feldwert, Laborwert und Hinweise auf betroffene Elemente.
Lighthouse in den Chrome-Entwicklertools listet laut web.dev Bilder ohne Breite und Höhe sowie alle Elemente, die sich beim Laden verschoben haben, mit ihrem Anteil am CLS.
Performance-Panel in Chrome: Die Spur „Layout Shifts“ zeigt Verschiebungen als Markierungen; ein Klick darauf hebt die betroffenen Elemente hervor. Die Live-Ansicht misst CLS, während Sie auf der Seite klicken und scrollen.
Messung bei echten Nutzern etwa mit der web-vitals-Bibliothek, wenn sich Probleme im Labor nicht nachstellen lassen.

Die Fixes im Detail

Bilder und Videos: Größe angeben

web.dev empfiehlt, bei Bildern und Videos immer width und height anzugeben oder den Platz mit CSS aspect-ratio zu reservieren. Moderne Browser berechnen aus den beiden Attributen automatisch das Seitenverhältnis, auch wenn das Bild per CSS auf volle Breite gestreckt wird. In vielen Content-Management-Systemen passiert das bereits, aber nicht bei jedem Theme, Page Builder oder per Hand eingefügtem Code.

Werbung, Karten, Videos und andere Einbettungen

Für spät ladende Inhalte reservieren Sie Platz mit min-height oder – bei responsiven Formaten – mit aspect-ratio. Wenn Einbettungen unterschiedlich groß ausfallen können, rät web.dev, die kleinste übliche Größe zu reservieren und für größere Varianten eine geringe Verschiebung in Kauf zu nehmen. Wichtig: Den reservierten Platz nicht wieder zusammenklappen, wenn etwa keine Anzeige ausgeliefert wird – das verursacht laut web.dev ebenso viel CLS. Besser ist ein Platzhalter.

Inhalte, für die sich kein Platz reservieren lässt, sollten möglichst weiter unten auf der Seite stehen. Je näher am oberen Bildschirmrand etwas eingefügt wird, desto größer ist meist die Verschiebung.

Banner, Hinweise und Formulare

Cookie-Hinweise, Aktionsbanner oder Newsletter-Formulare, die oben oder unten hereinrutschen, sind klassische Verursacher. web.dev empfiehlt, dafür vorab Platz zu reservieren, etwa mit einem Platzhalter, oder sie als Überlagerung außerhalb des Dokumentflusses anzuzeigen. Neue Inhalte ohne Nutzeraktion einzufügen, sollten Sie generell vermeiden; bei Listen mit „Mehr laden“ ist eine Schaltfläche besser als automatisches Nachschieben über dem aktuellen Inhalt.

Webfonts

Beim Wechsel von Ersatzschrift auf Webfont verschiebt sich Text, wenn beide unterschiedlich groß laufen. web.dev nennt als Gegenmittel font-display: optional, eine passende Ersatzschrift in der Schriftangabe, die Feinjustierung der Ersatzschrift per size-adjust und verwandten Angaben sowie das frühe Laden wichtiger Schriften per Preload. Mehr zum schnellen Laden von Schriften behandeln wir in einem eigenen Beitrag.

Animationen

Animationen, die Größe oder Position im Dokumentfluss verändern, lösen Neuberechnungen des Layouts aus. Animationen mit transform, also Verschieben, Skalieren oder Drehen, beeinflussen andere Elemente nicht und zählen laut web.dev nicht zum CLS.

Bonus: Zurück-Taste schneller machen

Seiten, die für den Back/Forward-Cache des Browsers geeignet sind, werden beim Zurückblättern exakt so wiederhergestellt, wie man sie verlassen hat. web.dev nennt das eine sehr wirksame Methode, um CLS niedrig zu halten.

Häufige Fragen

Mein Laborwert ist gut, der Feldwert schlecht. Woran liegt das?

Meist an Verschiebungen nach dem ersten Laden: beim Scrollen, durch nachgeladene Inhalte oder Banner, die erst nach einigen Sekunden erscheinen. Testen Sie die Seite mit der Live-Ansicht im Performance-Panel und scrollen Sie dabei.

Wie schnell sehe ich eine Verbesserung in der Search Console?

Die Felddaten beruhen auf echten Besuchen über einen längeren Zeitraum. Rechnen Sie damit, dass sich Verbesserungen nicht sofort, sondern erst nach einigen Wochen zeigen.

Verursachen Slider und Karussells CLS?

Häufig, wenn sie ohne feste Höhe starten oder ihre Bilder erst per Skript einsetzen. Eine feste Höhe oder ein Seitenverhältnis für den Slider-Container behebt das in der Regel.

Reicht es, die Startseite zu optimieren?

Nein. Prüfen Sie die wichtigsten Seitentypen – Startseite, Leistungs- oder Produktseiten, Blogartikel –, weil sie oft unterschiedliche Vorlagen nutzen.

Wenn Ihre Seite beim Laden springt und Sie nicht wissen, wo Sie anfangen sollen, schaue ich mir die betroffenen Vorlagen gern an – ein paar Zeilen reichen.