CLS vermeiden: Cumulative Layout Shift unter 0,1 bringen

Stellen Sie sich vor, ein potenzieller Patient vor Ort öffnet die Website eines Heilpraktikers, möchte den Termin-Button antippen – und im letzten Moment schiebt sich das hochladende Hero-Bild dazwischen. Genau diese Frustration misst Cumulative Layout Shift (CLS). Für Handwerksbetriebe, Pflegedienste, Restaurants und Industriezulieferer in der DACH-Region entscheidet die Layout-Stabilität nicht nur über Conversions, sondern bleibt 2026 auch ein harter Ranking-Faktor in den Core Web Vitals.

• Nur 47% — aller Websites bestehen alle Core Web Vitals (Quelle: NitroPack 2026)
• 23% — mehr Traffic-Verlust bei langsamen Seiten vs. schnellen Konkurrenten (Quelle: Dataslayer Research)
• 0.1 — ist der CLS-Grenzwert für ‘Gut’ (75. Perzentil) (Quelle: Google Search Central)

Was ist CLS?

CLS (Cumulative Layout Shift) misst, wie viel sich sichtbare Elemente während des Seitenladens unerwartet verschieben:

CLS = Summe aller unerwarteten Layout-Verschiebungen

CLS-Bewertung

CLS-Wert	Bewertung
≤ 0.1	Gut (grün)
0.1 - 0.25	Verbesserungsbedürftig (orange)
> 0.25	Schlecht (rot)

Warum ist CLS wichtig?

1. User Experience: Verhindert Fehlklicks
2. Core Web Vitals: Ranking-Faktor seit 2021
3. Conversion: Instabile Seiten konvertieren schlechter
4. Barrierefreiheit: Besonders wichtig für Screenreader-Nutzer

Ranking-Faktor

CLS ist Teil der Core Web Vitals und beeinflusst direkt Ihre Google-Rankings. Ziel: CLS unter 0.1

CLS messen

1. PageSpeed Insights

https://pagespeed.web.dev/

Zeigt CLS für Lab- und Field-Daten.

2. Chrome DevTools

1. DevTools öffnen (F12)
2. Performance-Tab
3. Aufnahme starten und Seite neu laden
4. “Layout Shift”-Einträge suchen

3. Web Vitals Extension

Chrome-Erweiterung zeigt CLS in Echtzeit.

4. Search Console

Core Web Vitals Bericht zeigt betroffene Seiten.

5. JavaScript API

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

Häufige CLS-Ursachen und Lösungen

1. Bilder ohne Dimensionen

Problem:

<!-- SCHLECHT - keine Dimensionen -->
<img src="bild.jpg" alt="Beispiel">

Das Bild lädt nach und schiebt Content nach unten.

Lösung:

<!-- GUT - mit Dimensionen -->
<img src="bild.jpg" alt="Beispiel" width="800" height="600">

<!-- BESSER - mit aspect-ratio -->
<img src="bild.jpg" alt="Beispiel"
 style="aspect-ratio: 4/3; width: 100%; height: auto;">

CSS-Alternative:

.image-container {
 aspect-ratio: 16 / 9;
 background-color: #f0f0f0; /* Placeholder */
}

.image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

2. Videos und Iframes

Problem:

<!-- SCHLECHT -->
<iframe src="https://youtube.com/embed/..."></iframe>

Lösung:

<div class="video-container">
 <iframe src="https://youtube.com/embed/..."
 width="560" height="315"
 loading="lazy"></iframe>
</div>

.video-container {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 height: 0;
 overflow: hidden;
}

.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

3. Web Fonts (FOUT/FOIT)

Problem: Flash of Unstyled Text oder Invisible Text

Lösung 1: font-display

@font-face {
 font-family: 'CustomFont';
 src: url('font.woff2') format('woff2');
 font-display: optional; /* oder: swap */
}

