Cumulative Layout Shift (CLS): Visuelle Stabilität

Cumulative Layout Shift (CLS) ist die Core-Web-Vitals-Metrik, die misst, wie ruhig oder unruhig eine Seite während des Ladens und der Nutzung wirkt. Wenn Inhalte verspringen, weil ein Bild ohne reservierten Platz nachlädt oder ein Cookie-Banner einrückt, klickt der Nutzer auf den falschen Button. CLS quantifiziert genau diese Erfahrung. Dieser Artikel erklärt, wie der Score berechnet wird, welche Ursachen Layout-Shifts haben, wie sich Bilder, Webfonts, Consent-Banner und Next.js-Komponenten stabilisieren lassen und warum CLS primär ein UX-Signal für menschliche Nutzer bleibt, während KI-Crawler vor allem auf das server-gerenderte HTML schauen.

Warum visuelle Stabilität für Unternehmen zählt

CLS ist seit der Einführung der Core Web Vitals neben Largest Contentful Paint (LCP) und Interaction to Next Paint (INP) ein offizielles Page-Experience-Signal. INP ist dabei das jüngste Mitglied: Es wurde am 12. März 2024 zum Core Web Vital und löste FID ab (internationale Quelle, Google). CLS gehört von Beginn an dazu und beschreibt als einzige der drei Metriken nicht Geschwindigkeit oder Reaktivität, sondern die optische Ruhe der Seite.

Der geschäftliche Hebel ist messbar. In einem von Google dokumentierten A/B-Test des japanischen Shops Rakuten 24 verbesserte die optimierte Variante den CLS-Wert um 92,72 Prozent und steigerte zugleich den Umsatz pro Besucher um 53,37 Prozent sowie die Conversion-Rate um 33,13 Prozent (internationale Fallstudie). Yahoo! JAPAN News reduzierte den CLS in Labordaten von etwa 0,2 auf 0 und verzeichnete danach 15,1 Prozent mehr Seitenaufrufe pro Sitzung, 13,3 Prozent längere Sitzungsdauer und eine um 1,72 Prozentpunkte niedrigere Absprungrate (internationale Fallstudie). Solche Effekte reihen sich in den breiteren Befund ein, dass schon 0,1 Sekunden schnellere mobile Ladezeit die Conversion-Rate im Retail um 8,4 Prozent und die Ausgaben um 9,2 Prozent erhöhen (internationale Erhebung, Deloitte und 55 im Auftrag von Google).

Für den österreichischen Markt ist das relevant, weil die Nutzung fast vollständig mobil und vernetzt ist. Anfang 2025 lag die Online-Penetration in Österreich bei 95,3 Prozent mit 8,69 Millionen Internetnutzern und 13,4 Millionen Mobilfunkanschlüssen, also 147 Prozent der Bevölkerung (Österreich). Layout-Shifts treffen besonders auf Smartphones zu, wo kleinere Viewports und langsamere Verbindungen jeden Sprung sichtbarer machen.

Wie der CLS-Score berechnet wird

CLS misst die Summe aller unerwarteten Layout-Shifts. Ein Layout-Shift entsteht, wenn ein sichtbares Element seine Startposition zwischen zwei gerenderten Frames verändert, ohne dass eine Nutzerinteraktion das ausgelöst hat. Der Score je Verschiebung ergibt sich aus zwei Faktoren.

• Impact Fraction: Der Anteil des sichtbaren Viewports, der von den verschobenen Elementen betroffen ist. Bewegt sich ein Block, der die obere Hälfte des Bildschirms einnimmt, nach unten, ist ein grosser Teil des Viewports betroffen.
• Distance Fraction: Die Strecke, die das instabilste Element zurücklegt, geteilt durch die größere Viewport-Dimension. Sie beschreibt, wie weit der Inhalt springt.

