Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) misst, wie stark sich sichtbare Elemente einer Webseite beim Laden unerwartet verschieben. Ein schlechter CLS entsteht, wenn Inhalte springen, Buttons ihre Position ändern oder Text nach unten rutscht, obwohl der Nutzer bereits mit der Seite interagieren will.

Welche CLS-Werte gelten als gut?

CLS ist einer der drei Core Web Vitals. Ein Wert bis 0,1 gilt als gut. Zwischen 0,1 und 0,25 besteht Verbesserungsbedarf. Werte über 0,25 gelten als schlecht.

Anders als bei Ladezeit-Metriken wird CLS nicht in Sekunden gemessen. Der Wert beschreibt die Summe unerwarteter Layout-Verschiebungen. Je höher er ist, desto instabiler wirkt die Seite für Besucher.

Was verursacht Layout-Verschiebungen?

Viele CLS-Probleme entstehen durch Elemente, deren Platz im Layout nicht reserviert ist. Bilder ohne feste Breiten- und Höhenangaben, dynamisch geladene Banner, nachträglich eingefügte Cookie-Hinweise, Anzeigenflächen, eingebettete Videos oder Web-Fonts ohne passende Fallbacks können sichtbare Inhalte verschieben.

Auf mobilen Geräten fallen solche Sprünge besonders stark auf. Wenn der sichtbare Bereich klein ist, reicht eine kleine Verschiebung, damit ein Button plötzlich woanders liegt oder ein Absatz unterbrochen wird.

Auch gut gemeinte Optimierungen können CLS auslösen. Lazy Loading, nachgeladene Komponenten oder personalisierte Inhalte sind sinnvoll, brauchen aber reservierte Layoutflächen. Andernfalls wird Performance an einer Stelle verbessert und Stabilität an anderer Stelle verschlechtert.

Warum kostet CLS Vertrauen und Conversions?

Layout-Stabilität ist ein Nutzbarkeitsthema. Wer gerade auf einen Button tippen will und stattdessen einen anderen Link trifft, erlebt die Seite als unzuverlässig. In Shops, Buchungsstrecken oder Formularen kann das direkte Auswirkungen auf Abschlüsse haben.

CLS sollte deshalb nicht nur als technischer Prüfwert verstanden werden. Zusammen mit Largest Contentful Paint (LCP) und Interaction to Next Paint (INP) zeigt der Wert, ob eine Seite schnell erscheint, stabil bleibt und auf Eingaben reagiert.

Wie verbessert man CLS?

Die wichtigsten Maßnahmen sind meist strukturell: Bilder und Videos brauchen feste Seitenverhältnisse, Werbe- oder Bannerflächen reservierten Platz, Fonts eine kontrollierte Lade-Strategie und nachgeladene Komponenten klare Layoutgrenzen.

Bei WordPress-Websites lohnt sich zusätzlich ein Blick auf Plugins, die Elemente nachträglich in Header, Footer oder Inhaltsbereiche einfügen. Auch Cookie-Banner, Bewertungswidgets oder externe Formulare sollten so eingebunden werden, dass sie keine bereits sichtbaren Inhalte verschieben.

Eine professionelle Performance-Optimierung prüft CLS nicht isoliert, sondern im Zusammenspiel mit Design, Frontend-Code, Hosting und Drittanbieter-Skripten. Technische Grundlagen und Beispiele beschreibt web.dev im Artikel zu Cumulative Layout Shift.

Für die Diagnose sind Video-Aufzeichnungen und DevTools oft hilfreicher als ein reiner Zahlenwert. Sie zeigen, welches Element springt, wann die Verschiebung entsteht und ob Nutzer in einem kritischen Moment betroffen sind.