Cumulative Layout Shift: Wenn die Seite springt

Du willst auf einen Button tippen, da lädt oben noch ein Banner nach, alles rutscht nach unten, und dein Finger landet auf der Werbung. Genau dieses Springen misst Cumulative Layout Shift. Es ist eine der unsichtbarsten Ursachen für Frust auf deiner Website. Und es kostet dich nicht nur Nerven deiner Besucher, sondern auch Rankings.

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) ist eine Kennzahl, die misst, wie stabil deine Seite beim Laden bleibt. Sie erfasst, wie stark sich sichtbare Elemente unerwartet verschieben, während die Seite aufbaut. Je mehr und je weiter Inhalte springen, desto höher der Wert. Niedrig ist gut. CLS ist eine der drei Core Web Vitals, mit denen Google die echte Nutzererfahrung bewertet.

Wichtig: Gemeint sind nur unerwartete Verschiebungen. Wenn sich nach deinem Klick ein Menü aufklappt, ist das gewollt und zählt nicht. Springt der Text aber von allein, weil ein Bild zu spät lädt, schlägt CLS an.

Warum kostet dich ein schlechter CLS-Wert Geld?

CLS gehört seit dem Page-Experience-Update im Juni 2021 zu den Signalen, mit denen Google die Seitenqualität bewertet. Es ist kein isolierter Rankingfaktor, sondern Teil eines Bündels. Die Wirkung zeigt sich auf zwei Ebenen:

• Ranking: Bei zwei Seiten mit ähnlich gutem Inhalt gibt die stabilere oft den Ausschlag. Schlechte Werte ziehen dich nach unten.
• Conversion: Springende Layouts führen zu Fehlklicks und gebrochenem Vertrauen. Wer aus Versehen auf den falschen Button tippt, wird selten zum Kunden, und die Absprungrate steigt.

Kurz: Guter Content rettet dich nicht, wenn die Seite unter den Händen deiner Besucher wackelt.

Wie wird der CLS-Wert berechnet?

Hinter dem Wert steckt eine einfache Logik. Jede einzelne Verschiebung bekommt einen Layout-Shift-Score: betroffene Fläche mal zurückgelegte Distanz (Impact Fraction mal Distance Fraction). Ein großes Element, das weit springt, wiegt also schwerer als ein kleines, das nur leicht ruckelt.

Google summiert diese Scores nicht über den gesamten Besuch. Stattdessen zählt der größte zusammenhängende Schub, das sogenannte Session-Window: Verschiebungen mit weniger als einer Sekunde Pause werden zusammengefasst, ein Fenster ist auf maximal fünf Sekunden begrenzt. Der höchste dieser Werte ist dein CLS.

Welche CLS-Werte sind gut?

Google nutzt drei Stufen. Bewertet wird das 75. Perzentil deiner echten Nutzerdaten, und zwar je Metrik getrennt. Heißt: Mindestens drei Viertel deiner Seitenaufrufe sollten im grünen Bereich liegen.

• Gut: unter 0,1
• Verbesserungswürdig: 0,1 bis 0,25
• Schlecht: über 0,25

Was lässt dein Layout springen?

Die Ursachen sind fast immer dieselben. Vier davon decken die meisten Fälle ab:

• Bilder ohne feste Maße: Fehlen Breite und Höhe, reserviert der Browser keinen Platz. Das Bild lädt nach und schiebt alles darunter weg.
• Werbung, Embeds und iFrames: Banner, eingebettete Videos oder Social-Feeds ohne reservierten Container drücken bestehende Inhalte zur Seite, sobald sie laden.
• Webfonts: Lädt eine Schrift spät, tauscht der Browser die Ersatzschrift aus. Buchstabenbreiten ändern sich, der Text fließt neu um.
• Nachgeladener Content: Cookie-Banner, Hinweise oder Widgets, die sich über bestehende Inhalte schieben, sind ein häufiger Auslöser, besonders above the fold.

Wie behebst du CLS-Probleme?

Ein Teil lässt sich ohne Entwickler lösen, ein Teil gehört in technische Hände. Die wirksamsten Hebel:

• Bildmaße festlegen: Immer Breite und Höhe angeben oder im CSS mit aspect-ratio arbeiten. Dann steht der Platz, bevor das Bild da ist. Das gilt auch für lazy-geladene Bilder.
• Platz für Werbung reservieren: Jeder Anzeigen- oder Embed-Container bekommt eine feste Mindesthöhe, damit nichts springt, wenn der Inhalt erscheint.
• Fonts vorladen: Mit font-display und frühem Preload den Schriftwechsel entschärfen.
• Richtig animieren: Bewegungen über transform lösen statt über Eigenschaften, die das Layout neu berechnen.

Auf Webflow ist die Basis solide: Bildmaße werden in der Regel automatisch gesetzt. Aber eingebundene Scripts, Custom Embeds oder schwere Animationen können den Wert trotzdem verschlechtern.

Wie misst du deinen CLS-Wert?

Du brauchst kein Geld und keine Spezialsoftware. Drei Wege führen zum Wert:

• Google PageSpeed Insights: zeigt CLS pro URL plus konkrete Hinweise, welches Element springt.
• Google Search Console: der Core-Web-Vitals-Report listet alle Seiten mit Problemen auf einen Blick.
• Chrome DevTools: im Performance-Tab siehst du live, welche Elemente sich verschieben.

CLS ist kein Selbstzweck. Eine stabile Seite ist Teil einer guten Page Speed und damit die Grundlage dafür, dass Besucher bleiben statt zu fliehen.