Der Layout-Shift-Score ist das Produkt aus Impact Fraction und Distance Fraction. CLS summiert nicht naiv alle Einzelwerte über die gesamte Seitenlebensdauer, sondern arbeitet mit Session-Windows: Verschiebungen werden zu Fenstern gruppiert, ein Fenster dauert maximal 5 Sekunden mit höchstens 1 Sekunde Abstand zwischen Einzel-Shifts. Der höchste Fensterwert zählt als CLS der Seite. Das verhindert, dass lange Sitzungen künstlich schlechte Werte produzieren.

Die Schwellen sind klar definiert. Laut Google sollten Seiten einen CLS-Wert von 0,1 oder weniger anstreben; Werte über 0,25 gelten als schlecht, gemessen am 75. Perzentil der Seitenaufrufe getrennt nach Mobil und Desktop (internationale Quelle, Google). Werte zwischen 0,1 und 0,25 bedeuten Verbesserungsbedarf. Das 75. Perzentil heisst: Drei von vier Seitenaufrufen müssen das Ziel erreichen, nicht nur der Durchschnitt.

Im Vergleich der drei Core Web Vitals schneidet CLS am besten ab. Laut dem HTTP Archive Web Almanac erreichen 2025 72 Prozent der Desktop-Seiten und 81 Prozent der mobilen Seiten einen guten CLS-Wert (internationale Erhebung), während mobil nur 62 Prozent ein gutes LCP und 77 Prozent ein gutes INP erreichen. Der Fortschritt ist deutlich: Der Anteil mobiler Seiten mit gutem CLS stieg von 60 Prozent im Jahr 2020 auf 79 Prozent im Jahr 2024 (internationale Erhebung).

Die häufigsten Ursachen von Layout-Shifts

Fast alle CLS-Probleme lassen sich auf wenige Muster zurückführen. Wer diese kennt, findet die Verursacher schnell.

• Bilder, Videos und iframes ohne Abmessungen: Ohne width und height oder ein definiertes Seitenverhältnis kennt der Browser die Höhe erst, wenn die Datei geladen ist. Bis dahin nimmt das Element keinen Platz ein, danach drückt es den restlichen Inhalt nach unten.
• Dynamisch eingefügte Inhalte: Werbung, Embeds, Newsletter-Banner und vor allem Consent-Dialoge erscheinen oft nach dem ersten Rendern und schieben bestehende Inhalte beiseite.
• Webfont-Swapping (FOUT/FOIT): Der Browser zeigt zunächst eine Fallback-Schrift und tauscht sie gegen die geladene Webfont. Unterscheiden sich die Schriftmetriken, ändert sich der Textfluss und der Inhalt verschiebt sich.
• Spät ladende Komponenten: Client-seitig nachgeladene Widgets, Skeleton-Loader mit falscher Höhe oder Inhalte, die erst nach der Hydration erscheinen, verschieben den Rest der Seite.

Bilder sind dabei der häufigste und am leichtesten vermeidbare Verursacher. Laut Web Almanac 2025 versäumen es 62 Prozent der mobilen Seiten und 65 Prozent der Desktop-Seiten, bei mindestens einem Bild Abmessungen zu setzen (internationale Erhebung). Die Mehrheit der Seiten lässt den Browser also weiterhin über die Bildgröße raten.

Bilder und Medien stabilisieren

Die wirksamste Einzelmassnahme ist, dem Browser die Dimensionen jedes Mediums vorab mitzuteilen. So reserviert er den Platz, bevor die Datei geladen ist.

