Was ist CLS?
Du kennst das: Du willst auf einer Nachrichtenseite einen Artikel anklicken, im letzten Moment lädt oben ein Werbebanner nach, alles rutscht nach unten — und plötzlich klickst du auf eine Rasenmäher-Anzeige. Genau das misst CLS: die Summe aller visuellen Ruckler während des Ladens.
CLS gehört zu den drei Core Web Vitals und ist der einzige Wert, der als dimensionslose Zahl statt in Sekunden angegeben wird. Die Formel kombiniert, wie viel Fläche sich bewegt (impact fraction) und wie weit (distance fraction). Ein Wert von 0,15 bedeutet: Rund 15 Prozent der sichtbaren Fläche haben sich verschoben — schon spürbar unangenehm.
Wichtig: CLS misst nur "unerwartete" Layout-Shifts. Wenn der Nutzer selbst etwas auslöst — Klick auf "Mehr lesen" — zählt das nicht.
Wie wird CLS gemessen?
Der Browser beobachtet während des Ladens jede Bewegung von Elementen im Viewport und summiert die schlimmsten Sessions zu einem finalen Wert. Seit einer Weile wird nur noch das schlechteste 5-Sekunden-Fenster berücksichtigt, nicht mehr die gesamte Session — sonst hatten lange Seiten automatisch schlechtere Werte als kurze.
Die Bewertung von Google:
| Bewertung | CLS-Wert |
|---|---|
| Gut | unter 0,1 |
| Verbesserungsbedürftig | 0,1 bis 0,25 |
| Schlecht | über 0,25 |
Testen kannst du CLS lokal mit Lighthouse oder PageSpeed Insights — aber die realen Werte siehst du nur in den Felddaten, zum Beispiel in der Google Search Console unter "Core Web Vitals". Der Unterschied zwischen Labor und Feld ist bei CLS besonders groß, weil dynamische Inhalte wie Cookie-Banner oder lazy geladene Werbung sich im Labor oft gar nicht zeigen.
Warum ist CLS für deine Website wichtig?
Springende Layouts sind die nervigste Form von Web-Frustration. Nutzer assoziieren Layout-Shifts mit Unprofessionalität, Ladehängern und Vertrauensverlust. Wenn dein Angebot-Button zweimal hin und her hüpft, bevor du ihn anklicken kannst, wirkt die ganze Seite billig.
Aus SEO-Sicht kostet schlechtes CLS Rankings — Google belohnt stabile Seiten. Aus Conversion-Sicht ist der Schaden noch größer: Ein Shop, in dem der "In den Warenkorb"-Button beim Laden versetzt wird, verliert Kunden, die genervt abspringen.
Reales Beispiel: Eine Immobilien-Website mit 18 unbeschrifteten width und height): CLS 0,03, Bounce Rate 39 Prozent.
Häufige Ursachen für schlechtes CLS
Bilder ohne Breite und Höhe. Der Klassiker. Ohne Angabe im HTML weiß der Browser nicht, wie viel Platz er reservieren soll — und schiebt alles nach, sobald das Bild da ist. Lösung: IMMER width und height setzen, auch wenn das Bild responsive ist.
Werbung, die nachträglich eingeblendet wird. Adsense und andere Banner reservieren selten von sich aus Platz. Lösung: Einen Container mit fester Mindesthöhe definieren, bevor der Ad-Slot befüllt wird.
Web Fonts, die umfließen. Wenn eine Schriftart geladen wird und dabei Zeichenabstände ändern, verschieben sich Textblöcke. Zwei klassische Stolperfallen haben eigene Namen: FOUT (Flash of Unstyled Text) zeigt erst den Fallback-Font und tauscht dann zur Web-Schrift — der Text springt. FOIT (Flash of Invisible Text) versteckt den Text komplett, bis der Web Font da ist — nichts springt, aber der Nutzer starrt auf Leerraum, und FOIT killt zusätzlich den LCP, wenn das LCP-Element Text ist. Lösung: font-display: optional oder size-adjust im @font-face, plus systemnahe Fallback-Fonts. Mehr in Typografie.
Dynamische Inhalte, die oben eingefügt werden. "Neuer Kommentar", "Cookie-Banner", "Benachrichtigung" — alles, was oberhalb des Viewports reinkommt, schiebt den Inhalt nach unten. Lösung: Solche Elemente fest einplanen oder als Overlay bauen, nicht als eingeschobenes Block-Element.
iframes ohne Größenangabe. Eingebettete YouTube-Videos, Google Maps, Formulare. Feste width und height setzen oder mit einem Aspect-Ratio-Container arbeiten.
CLS-Fix in der Praxis
<!-- Schlecht: Browser reserviert keinen Platz -->
<img src="hero.jpg" alt="Teammeeting">
<!-- Gut: Browser kennt die Dimensionen vorab -->
<img src="hero.jpg" width="1600" height="900" alt="Teammeeting">
<!-- Noch besser: responsive mit fester Aspect Ratio -->
<img src="hero.jpg"
srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 800px) 100vw, 1600px"
width="1600" height="900"
alt="Teammeeting">Die Werte width und height müssen nicht den tatsächlichen Pixelmaßen entsprechen — sie definieren das Seitenverhältnis, aus dem der Browser den reservierten Platz errechnet. In Kombination mit max-width: 100% im CSS bleibt das Bild trotzdem responsive.
Für Container ohne echte Bilder — etwa lazy-geladene iframes oder dynamische Komponenten — gibt es die moderne CSS-Property aspect-ratio. Ein einziger Eintrag reserviert den Platz, noch bevor Inhalt da ist:
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}Das funktioniert in allen aktuellen Browsern und ist die sauberste Lösung für Platzhalter, Card-Thumbnails, Map-Einbettungen oder Werbeflächen. Wer noch mit Padding-Top-Hacks arbeitet, lebt in der Vergangenheit.