font-display	Verhalten
auto	Browser entscheidet
block	Unsichtbar, dann Custom
swap	System-Font, dann Custom
fallback	Kurz unsichtbar, System wenn zu langsam
optional	Custom nur wenn gecacht

Lösung 2: Preload

<link rel="preload" href="/fonts/font.woff2"
 as="font" type="font/woff2" crossorigin>

Lösung 3: Metriken anpassen

@font-face {
 font-family: 'CustomFont';
 src: url('font.woff2') format('woff2');
 font-display: swap;
 size-adjust: 105%;
 ascent-override: 90%;
 descent-override: 20%;
}

4. Dynamische Werbung (Ads)

Problem: Ads laden nach und schieben Content.

Lösung: Platzhalter reservieren

<div class="ad-container" style="min-height: 250px;">
 <!-- Ad wird hier eingefügt -->
</div>

.ad-container {
 min-height: 250px; /* Standard Ad-Höhe */
 background: #f5f5f5;
 display: flex;
 align-items: center;
 justify-content: center;
}

.ad-container::before {
 content: 'Werbung';
 color: #999;
 font-size: 12px;
}

5. Cookie-Banner und Notifications

Problem: Banner erscheint und schiebt Content.

Lösung: Overlay statt Push

/* SCHLECHT - schiebt Content */
.cookie-banner {
 position: relative;
}

/* GUT - Overlay */
.cookie-banner {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9999;
}

6. Dynamisch eingefügter Content

Problem: Content wird per JavaScript nachgeladen.

Lösung: Platzhalter verwenden

<div class="dynamic-content" style="min-height: 200px;">
 <div class="skeleton-loader"></div>
</div>

.skeleton-loader {
 background: linear-gradient(
 90deg,
 #f0f0f0 25%,
 #e0e0e0 50%,
 #f0f0f0 75%
 );
 background-size: 200% 100%;
 animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

7. Tabs und Akkordeons

Problem: Tab-Inhalt hat unterschiedliche Höhen.

Lösung: Feste Mindesthöhe

.tab-content {
 min-height: 300px; /* Höhe des größten Tabs */
}

Oder: Transform statt Display

/* SCHLECHT */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* GUT - kein Layout Shift */
.tab-panel {
 position: absolute;
 opacity: 0;
 visibility: hidden;
}
.tab-panel.active {
 position: relative;
 opacity: 1;
 visibility: visible;
}

8. Infinite Scroll und “Mehr laden”

Problem: Neuer Content schiebt Footer/Navigation.

Lösung:

// Content über dem Viewport einfügen
function addContent(items) {
 const container = document.querySelector('.content');
 const lastItem = container.lastElementChild;

 items.forEach(item => {
 // Am Ende einfügen, nicht am Anfang
 container.appendChild(item);
 });
}

CLS bei responsiven Layouts

Problem: Unterschiedliche Layouts

/* Mobile */
.sidebar { display: none; }

/* Desktop */
@media (min-width: 768px) {
 .sidebar { display: block; }
}

Lösung: Container-Queries oder CSS clamp()

.content {
 width: clamp(300px, 70%, 800px);
}

Problem: Responsive Bilder mit srcset

<img srcset="small.jpg 400w,
 medium.jpg 800w,
 large.jpg 1200w"
 sizes="(max-width: 400px) 100vw, 800px"
 width="800" height="600"
 alt="Beispiel">

Alle Bilder müssen dasselbe Seitenverhältnis haben!

JavaScript-basierte Lösungen

Resize Observer für dynamische Inhalte

const observer = new ResizeObserver(entries => {
 for (const entry of entries) {
 // Höhe anpassen bevor Layout-Shift passiert
 entry.target.style.minHeight =
 `${entry.contentRect.height}px`;
 }
});

observer.observe(document.querySelector('.dynamic-content'));

IntersectionObserver für Lazy Loading

const imageObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const img = entry.target;
 img.src = img.dataset.src;
 imageObserver.unobserve(img);
 }
 });
}, { rootMargin: '200px' }); // Früh genug laden

