CLS senken: Layout-Sprünge sicher vermeiden

Woher kommt CLS?

Der Cumulative Layout Shift (CLS) entsteht, wenn sich Elemente einer Seite nach dem ersten Rendern unerwartet verschieben. Ein Bild, das erst nach dem Text lädt, schiebt den Text nach unten. Ein Werbebanner, das plötzlich auftaucht, verdeckt den Inhalt. Eine Schrift, die spät lädt, bricht den gesamten Text um.

Für Google ist das ein starkes Negativsignal: Die Seite wirkt instabil, Besucher tippen daneben und verlieren die Orientierung. Der Zielwert liegt bei unter 0,1 – alles darüber bedeutet spürbare Layout-Sprünge, die auch deinen VitoScore in der Kategorie Performance belasten.

Die häufigsten Auslöser

• Bilder ohne Breiten- und Höhenangaben
• Werbung und Embeds ohne reservierten Platz
• spät geladene Widgets, Bots und Banner
• Web-Fonts, die FOIT oder FOUT verursachen
• dynamische Inhalte, die in bestehende Bereiche eingefügt werden

Wie entsteht der CLS-Wert?

Google summiert alle unerwarteten Verschiebungen innerhalb eines Zeitfensters auf. Dabei zählt jede Bewegung eines sichtbaren Elements: Je weiter ein Element wandert und je größer es ist, desto stärker schlägt es zu Buche. Mehrere kleine Shifts können sich deshalb zu einem auffälligen Wert addieren – ein einzelner Sprung ist selten das Ende der Geschichte.

Der Wert ist ein Verhältnis: Ein CLS von 0,1 bedeutet, dass sich insgesamt zehn Prozent der sichtbaren Fläche unerwartet verschoben haben. Bleibt die Seite dagegen über die gesamte Nutzung stabil, bleibt der Wert bei null – genau das weist auch der VitoScore als Ziel aus.

Maßnahme 1: width und height immer angeben

Der einfachste Fix: Jedes Bild bekommt seine echten Maße. Der Browser reserviert den Platz, bevor das Bild geladen ist – der Text bleibt stehen.

<img src="/img/og-image.webp" width="700" height="370" alt="Beispiel">

width und height IMMER angeben – auch bei responsiven Bildern. Der Browser skaliert sie von selbst passend.

Maßnahme 2: Der Trick mit aspect-ratio

Für Bilder, deren Breite flexibel ist, löst aspect-ratio das Problem elegant: Das Seitenverhältnis bleibt fix, egal wie breit der Container wird.

.card {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Damit bleibt der Platz reserviert – der Warnhinweis im VitoScore verschwindet. Alle relevanten Browser unterstützen aspect-ratio inzwischen nativ; für sehr alte Browser lohnt ein Fallback mit dem klassischen Padding-Trick.

Maßnahme 3: Platz für Werbung und Embeds reservieren

Werbebanner, YouTube-Videos und Social-Embeds laden fast immer später als der umgebende Text. Reserviere deshalb feste Container mit Mindesthöhe oder eine stabile Platzhalterfläche:

.ad-slot {
  min-height: 250px;
  background: #f1f5f9;
}

Wichtig: Der Platzhalter sollte direkt in der endgültigen Größe erscheinen und nicht erst hineinwachsen. Jede Größenänderung nach dem Rendern erzeugt genau den Shift, den du vermeiden willst.

Maßnahme 4: Web-Fonts richtig einbinden

Web-Fonts verursachen zwei klassische Probleme: FOIT (Text bleibt unsichtbar, bis die Schrift da ist) und FOUT (Text springt nach dem Laden um). Beides verwirrt Besucher und erhöht den CLS. Bewährte Lösungen:

• font-display: swap für alle Schriftdateien aktivieren
• nur die tatsächlich genutzten Schriftstärken laden
• systemnahe Fallback-Schriften wählen, damit der Umbruch minimal bleibt

Wenn du Schriften von Google Fonts lädst, nutze am besten den Self-Hosting-Weg: Die Dateien liegen dann auf deinem Server, laden schneller und unterliegen nicht den Schwankungen externer CDNs.

Maßnahme 5: Dynamische Inhalte kontrollieren

Lädt deine Seite Inhalte nach – zum Beispiel Lazy-Loading-Galerien oder Infinite Scroll –, halte dafür feste Bereiche frei. Jede Änderung, die vorhandenen Inhalt verschiebt, erzeugt einen Layout-Shift. Das gilt auch für Benachrichtigungs-Banner, Cookie-Hinweise oder Live-Elemente, die sich nachträglich in den Layout-Fluss einfügen.

Maßnahme 6: Animationen kontrollieren

Auch CSS-Animationen können Layout-Shifts verursachen, wenn sie Breiten, Höhen oder Abstände animieren. Bevorzuge dafür transform und opacity – sie laufen auf der GPU und verschieben nichts im Layout-Fluss. Ein einfacher Grundsatz: Alles, was sich bewegt, sollte über transform animiert werden statt über top, left oder margin.

.card:hover {
  transform: translateY(-4px); /* statt margin-top */
}

CLS in deinem VitoScore-Bericht erkennen

Öffne den Report unter /results und sieh dir die Performance-Kategorie an. Ein roter oder gelber CLS-Wert bedeutet: Es gibt messbare Layout-Verschiebungen. Der Detailbericht zeigt dir, welche Bilder oder Widgets den Shift verursachen – dort beginnst du am besten mit dem Fix.

So prüfst du deinen Fortschritt

1. Miss die Seite vor der Änderung mit dem kostenlosen VitoScore-Check.
2. Setze die Maßnahmen aus diesem Artikel um.
3. Miss erneut und vergleiche den CLS-Wert.

Wiederhole die Messung am besten mehrfach zu unterschiedlichen Tageszeiten, denn Drittanbieter-Inhalte schwanken. Ein stabiler Wert unter 0,1 über mehrere Messungen bedeutet: Deine Seite bleibt zuverlässig stehen.

Bonus-Tipp: Prüfe auch deine Unterseiten, nicht nur die Startseite. Gerade Blog-Artikel mit vielen Bildern, Formulare oder Produktseiten mit Widgets verursachen oft Shifts, die im Haupttest gar nicht auffallen. Wer alle relevanten Templates einmal durchmisst, findet die letzten versteckten Auslöser.

Fazit

Layout-Sprünge sind kein Schicksal, sondern das Ergebnis konkreter, vermeidbarer Ursachen. Mit width und height, aspect-ratio und reservierten Plätzen für spät ladende Inhalte bringst du deine Seite unter den Zielwert – und verbesserst damit spürbar das Erlebnis deiner Besucher.

Mehr Grundlagen findest du in unserem Artikel Core Web Vitals im Detail, in unserem Ratgeber INP verbessern: Interaction to Next Paint verstehen und in der Kategorie Praxis-Tipps.