Cumulative Layout Shift (CLS): Visuelle Stabilität für SEO & Performance
Du kennst das: Du lädst eine Seite, willst auf einen Button klicken und plötzlich springt der Inhalt weg. Du klickst auf das Falsche. Das ist kein Zufall, das ist ein messbares Problem. Es heißt Cumulative Layout Shift, kurz CLS, und es kostet dich Rankings, Nutzer und Conversions.
CLS ist eine der drei Core Web Vitals-Metriken, mit denen Google die Qualität der Nutzererfahrung bewertet.
Darüber hinaus gibt es weitere Metriken wie Time to First Byte (TTFB) oder First Contentful Paint (FCP), die zwar nicht zu den Core Web Vitals zählen, aber dennoch als Web Vitals relevant sind. Wer seine Website für Suchmaschinen optimiert, kommt an CLS nicht vorbei.
Du willst wissen, wie deine Website bei CLS und den anderen Core Web Vitals abschneidet? Unsere technische SEO Beratung zeigt dir, wo konkret Handlungsbedarf besteht – und wie du ihn behebst.
Was ist Cumulative Layout Shift?
Cumulative Layout Shift misst die visuelle Stabilität einer Seite während des Ladevorgangs. Die Metrik erfasst, wie stark sich sichtbare Elemente unerwartet verschieben, bevor der Nutzer mit der Seite interagiert.
Ein hoher CLS-Wert bedeutet: Inhalte springen, rutschen oder verschieben sich. Das führt zu Fehlklicks, Frustration und im schlimmsten Fall zum Abbruch.
Ein niedriger CLS-Wert bedeutet: Die Seite ist stabil, Inhalte bleiben wo sie sind, und Nutzer können sicher interagieren.
Die Layout Instability API im Browser erkennt und misst diese Verschiebungen automatisch. Jede unerwartete Bewegung eines Elements wird als „Layout Shift" registriert.
Die Metrik verstehen: Wie wird der CLS-Score berechnet?
Der CLS-Score ist kein einfacher Durchschnittswert. Er ergibt sich aus der Multiplikation zweier Faktoren, die Google für jeden einzelnen Layout Shift berechnet.
Impact Fraction & Distance Fraction einfach erklärt
CLS = Impact Fraction × Distance Fraction
- Impact Fraction beschreibt, wie viel Prozent des sichtbaren Viewports von dem verschobenen Element betroffen sind, sowohl vor als auch nach der Verschiebung.
- Distance Fraction beschreibt, wie weit sich das Element relativ zur Viewport-Höhe bewegt hat.
Beispiel: Ein Element belegt 50 % des Viewports und verschiebt sich um 25 % der Viewport-Höhe. Der Shift-Score für diesen einzelnen Shift beträgt dann: 0,5 × 0,25 = 0,125.
Das „Session Window" – Warum alte Definitionen nicht mehr stimmen
Bis 2021 hat Google alle Layout Shifts einer Seite einfach addiert. Das war unfair: Lange Seiten oder Seiten mit viel dynamischem Content wurden automatisch schlechter bewertet, auch wenn einzelne Shifts minimal waren.
Stell dir vor, du bewertest einen Autofahrer. Nach der alten Methode würdest du jede kleine Lenkbewegung während einer dreistündigen Fahrt zusammenzählen. Am Ende hätte selbst ein vorsichtiger Fahrer einen riesigen CLS-Wert, nur weil die Fahrt lang war. Nach der neuen Methode schaust du dir nur die kritischsten 5 Sekunden der Fahrt an, in denen am meisten passiert ist. Das ist fairer und zeigt echte Probleme.
Seit dem Session Window Update (2021) funktioniert die Berechnung genau so. Google gruppiert Layout Shifts in Zeitfenster von maximal 5 Sekunden. Zwischen zwei Shifts darf maximal 1 Sekunde Pause liegen, damit sie zum selben Fenster gehören. Der finale CLS-Score ist der höchste Wert eines dieser Session Windows, nicht die Summe aller Shifts.
Das macht die Metrik fairer und gezielter. Einzelne problematische Momente werden sichtbar, ohne dass harmlose Shifts das Gesamtergebnis verzerren.
Warum CLS ein kritischer Rankingfaktor für Google ist
Seit dem Google Page Experience Update (seit Juni 2021) fließen die Core Web Vitals direkt in das Ranking ein. CLS ist einer der drei Kernwerte, neben Largest Contentful Paint (LCP) und Interaction to Next Paint (INP).
Google bewertet CLS anhand echter Nutzerdaten aus dem Chrome User Experience Report (CrUX). Das bedeutet: Nicht dein Lighthouse-Test entscheidet über dein Ranking, sondern das Erlebnis echter Nutzer auf deiner Seite.
Die Schwellenwerte sind klar definiert:
Wer dauerhaft über 0,25 liegt, riskiert schlechtere Rankings, besonders in stark umkämpften Nischen, wo technische Performance den Unterschied macht.
Die 3 häufigsten Ursachen für Layout Shifts
Layout Shifts entstehen selten zufällig. Hinter den meisten stecken drei technische Ursachen, die sich gezielt beheben lassen. Das Gute: Alle drei sind gut dokumentiert und mit überschaubarem Aufwand zu lösen.
Bilder und Videos ohne explizite Dimensionen
Das ist die häufigste Ursache. Wenn ein Browser eine Seite rendert und die Dimensionen eines Bildes nicht kennt, reserviert er zunächst keinen Platz. Sobald das Bild geladen ist, schiebt es den restlichen Inhalt weg.
Die Lösung: Gib jedem Bild und Video im HTML explizit width und height an.
<img src="beispiel.jpg" width="800" height="450" alt="Beschreibung">Alternativ funktioniert auch die moderne CSS-Eigenschaft aspect-ratio, die dem Browser das Seitenverhältnis mitteilt, bevor das Bild geladen ist:
img { aspect-ratio: 16 / 9; width: 100%;}Dynamisch nachgeladene Inhalte (Ads & Banner)
Werbebanner und dynamische Inhalte werden oft erst nach dem initialen Rendering geladen. Wenn kein Platz für sie reserviert ist, verschieben sie den gesamten Seiteninhalt nach unten.
Die Lösung: Reserviere einen Container mit einer min-height, die der erwarteten Anzeigengröße entspricht.
.ad-container {
min-height: 250px;
}
So bleibt der Platz auch dann erhalten, wenn die Anzeige noch nicht geladen ist oder gar nicht ausgeliefert wird.
Webfonts und das Problem mit FOIT/FOUT
Webfonts verursachen zwei bekannte Rendering-Probleme:
- FOIT (Flash of Invisible Text): Der Text ist zunächst unsichtbar, bis der Font geladen ist.
- FOUT (Flash of Unstyled Text): Der Text erscheint zuerst im Fallback-Font und wechselt dann zum Webfont. Das führt zu einer Verschiebung, wenn die Schriftgrößen unterschiedlich sind.
Die Lösung: font-display: swap in deiner CSS-Font-Deklaration.
@font-face {
font-family: 'MeinFont';
src: url('mein-font.woff2') format('woff2');
font-display: swap;
}
Noch präziser wird es mit der CSS-Eigenschaft size-adjust. Sie passt die Größe des Fallback-Fonts so an, dass er dem Webfont möglichst ähnlich ist, und minimiert so die Verschiebung beim Font-Wechsel:
@font-face {
font-family: 'FallbackFont';
src: local('Arial');
size-adjust: 105%;
}
CLS messen und debuggen: Die besten Tools
Du hast mehrere Möglichkeiten, deinen CLS zu messen. Wichtig ist der Unterschied zwischen Lab-Daten und Felddaten.
Lab-Daten werden in einer kontrollierten Umgebung gemessen, zum Beispiel von Lighthouse in Chrome DevTools oder PageSpeed Insights. Sie sind reproduzierbar, aber spiegeln nicht das echte Nutzerverhalten wider.
Felddaten kommen aus dem echten Einsatz, gesammelt von echten Nutzern über den Chrome User Experience Report (CrUX). Diese Daten fließen in das Google-Ranking ein.
Die wichtigsten Tools im Überblick:
- Google Search Console: Unter Nutzerfreundlichkeit" > „Core Web Vitals" siehst du, welche URLs einen schlechten oder verbesserungswürdigen CLS haben, basierend auf echten Felddaten.
- PageSpeed Insights: Zeigt sowohl Lab- als auch Felddaten für eine einzelne URL.
- Chrome DevTools (Performance-Tab): Ermöglicht detailliertes Debugging einzelner Layout Shifts mit Zeitstempel und betroffenen Elementen.
- Lighthouse: Schneller Lab-Test direkt im Browser, gut für Entwickler während der Implementierung.
- Web Vitals Chrome Extension: Zeigt CLS in Echtzeit beim Browsen an.
Alle diese Tools sind kostenlos nutzbar. Eine Übersicht weiterer kostenloser SEO Tools findest du in unserem Guide.
Best Practices für Entwickler: So verbesserst du den CLS dauerhaft
Hier sind die wichtigsten Maßnahmen, die du direkt umsetzen kannst:
- Immer width und height bei Medien angeben für alle Bilder, Videos und iFrames.
- aspect-ratio in CSS nutzen als moderne Alternative zu fixen Dimensionen bei responsiven Layouts.
- Ad-Container mit min-height reservieren bevor die Anzeige geladen wird.
- font-display: swap für alle Webfonts setzen und size-adjust für Fallback-Fonts nutzen.
- Keine Inhalte über bestehenden Inhalten einfügen außer als Reaktion auf eine Nutzerinteraktion wie einen Klick.
- Animationen nur mit transform und opacity da diese keine Layout Shifts auslösen, weil sie außerhalb des normalen Dokumentflusses laufen.
- Webfonts preloaden mit <link rel="preload"> im <head>, damit der Font früh verfügbar ist.
- Regelmäßige Audits und CLS-Checks als festen Bestandteil deiner Technical SEO Checklist bei jedem neuen Deployment.
Fazit: Bessere UX führt zu höherer Conversion
CLS ist mehr als eine technische Metrik. Eine stabile Seite bedeutet, dass Nutzer sicher auf Buttons klicken können, ohne dass diese im letzten Moment wegspringen. Das reduziert Frustration, senkt die Absprungrate und steigert die Click-Through-Rate direkt.
Wer CLS dauerhaft unter 0,1 hält, sendet Google ein klares Signal: Diese Seite bietet echten Mehrwert für Nutzer. Das zahlt auf Rankings, Sichtbarkeit und letztlich auf den Umsatz ein.
CLS beheben ist kein einmaliges Projekt. Es ist ein kontinuierlicher Prozess, der mit jedem neuen Content-Element, jeder neuen Anzeige und jedem Font-Update neu geprüft werden sollte.
Du willst wissen, wie deine Website bei den Core Web Vitals abschneidet? Unser Team führt professionelle Performance-Audits durch und zeigt dir konkret, wo Optimierungspotenzial liegt. Jetzt Kontakt aufnehmen.
FAQ: Alles zur kumulativen Layoutverschiebung
Was ist ein guter CLS-Wert?
Ein guter CLS-Wert liegt unter 0,1. Alles zwischen 0,1 und 0,25 gilt als verbesserungswürdig, alles über 0,25 als schlecht. Google empfiehlt, den Wert für mindestens 75 % der Seitenaufrufe unter 0,1 zu halten.
Wie wird der CLS berechnet?
Der CLS ergibt sich aus dem Produkt von Impact Fraction (wie viel des Viewports betroffen ist) und Distance Fraction (wie weit sich das Element bewegt). Seit 2021 wertet Google das Maximum aller Session Windows und nicht mehr die Gesamtsumme aller Shifts.
Warum verschiebt sich meine Website beim Laden?
Meistens fehlen Platzhalter für Bilder oder Werbeanzeigen. Wenn der Browser die Dimensionen eines Elements nicht kennt, reserviert er keinen Platz und schiebt beim Laden alles weg. Auch Webfonts und dynamisch nachgeladene Inhalte sind häufige Ursachen.
Hat der CLS Einfluss auf SEO?
Ja. CLS ist Teil der Core Web Vitals und fließt seit dem Google Page Experience Update direkt als Rankingfaktor ein. Schlechte CLS-Werte können Rankings negativ beeinflussen.
Wie behebe ich CLS bei Bildern?
Gib jedem Bild im HTML explizit width und height an. Alternativ nutzt du die CSS-Eigenschaft aspect-ratio, die dem Browser das Seitenverhältnis mitteilt, bevor das Bild geladen ist.
Was sind die häufigsten Ursachen für Layout Shifts?
Die vier häufigsten Ursachen sind: Bilder und Videos ohne Dimensionen, Werbeanzeigen ohne reservierten Container, Webfonts mit FOIT/FOUT-Effekten und dynamisch nachgeladene Inhalte wie Widgets oder Embeds.
Wie messe ich den CLS in der Search Console?
Öffne die Google Search Console und navigiere zu „Verbesserungen" > „Core Web Vitals". Dort siehst du, welche URLs schlechte oder verbesserungswürdige CLS-Werte haben, basierend auf echten Nutzerdaten aus dem CrUX-Datensatz.
Was ist der Unterschied zwischen Lab- und Felddaten?
Lab-Daten (z. B. aus Lighthouse) werden in einer kontrollierten Umgebung gemessen und sind reproduzierbar, aber nicht repräsentativ. Felddaten kommen aus dem Chrome User Experience Report (CrUX) und basieren auf echten Nutzerinteraktionen. Diese Daten fließen in das Google-Ranking ein.
Was bedeutet „Session Window" beim CLS?
Das Session Window gruppiert Layout Shifts in Zeitfenster von maximal 5 Sekunden, mit maximal 1 Sekunde Pause zwischen zwei Shifts. Der finale CLS-Score ist der höchste Wert eines dieser Fenster. Das Update aus 2021 macht die Bewertung fairer, da nicht mehr alle Shifts einer Seite einfach addiert werden.
Wie optimiere ich Webfonts für den CLS?
Nutze font-display: swap in deiner @font-face-Deklaration, damit der Browser sofort einen Fallback-Font anzeigt. Preloade wichtige Fonts mit <link rel="preload"> im <head>. Für minimale Verschiebung beim Font-Wechsel nutze zusätzlich size-adjust, um den Fallback-Font in Größe und Metrik dem Webfont anzupassen.
.avif)
