CLS = 0 — Layout Shifts dauerhaft verhindern

Was ist CLS?

CLS (Cumulative Layout Shift) misst, wie stark sich sichtbare Elemente während des Ladens unerwartet verschieben. Google's Ziel: unter 0,1. mekyn hat 0.

Warum CLS der heimtückischste Core Web Vital ist

Anders als LCP oder INP ist CLS kein reiner Performance-Wert — er ist ein UX-Wert. Ein CLS von 0,3 bedeutet: Der Nutzer will auf „Jetzt kaufen” klicken und in dem Moment verschiebt sich die Seite, er klickt auf „Abmelden”. Das passiert täglich millionenfach im Web und kostet echtes Geld.

Google hat CLS 2021 eingeführt und 2024 verschärft: Seitdem zählen Layout-Shifts über die gesamte Lebensdauer der Seite, nicht nur während des Ladens. Ein Chat-Widget, das nach 30 Sekunden aufpoppt und den Inhalt verschiebt, zählt genauso wie ein Bild, das beim initialen Laden springt.

Hebel 1: Bilder mit reserviertem Raum

Der häufigste CLS-Verursacher ist ein Bild, das ohne Dimensionen geladen wird. Der Browser weiß nicht, wie groß das Bild wird, reserviert 0 × 0 Pixel, und sobald das Bild geladen ist, springt der gesamte nachfolgende Inhalt.

Die Lösung ist einfach, aber viele machen es falsch:

<!-- Falsch — verursacht Layout Shift -->
<img src="hero.jpg" alt="Hero" />

<!-- Richtig — Browser reserviert Platz -->
<img src="hero.jpg" alt="Hero" width="1200" height="630" />

Mit Astro-Image oder dem nativen <Image />-Component ist das automatisch korrekt. Wir nutzen für statische Marketing-Pages einfache <img>-Tags mit expliziten Dimensionen plus Tailwind-Utility-Klassen für responsive Größen.

Bonus: aspect-ratio per CSS als zusätzliche Absicherung:

img {
  aspect-ratio: attr(width) / attr(height);
  max-width: 100%;
  height: auto;
}

So bleibt das Seitenverhältnis auch bei max-width: 100% stabil.

Hebel 2: Fonts ohne FOIT/FOUT- Sprünge

Wenn ein Web-Font geladen wird, nachdem der Text bereits mit einer Fallback-Schrift gerendert wurde, kann die andere Metrik des Fonts zu einer Verschiebung führen. Der Text ändert Höhe oder Breite.

Unsere Lösung: font-display: swap in Kombination mit size-adjust in @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

size-adjust skaliert die Fallback-Schrift auf die ungefähre Größe der Web-Schrift, sodass der Austausch ohne sichtbare Verschiebung stattfindet. Das Feature wird von allen modernen Browsern unterstützt.

Hebel 3: Reservierte Container für dynamische Inhalte

Cookie-Banner, Newsletter-Popups, „Melde dich an”-Banner — sie alle erscheinen verzögert und schieben den Inhalt. Der Fix: Ein Container mit fester height und min-height reserviert den Platz bereits im initialen HTML:

<div id="cookie-banner-container" style="min-height: 80px">
  <!-- Cookie-Banner wird hier per JS injiziert -->
</div>

Auf mekyn.com haben wir aktuell kein Cookie-Banner, weil wir cookieless Analytics nutzen. Sollte eines nötig werden, wird es mit reserviertem Container implementiert.

Hebel 4: Third-Party-Widgets bändigen

Chat-Widgets (Intercom, Crisp), Review-Embeds (Trustpilot, OMR) und Social-Feeds (Instagram, LinkedIn) sind die schlimmsten CLS-Sünder. Sie werden asynchron geladen, haben unbekannte Höhe und schieben den Footer meterweise nach unten.

Unsere Regel für Third-Party-Einbindungen:

• Wenn ein Widget interaktiv und für Conversion wichtig ist: Container mit min-height: 400px reservieren.
• Wenn ein Widget rein dekorativ ist: Nicht einbinden. Jedes externe Script ist ein potenzielles CLS-Risiko.
• Wenn ein Widget einen Feed lädt: Lazy-Loading mit IntersectionObserver und Skeleton-State.

Hebel 5: Client-seitig gerenderte Komponenten

React-Komponenten, die mit client:load oder client:visible hydriert werden, haben einen Moment, in dem der Server-HTML durch den Client-HTML ersetzt wird. Wenn die Struktur unterschiedlich ist, entsteht ein Layout Shift.

Unsere Lösung mit Astro: React-Inseln werden nur für tatsächlich interaktive Bereiche genutzt (Generator-UI, Dashboard). Marketing-Pages sind zu 100 % statisches HTML ohne Hydration.

Für Teams, die React/Next.js nutzen: Suspense-Boundaries mit festen min-height-Fallbacks setzen:

<Suspense fallback={<div style={{ minHeight: 200 }} />}>
  <DynamicComponent />
</Suspense>

Weiterführend auf mekyn.com

→ Zur Pillar-Page: Seo → Verwandt: Lighthouse Score 100 → Verwandt: Lcp Unter 2 Sekunden → Tool: Kontrast Rechner

---

Externe Quellen:

• Web Dev — CLS — Google’s CLS-Dokumentation
• CSS size-adjust — MDN-Referenz
• Layout Shift Debugging in DevTools — Chrome-DevTools-Guide