Was ist Cumulative Layout Shift (CLS) und wie man ihn behebt

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) repräsentiert den "visuellen Stabilitäts"-Teil der Core Web Vitals. Der Cumulative Layout Shift (CLS) misst die Bewegungen der Seite, während Inhalte gerendert oder neue Inhalte auf der Seite angezeigt werden. Er berechnet einen Wert basierend darauf, wie viel der Seite sich unerwartet bewegt und wie weit sie sich bewegt. Diese Verschiebungen von Inhalten sind sehr ärgerlich und führen dazu, dass Sie den Faden in einem Artikel verlieren, den Sie gerade lesen, oder schlimmer noch, dass Sie auf den falschen Button klicken!

Was ist ein guter Cumulative Layout Shift (CLS) Wert?

Ein guter CLS-Wert liegt zwischen 0 und 0,1. Wenn Ihr CLS-Wert zwischen 0,1 und 0,25 liegt, ist eine Verbesserung erforderlich. Jeder CLS-Wert über 0,25 wird als schlecht betrachtet. Um die Core Web Vitals für den Cumulative Layout Shift zu bestehen, müssen mindestens 75 % Ihrer Besucher einen "guten" CLS-Wert aufweisen.

Bedeutung von CLS für Web Performance und User Experience

Cumulative Layout Shift (CLS) ist sowohl mit der Web Performance als auch mit der User Experience verbunden, da es sich direkt darauf auswirkt, wie stabil und vorhersehbar sich eine Webseite während des Ladens anfühlt. Hier ist der Grund, warum es wichtig ist:

• UX, Engagement und Markenwahrnehmung: Unerwartete Layout-Verschiebungen stören den Nutzerfluss und machen es schwieriger, Informationen zu finden, auf Buttons zu klicken und wie beabsichtigt mit der Seite zu interagieren. Diese Frustration kann zu schlechten Erfahrungen führen, bei denen Nutzer die Website komplett verlassen. Die User Experience einer Website spiegelt sich in der dahinterstehenden Marke wider. Häufige Layout-Verschiebungen können den Eindruck einer schlecht gestalteten oder gewarteten Website erwecken, das Nutzer-Engagement stören und zu verminderter Interaktion und potenziell höheren Absprungraten führen.
• Barrierefreiheit (Accessibility): Layout-Verschiebungen können besonders störend für Nutzer mit Behinderungen sein, die auf assistive Technologien oder Screenreader angewiesen sind. Ein stabiles Layout stellt sicher, dass jeder effektiv navigieren und mit der Website interagieren kann.
• SEO und Search Ranking: Die Core Web Vitals sind ein kleiner, aber feiner Rankingfaktor bei Google. Google priorisiert, zusammen mit anderen Suchmaschinen, Websites, die eine gute User Experience bieten. CLS ist eine der Core Web Vitals Metriken, die Google bei der Bewertung von Websites berücksichtigt. Die Optimierung auf CLS kann Ihrer Website einen Wettbewerbsvorteil in den Suchergebnissen verschaffen.

Wie wird der CLS gemessen?

Der CLS einer Seite kann mit der Layout Instability API gemessen werden. Im Folgenden sehen Sie eine einfache Verwendung dieser API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Berechnung des CLS

Der CLS wird anhand einer einfachen, aber eleganten Formel berechnet:

CLS = sum(impact-fraction * distance-fraction)

Die Impact Fraction misst, wie viel des sichtbaren Inhalts der Seite sich verschoben hat. Die Distance Fraction misst, wie weit sich der Inhalt verschoben hat. Wenn sich beispielsweise 50 % der Seite (wie viel) um 25 % (wie weit) des Viewports der Seite verschoben hat, beträgt der CLS-Wert = 0,50 * 0,25 = 0,125.

Erwartete vs. unerwartete Layout-Verschiebungen

Nicht alle Layout-Verschiebungen sind schlecht, sondern nur diejenigen, die Sie nicht erwarten. Wenn Sie beispielsweise auf einen Link "Mehr Artikel laden" klicken, erwarten Sie, dass mehr Artikel auf der Seite erscheinen und sich der Inhalt der Seite verschiebt.