document.querySelectorAll('img[data-src]').forEach(img => {
 imageObserver.observe(img);
});

CLS-Debugging Workflow

1. Problem identifizieren

// In der Konsole ausführen
new PerformanceObserver((list) => {
 for (const entry of list.getEntries()) {
 if (!entry.hadRecentInput) {
 console.log('CLS Entry:', entry);
 console.log('Element:', entry.sources);
 }
 }
}).observe({ type: 'layout-shift', buffered: true });

2. Element finden

Die sources-Property zeigt das verschiebende Element:

entry.sources.forEach(source => {
 console.log('Node:', source.node);
 console.log('Previous Rect:', source.previousRect);
 console.log('Current Rect:', source.currentRect);
});

3. Ursache beheben

Element	Typische Ursache	Lösung
<img>	Keine Dimensionen	width/height setzen
<iframe>	Keine Dimensionen	Container mit aspect-ratio
Text	Font-Loading	font-display: optional
Div	Dynamischer Content	min-height setzen
Banner	Push statt Overlay	position: fixed

CLS optimieren: Checkliste

Bilder & Medien

• Alle Bilder haben width und height
• Videos haben Container mit aspect-ratio
• Lazy-loaded Bilder haben Platzhalter

Fonts

• font-display: swap oder optional
• Critical Fonts preloaded
• Fallback-Fonts mit ähnlichen Metriken

Dynamischer Content

• Ads haben reservierten Platz
• Lazy-loaded Content hat min-height
• Skeleton-Loader für async Content

Layout

• Banner/Modals als Overlay
• Tabs mit fester Mindesthöhe
• Kein Content über viewport eingefügt

Testing

• PageSpeed Insights zeigt grünes CLS
• Search Console ohne CLS-Warnungen
• Real User Monitoring implementiert

Fortgeschrittene Techniken

CSS contain

.widget {
 contain: layout; /* Isoliert Layout-Berechnungen */
}

content-visibility

.offscreen-section {
 content-visibility: auto;
 contain-intrinsic-size: 0 500px; /* Geschätzte Höhe */
}

Will-change (sparsam verwenden)

.animated-element {
 will-change: transform;
}

Fazit

CLS-Optimierung ist kein Marketing-Trick, sondern handwerkliches Frontend. Für mittelständische Mandanten in der Beispielregion, einer Beispielregion und Dessau-Roßlau zahlt sich saubere Layout-Stabilität gleich dreifach aus: bessere Rankings durch grüne Core Web Vitals, höhere Conversion-Raten bei Anfrageformularen und weniger Frustration in der konversionskritischen Phase zwischen Klick und Lead.

Lesen Sie ergänzend unsere Beiträge zu Largest Contentful Paint optimieren und Bildoptimierung mit WebP und AVIF.

---

FAQ

Warum ist mein CLS auf Desktop gut, aber Mobile schlecht?

Unterschiedliche Layouts, Viewport-Größen und Ladezeiten. Fonts und Bilder können sich auf Mobile anders verhalten. Testen Sie beide Versionen separat.

Zählen animierte Elemente zum CLS?

Nur wenn sie andere Elemente verschieben. CSS-Transforms (translate, scale) verursachen keinen Layout Shift. Änderungen an width/height/margin schon.

Wie finde ich heraus, welches Element den Shift verursacht?

Chrome DevTools > Performance > Layout Shift Einträge anklicken. Oder die JavaScript Performance API nutzen, um sources zu identifizieren.

Ist CLS wichtiger als LCP oder INP?

Alle drei Core Web Vitals sind gleichwertig. Seit März 2024 hat INP (Interaction to Next Paint) den alten FID-Wert ersetzt und misst die Interaktivität strenger. CLS betrifft aber die gesamte Nutzersession, nicht nur den Ladevorgang - daher besonders relevant für die User Experience. Für optimale Rankings sollten alle drei Metriken im grünen Bereich liegen: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1.