Hauptbereich
Agency
technisches-seo

Cumulative Layout Shift (CLS) eliminieren — visuelle Stabilität in den Griff bekommen

Redaktion ·

Cumulative Layout Shift ist die Metrik, die misst, wie oft dir der Boden unter den Fingern weggezogen wird. Du willst auf einen Button tippen, im selben Moment lädt ein Banner nach, alles rutscht nach unten — und dein Finger landet auf der falschen Stelle. Genau diese ungewollten Sprünge zählt CLS. Anders als bei Ladezeit-Metriken geht es nicht um wann etwas erscheint, sondern um ob es an Ort und Stelle bleibt. CLS ist Teil der Core Web Vitals und damit ein direkter Ranking-Eingang — vor allem aber ist ein hoher Wert ein verlässliches Symptom für schlampig gebaute Layouts.

Was CLS genau misst

CLS quantifiziert unerwartete Layout-Verschiebungen über die gesamte Lebensdauer einer Seite. Ein Layout-Shift passiert, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert — und zwar ohne dass der Nutzer das ausgelöst hat. Wichtig: Neue DOM-Elemente einzufügen oder ein Element zu vergrößern ist für sich kein Shift. Es wird erst dann gezählt, wenn dadurch andere, bereits sichtbare Elemente verschoben werden.

Der Score pro Verschiebung berechnet sich aus zwei Faktoren:

  • Impact Fraction — wie viel Anteil des sichtbaren Viewports von den instabilen Elementen zwischen zwei Frames betroffen ist.
  • Distance Fraction — die größte Strecke, die ein instabiles Element horizontal oder vertikal zurücklegt, geteilt durch die größere Viewport-Dimension.

Multipliziert ergeben beide den Layout-Shift-Score eines einzelnen Sprungs. Ein kleines Element, das ein bisschen wandert, ist harmlos. Ein großer Block, der weit nach unten springt, ist teuer.

Session-Windows statt stumpfer Summe

Früher hieß die Metrik wörtlich „cumulative” — alle Shifts wurden bis zum Seitenende aufsummiert. Das bestrafte lange Seiten und Single-Page-Apps unfair. Heute gilt das Session-Window-Verfahren: Shifts, die mit weniger als 1 Sekunde Abstand aufeinanderfolgen, bilden ein Fenster (maximal 5 Sekunden lang). Gewertet wird nur der größte dieser Bursts, nicht die Gesamtsumme. Praktisch heißt das: Ein einzelner schlimmer Sprung beim Laden zieht deinen Wert kaputt — verteilte kleine Bewegungen über Minuten hinweg weniger.

Die Schwellenwerte: unter 0,1 ist das Ziel

Google bewertet CLS in drei Stufen, gemessen am 75. Perzentil der Seitenaufrufe, getrennt nach Mobile und Desktop:

| Bewertung | CLS-Wert | |---|---| | Gut | ≤ 0,1 | | Verbesserungswürdig | > 0,1 bis ≤ 0,25 | | Schlecht | > 0,25 |

Das 75. Perzentil ist der entscheidende Punkt, den viele übersehen: Es reicht nicht, dass die Seite bei dir stabil lädt. Drei von vier echten Nutzern müssen einen Wert von 0,1 oder besser erleben — also auch die mit langsamer Verbindung, bei der Ads und Fonts spät nachladen und genau dann das Layout zerlegen.

Die Hauptursachen — und wo sie herkommen

Fast jeder reale CLS-Wert über 0,1 lässt sich auf eine kleine Handvoll Muster zurückführen.

Bilder, iframes und Embeds ohne reservierte Maße

Der Klassiker. Ein <img> ohne width/height belegt im Layout null Platz, bis die Datei geladen ist — dann klappt es auf und schiebt alles darunter weg. Dasselbe gilt für iframes (YouTube-Embeds), Maps-Widgets und Social-Media-Cards. Je weiter oben das Element steht, desto mehr verschiebt es.

Spät geladene Webfonts (FOUT/FOIT)

Ein Webfont rendert fast nie pixelgleich zum System-Fallback. Wenn der Browser zuerst die Fallback-Schrift zeigt (FOUT, Flash of Unstyled Text) und dann auf den Webfont umstellt, ändern sich Zeilenhöhe und Textbreite — der Text reflowt, und alles darunter rutscht. Bei FOIT (Flash of Invisible Text) bleibt der Text erst unsichtbar und springt dann ein. Beides erzeugt Shifts, oft spät und damit besonders ärgerlich.

Dynamisch eingefügter Content über bestehendem

Cookie-Banner, Newsletter-Bars, „Du hast 3 Artikel im Warenkorb”-Hinweise, A/B-Test-Varianten: Alles, was per JavaScript oberhalb von bereits sichtbarem Inhalt eingeschoben wird, drückt diesen nach unten. Besonders heimtückisch, weil es oft erst nach dem ersten Render passiert — also genau dann, wenn der Nutzer schon liest.

Ads und Third-Party-Widgets, die sich selbst nachdimensionieren

Werbeflächen kennen ihre finale Höhe oft erst, wenn die Anzeige geladen ist. Wenn du keinen Platz reserviert hast, expandiert der Ad-Slot und verschiebt den Content. Drittanbieter-Widgets (Chat-Bubbles, Bewertungs-Badges) haben dasselbe Problem.

Die Hebel: so räumst du Layout-Sprünge weg

Explizite Dimensionen oder aspect-ratio auf alle Medien