Deshalb verursachen nur unerwartete Layout-Verschiebungen einen CLS-Beitrag. Wenn beispielsweise ein Nutzer auf einen Button klickt und als Reaktion darauf neuer Inhalt zur Seite hinzugefügt wird (zum Beispiel ein Menü-Dropdown), wird die Layout-Verschiebung vom CLS ausgeschlossen. Um genau zu sein: Layout-Verschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzereingabe auftreten, werden von den Berechnungen ausgeschlossen.

Layout Shift Sessions

Als der CLS zum ersten Mal eingeführt wurde, wurden einige Websites ungerechterweise mit einem schlechten CLS-Wert bestraft. Beispielsweise hätte eine Seite, die Infinite Scrolling implementiert, bei jedem neuen Scrollen die Auswirkungen des neu hinzugefügten Inhalts zum gesamten CLS-Wert addiert bekommen. Deshalb wird der CLS jetzt in Sessions berechnet. Jede Session hat eine maximale Dauer von 5 Sekunden und eine Lücke von 1 Sekunde zwischen den Layout-Verschiebungen. Die Session mit dem größten CLS-Wert wird zum endgültigen CLS-Wert.

Wenn beispielsweise während der ersten Session der CLS-Wert 0,095 beträgt, in der nächsten Session der CLS 0,15 ist und für die letzte Session der CLS-Wert 0 beträgt, ist der endgültige CLS-Wert der höchste der drei: 0,15.

CLS und die Core Web Vitals

Cumulative Layout Shift (CLS) ist eine wichtige, nutzerzentrierte Metrik zur Messung der visuellen Stabilität. Der Cumulative Layout Shift (CLS) ist Teil der Core Web Vitals zusammen mit dem Largest Contentful Paint (LCP) und dem Interaction to Next Paint (INP). Zusammen messen diese drei Metriken Ladeleistung, Interaktivität und visuelle Stabilität.

Häufige CLS-Ursachen

Der Ursprung aller Layout-Verschiebungen ist im Grunde derselbe. Irgendwann hat ein Element, das über einem anderen Element platziert war, mehr oder weniger Platz eingenommen als zuvor. Dies liegt typischerweise an einer oder mehreren dieser Ursachen:

Bilder, Videos und Iframes ohne Dimensionen

Medien ohne definierte Größe sind die Hauptursache für CLS im Web. Laut dem 2025 Web Almanac haben 62 % der mobilen Seiten mindestens ein Bild ohne explizite Dimensionen. Für den vollständigen Leitfaden, der Bilder ohne definierte Größe, Videos, Iframes, die width: auto CSS-Falle, Art Direction, Nichtübereinstimmungen bei responsiven Bildern, Lazy Loading und Placeholder abdeckt, lesen Sie Wie Bilder und Medien Layout Shift verursachen.

Web-Font-Swaps

Web Fonts werden aus dem Internet heruntergeladen, während die Seite mit einem Fallback-Font gerendert wird. Wenn der Web Font ankommt, verursacht der Größenunterschied zwischen Fallback und endgültigem Font eine Layout-Verschiebung. Nur 11 % der Seiten laden Web Fonts per Preload vor, was bedeutet, dass die überwiegende Mehrheit des Webs anfällig für Font-Swap-CLS ist.

Die Lösung umfasst zwei Techniken: die Anpassung des Fallback-Fonts an den Web Font mithilfe von @font-face Metrik-Overrides (size-adjust, ascent-override) und die Beschleunigung der Font-Bereitstellung durch Self-Hosting und Preloading kritischer Fonts. Siehe den Fix-and-Identify-Leitfaden für Codebeispiele.

CSS-Animationen und Transitions