• width und height als Attribute setzen: Moderne Browser berechnen aus den HTML-Attributen width und height das Seitenverhältnis und halten den Platz frei, auch wenn das Bild per CSS responsiv skaliert wird. Das ist der schnellste Hebel.
• CSS aspect-ratio nutzen: Für Container, deren Verhältnis feststeht, aber deren konkrete Pixelmasse variieren, reserviert aspect-ratio den Raum unabhängig von der geladenen Datei.
• min-height für unbekannte Inhalte: Wo die endgültige Höhe nicht feststeht, etwa bei nachgeladenen Listen, verhindert eine sinnvolle Mindesthöhe den Kollaps des Containers.
• Lazy-Loading korrekt einsetzen: Verzögertes Laden spart Bandbreite, darf aber nie ohne reservierten Platz erfolgen. Ein lazy geladenes Bild ohne Abmessungen ist eine der häufigsten CLS-Quellen, weil es genau dann einspringt, wenn der Nutzer scrollt.

Webfonts ohne Shift einbinden

Webfonts sind nahezu universell und damit ein systematisches CLS-Risiko. Laut Web Almanac 2025 nutzen 87 Prozent der mobilen Seiten mindestens eine Webfont, aber nur 15 bis 16 Prozent der Seiten setzen Font-Preload ein (internationale Erhebung). Der Almanac verbindet das ausdrücklich mit CLS: Wenn der Browser eine Fallback-Schrift gegen die geladene Webfont tauscht, ändern sich Größe und Laufweite des Textes und Inhalt verschiebt sich.

• font-display bewusst wählen: Der Wert swap zeigt sofort Text in der Fallback-Schrift und tauscht später, was FOIT vermeidet, aber FOUT-Shifts erzeugen kann. optional vermeidet den Tausch nach kurzer Zeit ganz und ist für Stabilität oft die ruhigere Wahl.
• Fallback-Metriken angleichen: Mit size-adjust, ascent-override und descent-override in einer @font-face-Regel lässt sich die Fallback-Schrift so anpassen, dass sie denselben Platz einnimmt wie die Webfont. Der Tausch wird dadurch praktisch unsichtbar.
• Kritische Fonts preloaden: Ein gezielter preload-Hint für die wichtigste Schrift macht sie früh verfügbar. Angesichts der niedrigen Verbreitung ist das ein einfacher Vorsprung gegenüber dem Wettbewerb.
• Self-Hosting bevorzugen: Selbst gehostete Fonts entfallen den zusätzlichen Verbindungsaufbau zu Drittanbietern, laden schneller und reduzieren so das Zeitfenster, in dem ein Shift auftreten kann. Self-Hosting hat in der DACH-Region zudem einen DSGVO-Vorteil, weil keine IP-Adressen an externe Font-Dienste übertragen werden.

CLS in Next.js und JavaScript-Frameworks

Moderne Frameworks bringen eigene CLS-Fallstricke mit, liefern aber auch passende Werkzeuge. Entscheidend ist, dass server-gerenderte Inhalte ihre endgültige Geometrie behalten, sobald die Hydration einsetzt.

• next/image verwenden: Die Komponente erzwingt die Angabe von Abmessungen oder fill mit definiertem Container und reserviert so automatisch Platz. Das eliminiert die häufigste Bildquelle von CLS bereits zur Entwicklungszeit.
• next/font einsetzen: next/font lädt Schriften zur Build-Zeit selbst gehostet, eliminiert externe Requests und berechnet automatisch Fallback-Metriken, sodass der Font-Tausch keinen Shift verursacht.
• Skeleton-Loader masshaltig bauen: Platzhalter müssen exakt die Höhe des späteren Inhalts haben. Ein Skeleton, das kleiner ist als der finale Block, verschiebt die Seite beim Austausch genauso wie gar kein Platzhalter.
• SSR, Streaming und Hydration beachten: Server-Rendering und Streaming liefern stabiles HTML früh aus. Probleme entstehen, wenn client-seitig nachgeladene Inhalte über oder zwischen bereits sichtbaren Blöcken einfügen. Solche Inhalte gehören nach unten oder in fest reservierte Bereiche.

Consent-Banner und Third-Party-Ads CLS-sicher umsetzen

In der DSGVO-Region ist der Consent-Dialog praktisch unvermeidlich und einer der häufigsten CLS-Verursacher, weil er früh und prominent erscheint. Werbeplätze verhalten sich ähnlich, da ihre Größe oft erst zur Laufzeit feststeht.