Setz auf jedes <img> und <video> die width- und height-Attribute. Moderne Browser berechnen daraus automatisch die aspect-ratio und reservieren den Platz, bevor die Datei lädt — der Slot ist von Anfang an korrekt groß. Für responsive Bilder, die per CSS skalieren, gibst du die Attribute trotzdem an und lässt CSS (width: 100%; height: auto;) die Darstellung regeln. Für iframes und Embeds reservierst du den Platz per CSS aspect-ratio oder einem fest dimensionierten Container.

font-display und size-adjust gegen Font-Sprünge

Steuere das Font-Verhalten über font-display. font-display: optional ist für CLS am sichersten — der Browser nimmt den Webfont nur, wenn er sofort da ist, sonst bleibt es beim Fallback ohne späteren Swap. Wer den Webfont garantiert zeigen will, kombiniert font-display: swap mit den @font-face-Deskriptoren size-adjust, ascent-override und descent-override: Damit passt du die Fallback-Schrift metrisch so an, dass sie denselben Platz belegt wie der Webfont — der Swap passiert dann ohne Reflow.

Platz für Ads, Embeds und nachladenden Content reservieren

Gib jedem Ad-Slot per CSS eine feste Mindesthöhe, die der häufigsten Anzeigengröße entspricht. Lieber ein kurz sichtbarer leerer Platzhalter als ein Sprung. Cookie-Banner und Notification-Bars gehören als Overlay (position: fixed) über den Content gelegt oder an den unteren Rand — nicht in den normalen Dokumentfluss oberhalb des Inhalts, wo sie alles wegdrücken.

Nie Content oberhalb von bereits Sichtbarem einfügen

Wenn du dynamisch etwas einschieben musst, tu es unterhalb des Viewport-Inhalts oder reserviere den Platz vorab. Ausnahme: Verschiebungen innerhalb von 500 Millisekunden nach einer echten Nutzer-Interaktion (Klick, Tap) gelten als erwartet und zählen nicht in den CLS-Score. Das ist der Grund, warum aufklappende Akkordeons und „Mehr laden”-Buttons kein CLS-Problem sind — der Nutzer hat sie ausgelöst.

Abgrenzung zu LCP und INP

CLS ist eine von drei Core Web Vitals und misst etwas grundlegend anderes als die beiden Geschwister:

  • LCP (Largest Contentful Paint) misst die Ladegeschwindigkeit — wann das größte sichtbare Element fertig gerendert ist. Es geht um wann etwas da ist.
  • INP (Interaction to Next Paint) misst die Reaktivität — wie schnell die Seite auf Eingaben reagiert. Es geht um wie flott sie antwortet.
  • CLS misst die visuelle Stabilität — ob das, was schon da ist, an seinem Platz bleibt.

Eine Seite kann blitzschnell laden (gutes LCP) und trotzdem ein katastrophales CLS haben, weil Fonts und Ads spät nachrutschen. Die drei Metriken überlappen nicht — du musst alle drei einzeln im Blick behalten. CLS ist dabei meist die am einfachsten zu fixende, weil die Ursachen so klar benennbar sind.

FAQ

FAQ

Ab welchem CLS-Wert ist eine Seite „gut"?
Ein CLS von 0,1 oder weniger gilt als gut, über 0,25 als schlecht — gemessen am 75. Perzentil der echten Nutzeraufrufe, getrennt nach Mobile und Desktop. Es reicht also nicht, dass es bei dir stabil lädt; drei von vier realen Nutzern müssen den Wert erreichen.
Warum ist mein CLS im Labor gut, in den Felddaten aber schlecht?
Labor-Tools (Lighthouse) messen einen einzelnen, oft schnellen Lauf. Felddaten (CrUX, Search Console) erfassen echte Nutzer mit langsamen Verbindungen, geleerten Caches und spät ladenden Ads oder Fonts — genau dort entstehen die Sprünge. Verlass dich für CLS immer auf die Felddaten.
Reicht es, width und height auf Bilder zu setzen?
Das löst die häufigste Ursache, aber selten alle. Prüfe zusätzlich Webfonts (font-display, size-adjust), reservierte Höhen für Ad-Slots und Embeds sowie dynamisch eingeschobenen Content wie Cookie-Banner. CLS ist meist eine Summe mehrerer kleiner Quellen.
Zählen Layout-Sprünge nach einem Klick gegen mich?
Nein, sofern die Verschiebung innerhalb von 500 Millisekunden nach der Nutzer-Interaktion passiert. Aufklappende Akkordeons, „Mehr laden"-Buttons oder geöffnete Menüs gelten als erwartet und fließen nicht in den CLS-Score ein.
Wie hängt CLS mit dem Ranking zusammen?
CLS ist Teil der Core Web Vitals und damit ein Ranking-Signal — allerdings ein vergleichsweise schwaches gegenüber Relevanz und Content-Qualität. Der größere Hebel ist die User Experience: Springende Layouts erhöhen Fehlklicks und Absprünge, und das wirkt sich indirekt aus.

Fazit

CLS ist die zugänglichste der drei Core Web Vitals, weil die Ursachen so konkret sind: Medien ohne Maße, nachrutschende Fonts, dynamisch eingeschobener Content, expandierende Ads. Wer auf jedes Bild width/height setzt, Fonts mit font-display und size-adjust zähmt und für Ads sowie Banner vorab Platz reserviert, drückt seinen Wert in fast allen Fällen unter die 0,1-Schwelle. Mess immer am 75. Perzentil der Felddaten, nicht am hübschen Labor-Lauf — denn dort, bei langsamen echten Nutzern, entstehen die Sprünge, die zählen.

Wer das Gesamtbild der technischen Crawlbarkeit und Performance verstehen will, findet es im Schwesterartikel zu technischem SEO.

Themenuebersicht

Technisches SEOCore Web VitalsPageSpeed & Performance