CSS-Animationen, die Layout-auslösende Eigenschaften wie top, left, width und height verwenden, zwingen den Browser dazu, das Layout bei jedem Frame neu zu berechnen, was CLS erzeugt. Laut dem Web Almanac haben 39 % der mobilen Seiten nicht-kompositierte Animationen, die zum CLS beitragen. Die Lösung ist, stattdessen transform und opacity zu verwenden, die auf dem GPU-Compositor laufen und niemals das Layout auslösen. Für den vollständigen Walkthrough lesen Sie Layout Shift verursacht durch CSS Transitions.

Anzeigen, Embeds und dynamisch injizierter Inhalt

Anzeigen laden spät und drücken Inhalte nach unten. Cookie-Consent-Banner erscheinen und verschieben die Seite. AJAX-Requests injizieren neue Inhalte, ohne Platz zu reservieren. Das ist alles das gleiche Problem: Es erscheint etwas auf der Seite, von dem der Browser zum Zeitpunkt des Renderns nichts wusste. Die Lösung besteht immer darin, Platz mit min-height zu reservieren und den Container mit dem Stil contain: layout zu isolieren. Für Third-Party-Embeds wie YouTube und Google Maps eliminiert das Facade-Pattern den CLS vollständig.

Scroll-ausgelöste Layout-Verschiebungen

Dies ist die CLS-Ursache, die Lighthouse niemals erfassen wird. Header, die sich beim Scrollen verbergen, Parallax-Effekte und schrumpfende Navigationsleisten animieren oft top oder height, und Scrollen ist in der Layout Instability Spezifikation kein ausschließender Input. Jede durch Scrollen ausgelöste Layout-Verschiebung zählt zu Ihrem CLS-Wert. Die Lösung: Verwenden Sie transform: translateY() für jede Scroll-ausgelöste Animation. Lesen Sie wie Scroll-ausgelöste Animationen CLS verursachen für den vollständigen Walkthrough.

Finden und Beheben von CLS-Problemen

Die Diagnose von CLS folgt der gleichen Field-Data-First Methodik wie die anderen Core Web Vitals. Beginnen Sie mit der Google Search Console oder einem RUM Tool wie CoreDash, um zu bestätigen, welche Seiten betroffen sind und welche Elemente sich verschieben. Verwenden Sie dann die Chrome DevTools oder die Core Web Vitals Visualizer Erweiterung, um das Problem lokal zu reproduzieren und die Grundursache zu identifizieren.

Für den kompletten schrittweisen Diagnoseprozess, Tool-Walkthroughs, Code-Fixes für jede Ursache und eine Quick-Fix-Checkliste, lesen Sie unseren speziellen Leitfaden: Cumulative Layout Shift (CLS) Probleme finden und beheben.

Case Study: Rakuten 24 und die geschäftlichen Auswirkungen von CLS

Rakuten 24, eine große japanische E-Commerce-Plattform, führte eine detaillierte Studie über die Auswirkungen von Cumulative Layout Shift auf ihre Geschäftskennzahlen durch. Durch die Reduzierung von CLS auf ihren Produkt- und Kategorieseiten erzielte Rakuten 24 bemerkenswerte Ergebnisse:

• 53,37 % Steigerung des Umsatzes pro Besucher bei Nutzern, die einen niedrigen CLS erlebten, im Vergleich zu denen mit einem hohen CLS.
• 33,13 % Steigerung der Conversion Rate für dieselbe Kohorte mit verbessertem CLS.
• 15,20 % Rückgang der Absprungrate (Bounce Rate) bei Besuchern mit stabilen Seitenerlebnissen.

Diese Zahlen belegen, dass CLS nicht nur eine rein technische Metrik ist. Visuelle Instabilität kostet Unternehmen direkt Umsatz, indem sie Nutzer während ihrer Browsing- und Kaufreise frustriert. Wenn sich Elemente unerwartet verschieben, verlieren Nutzer das Vertrauen, klicken falsch und brechen ihre Sessions ab. Die Studie von Rakuten 24 bestätigt, dass die Investition in die CLS-Optimierung einen messbaren Return on Investment hat, insbesondere für E-Commerce-Sites, bei denen jede Interaktion zählt.