• Banner per Overlay statt im Flow: Ein Consent-Dialog, der als fixiertes Overlay über dem Inhalt liegt, verschiebt nichts. Ein Banner, das oben in den Dokumentfluss einrückt und alles nach unten drückt, erzeugt dagegen einen grossen Shift.
• Ad-Slots vorab dimensionieren: Reserviere für jeden Werbeplatz die zu erwartende Höhe über Slot-Sizing oder einen Container mit aspect-ratio. Bleibt eine Anzeige aus, sollte der Platz definiert kollabieren, nicht der Inhalt nachspringen.
• transform statt layout-ändernder Properties: Animiere Ein- und Ausblendungen mit transform und opacity. Diese Eigenschaften werden vom Compositor verarbeitet und lösen keinen Reflow aus, anders als top, left, width oder height.

Animationen und Rendering effizient gestalten

Nicht-komposierte Animationen sind eine unterschätzte CLS-Quelle. Laut Web Almanac 2024 nutzen 39 Prozent der mobilen Seiten und 42 Prozent der Desktop-Seiten nicht-komposierte Animationen (internationale Erhebung), die Stile neu berechnen, das Dokument umbrechen und Pixel neu zeichnen.

• Nur transform und opacity animieren: Diese Eigenschaften laufen auf der GPU und verändern das Layout nicht. Animationen von Geometrie-Eigenschaften wie width, height oder margin zwingen den Browser zum Reflow und können Nachbarelemente verschieben.
• content-visibility gezielt einsetzen: Mit content-visibility: auto überspringt der Browser das Rendern nicht sichtbarer Bereiche. In Kombination mit contain-intrinsic-size bleibt der reservierte Platz erhalten, sodass kein Shift entsteht, wenn der Bereich in den Viewport scrollt.
• CSS containment nutzen: Die contain-Eigenschaft grenzt Layout-, Stil- und Paint-Effekte eines Elements ein. Änderungen innerhalb eines Containers wirken sich so nicht auf den Rest der Seite aus.

CLS messen: Labor gegen Feld

CLS lässt sich auf zwei Ebenen messen, die sich ergänzen und oft unterscheiden. Labordaten zeigen reproduzierbare Werte unter kontrollierten Bedingungen, Felddaten zeigen die tatsächliche Erfahrung echter Nutzer.

• Felddaten (CrUX): Der Chrome UX Report sammelt anonymisierte Echtdaten und ist die Grundlage für die offizielle Bewertung am 75. Perzentil. Der Core-Web-Vitals-Bericht der Google Search Console und PageSpeed Insights greifen darauf zurück.
• Labordaten (Lighthouse): Lighthouse und der Lab-Teil von PageSpeed Insights simulieren einen Seitenaufruf. Sie sind ideal zum Debuggen, erfassen aber nur den initialen Ladevorgang, nicht spätere Interaktions-Shifts.
• Real-User-Monitoring mit web-vitals.js: Die offizielle JavaScript-Bibliothek misst CLS direkt im Browser echter Nutzer über die gesamte Seitenlebensdauer und kann die Werte an ein Analyse-System senden. Das schliesst die Lücke zwischen Labor und CrUX und macht auch späte Verschiebungen sichtbar.

Der wichtigste Unterschied: Labordaten messen typischerweise nur den Ladevorgang, CLS entsteht aber über die gesamte Lebensdauer der Seite. Eine Seite kann im Lighthouse-Test ein perfektes CLS zeigen und im Feld trotzdem schlecht abschneiden, etwa weil ein Banner erst nach mehreren Sekunden oder bei einer Interaktion einrückt.

Häufige Fehler bei der CLS-Optimierung

Wiederkehrende Muster kosten Stabilität, lassen sich aber gezielt vermeiden.