Was reale CLS-Daten zeigen

Daten von CoreDash zeigen, dass CLS der am besten abschneidende Core Web Vital ist, wobei 92,8 % der Seitenaufrufe auf corewebvitals.io einen "guten" Wert erzielen und es praktisch keinen Unterschied zwischen Mobilgeräten und Desktops gibt. Sowohl Desktop (92,8 % gut) als auch Mobile (92,7 % gut) erreichen nahezu perfekte CLS-Werte, mit einem p75 von 0 auf beiden Gerätetypen.

Dies steht im Gegensatz zu Metriken wie LCP und INP, bei denen die mobile Leistung deutlich schlechter ist als auf dem Desktop. CLS ist im breiteren Web einzigartig besser auf Mobile als auf Desktop, was das Gegenteil von jedem anderen Core Web Vital ist.

Global gesehen ist das Bild laut dem 2025 Web Almanac weniger optimistisch:

• 72 % der Websites erzielen insgesamt gute CLS-Werte, während 11 % einen schlechten CLS haben.
• 62 % der mobilen Seiten haben mindestens ein Bild ohne definierte Größe (ein Rückgang von 66 % im Jahr 2024, aber immer noch ein Hauptverursacher von CLS).
• 39 % der mobilen Seiten weisen nicht-kompositierte Animationen auf, die zum CLS beitragen.
• Nur 11 % der Seiten laden Web Fonts per Preload vor, was bedeutet, dass die große Mehrheit der Websites anfällig für Font-Swap Layout Shifts ist.

CLS hat global gesehen stetige Verbesserungen im Jahresvergleich gezeigt, aber die Daten zeigen, dass Bilder ohne definierte Größe und nicht-kompositierte Animationen weiterhin die zwei häufigsten Ursachen bleiben. Allein die Behebung dieser beiden Probleme würde Layout-Verschiebungen für einen großen Teil des Webs eliminieren.

Verwandte Leitfäden

Diese Hub-Seite behandelt Cumulative Layout Shift auf einem hohen Niveau. Für detaillierte, praktische Anleitungen zum Finden und Beheben von CLS-Problemen, erkunden Sie diese speziellen Leitfäden:

• CLS-Probleme finden und beheben: Der komplette schrittweise Diagnose-Leitfaden mit Tool-Walkthroughs, Code-Fixes für jede Ursache und einer Quick-Fix-Checkliste.
• Wie Bilder und Medien Layout Shift verursachen: Der definitive Leitfaden zu CLS durch Bilder ohne definierte Größe, Videos, Iframes, Art Direction, responsive Bilder, Lazy Loading und Placeholder.
• Beheben von Layout Shift verursacht durch Auto-Sizing bei Bildern: Ein kompletter Walkthrough zum Hinzufügen der richtigen Dimensionen zu Bildern und responsiven Containern.
• Beheben von Layout Shift verursacht durch CSS Transitions: Identifizieren und Ersetzen Layout-auslösender CSS-Animationen durch kompositierte Alternativen.
• Scroll-ausgelöste Animationen und CLS: Die CLS-Ursache, die Lighthouse nicht erfassen kann, und wie man sie behebt.
• Google Fonts selbst hosten: Reduzieren Sie Font-Loading-CLS, indem Sie Fonts selbst hosten mit den richtigen font-display und Preloading-Strategien.
• Sicherstellen, dass Text während des Ladens von Web Fonts sichtbar bleibt: Konfigurieren Sie font-display und Font-Metrik-Overrides, um Font-Swap Layout Shifts zu eliminieren.
• Ein Chat-Widget mit perfekten Core Web Vitals bauen: Eine Case Study zur Implementierung von Third-Party-Widgets ohne Einführung von CLS-, INP- oder LCP-Regressionen.

Für einen kompletten Überblick über alle Core Web Vitals Metriken und Optimierungsstrategien besuchen Sie die Core Web Vitals Übersicht oder verwenden Sie die Ultimative Core Web Vitals Checkliste, um Ihre Seite zu auditieren.