• Nur Labordaten betrachten: Wer ausschliesslich Lighthouse prüft, übersieht späte Shifts durch Consent-Banner, Ads oder Interaktionen, die nur im Feld auftreten.
• Bilder ohne Abmessungen ausliefern: Trotz einfacher Lösung bleibt dies laut den HTTP-Archive-Zahlen der häufigste Fehler und betrifft die Mehrheit der Seiten.
• Consent-Banner in den Dokumentfluss einfügen: Ein einrückendes Banner erzeugt oft den größten Einzel-Shift der gesamten Seite.
• Geometrie-Eigenschaften animieren: Animationen von width, height, top oder left lösen Reflows aus und verschieben Nachbarelemente.
• Skeleton-Loader mit falscher Höhe: Ein Platzhalter, der nicht der finalen Höhe entspricht, verschiebt die Seite beim Austausch genauso wie gar kein Platzhalter.

CLS, Page Experience und der GEO-Kontext

CLS ist Teil der Page Experience und wirkt als ergänzendes Signal, nicht als alleiniger Ranking-Hebel. Bei vergleichbarer Relevanz kann eine bessere Nutzererfahrung den Ausschlag geben, weshalb CLS oft als Tie-Breaker beschrieben wird. Im Zusammenspiel mit LCP und INP ergibt sich ein vollständiges Bild der wahrgenommenen Qualität: LCP misst, wie schnell der Hauptinhalt erscheint, INP, wie reaktiv die Seite ist, und CLS, wie ruhig sie bleibt. Eine ruhige Seite ohne unerwartete Sprünge ist zudem ein Faktor für die bfcache-Eligibility, die schnelle Vor- und Zurück-Navigation ermöglicht.

Im Kontext von KI-Crawlern und Generative Engine Optimization (GEO) ist eine klare Einordnung wichtig. CLS ist ein visuelles Signal für menschliche Nutzer, das im Browser entsteht, während Layout und Pixel berechnet werden. KI-Crawler hingegen verarbeiten in erster Linie das server-gerenderte HTML und dessen semantische Struktur. Ein hoher CLS-Wert verschlechtert nicht direkt die Sichtbarkeit in KI-Antworten, weil ein Crawler keine visuellen Sprünge wahrnimmt. Die Verbindung ist indirekt: Massnahmen gegen CLS, etwa sauberes Server-Side-Rendering, frühes stabiles HTML und der Verzicht auf rein client-seitig nachgeladene Inhalte, verbessern zugleich die Maschinenlesbarkeit für KI-Crawler. CLS bleibt damit primär ein UX-Signal für Menschen, während dieselbe technische Disziplin auch der GEO-Sichtbarkeit zugutekommt.

Weiterführendes und Fazit

CLS misst die visuelle Stabilität einer Seite und sollte am 75. Perzentil bei 0,1 oder darunter liegen. Der größte Hebel ist zugleich der einfachste: Bilder, Videos und iframes mit Abmessungen ausliefern, denn sie sind der häufigste und am leichtesten vermeidbare Verursacher. Webfonts gehören selbst gehostet, mit angeglichenen Fallback-Metriken und font-display-Strategie eingebunden, Consent-Banner und Ads brauchen reservierten Platz oder ein Overlay, und Animationen sollten ausschliesslich transform und opacity nutzen. In Next.js erledigen next/image und next/font einen Grossteil dieser Arbeit automatisch.

Sinnvolle nächste Schritte sind: den Core-Web-Vitals-Bericht der Search Console auf CLS-Probleme prüfen, mit web-vitals.js Real-User-Monitoring einrichten, um späte Feld-Shifts zu erfassen, und alle Medien sowie Consent- und Ad-Slots systematisch auf reservierten Platz kontrollieren. Da die geschäftlichen Effekte in den dokumentierten Fallstudien erheblich sind, lohnt sich CLS-Optimierung nicht nur für das Ranking, sondern direkt für Conversion und Umsatz.