CLS optimieren: Visuelle Stabilität von Webseiten verbessern
Der Cumulative Layout Shift (CLS) ist ein wichtiges Core Web Vital von Google, das die visuelle Stabilität einer Webseite misst. Ein hoher CLS-Wert bedeutet, dass sich Inhalte während des Ladevorgangs unvorhersehbar bewegen. Dies führt zu einer schlechten Nutzererfahrung: Text springt beim Lesen weg, oder Benutzer klicken versehentlich auf falsche Links, weil sich das Layout im Moment des Klicks verschiebt. Ein CLS-Wert von unter 0.1 gilt als optimal.
CLS ist neben LCP und INP eine der drei Core Web Vitals und damit ein offizieller Ranking-Faktor. Während LCP die Ladegeschwindigkeit und INP die Reaktionsfähigkeit misst, steht CLS für die visuelle Ruhe einer Seite – eine Disziplin, die sich oft mit wenig Aufwand auf nahezu null senken lässt.
Die häufigsten Ursachen für Layout-Shifts
Unerwartete Verschiebungen entstehen fast immer durch verzögert geladene Ressourcen, für die der Browser vorab keinen Platz reserviert hat:
1. Bilder ohne Grössenangaben
Fehlen im HTML-Code die Attribute width und height auf <img>-Tags, reserviert der Browser keinen Platz für das Bild. Er stellt das Bild erst dar, wenn es komplett geladen ist. Das drückt den Text darunter abrupt nach unten.
2. Dynamisch eingefügte Inhalte und Banner
Nachträglich geladene Banner (z. B. Cookie-Zustimmungsboxen, Newsletter-Anmeldungen oder Sonderangebots-Leisten), die sich über oder zwischen den bereits gerenderten Text schieben.
3. Spät geladene Werbeanzeigen
Werbeanzeigen (Ads) werden meist über externe Skripte asynchron geladen. Kennt das System die Höhe der Anzeige vorab nicht, springt das gesamte Layout, sobald die Anzeige erscheint.
4. Schriftarten (FOUT / FOIT)
Laden benutzerdefinierte Webfonts (Web Fonts) verzögert nach, kann dies zu zwei Problemen führen:
- FOUT (Flash of Unstyled Text): Der Text wird erst in einer Systemschriftart dargestellt und springt bei der Aktivierung der Webfont um, da diese andere Zeichenabstände besitzt.
- FOIT (Flash of Invisible Text): Der Text ist zunächst unsichtbar und erscheint erst, wenn die Webfont geladen ist.
Ursachen und Gegenmassnahmen im Überblick
Die folgende Tabelle ordnet die häufigsten Auslöser ihren konkreten Lösungen zu:
| Ursache | Wirkung | Gegenmassnahme |
|---|---|---|
<img> ohne width/height | Text springt nach Bildladen | feste Mase oder aspect-ratio |
| Dynamische Banner/Cookie-Box | Inhalt wird verschoben | Platzhalter mit min-height |
| Späte Werbeanzeigen | gesamtes Layout springt | Slot-Höhe reservieren |
| Webfont-Austausch (FOUT) | Text-Reflow | font-display: swap + Preload |
| Injizierte UI über dem Fold | alles rutscht nach unten | Platz unterhalb des Folds einplanen |
Best Practices zur CLS-Optimierung
Grössenangaben für alle Medien erzwingen
Geben Sie bei jedem Bild- und Video-Tag immer explizit width und height an.
- Beispiel:
<img src="image.jpg" width="600" height="400" alt="Beschreibung"> - Moderne Browser nutzen diese Angaben, um das Seitenverhältnis (Aspect Ratio) zu berechnen. Sie reservieren den Platz im Layout bereits, bevor die Bilddatei geladen wird. Die Seite bleibt stabil.
Platzhalter für dynamische Inhalte erstellen
Wenn Sie Anzeigen oder Widgets asynchron laden, umschliessen Sie diese im HTML mit einem Container, der eine feste Mindesthöhe (z. B. via CSS min-height) besitzt. Laden die Daten nach, bleibt die Seite ruhig.
Schriftarten-Loading optimieren
- Nutzen Sie in Ihren
@font-faceCSS-Deklarationen die Eigenschaftfont-display: swap. Dies zwingt den Browser, sofort eine Systemschrift anzuzeigen und diese nachzuladen, ohne den Text unsichtbar zu machen. - Laden Sie die wichtigsten Webfonts-Dateien (woff2) im
<head>vorab (Preload):<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Weitere Details dazu finden Sie im Beitrag zur Schriftarten-Optimierung.
Vorher/Nachher: Ein Produktbild stabilisieren
Ein Online-Shop lädt grosse Produktbilder ohne Grössenangaben. Beim Nachladen springt der Bestellbutton nach unten – Nutzer klicken versehentlich daneben.
- Vorher:
<img src="produkt.jpg" alt="Produkt">→ gemessener CLS 0.34 (schlecht). - Nachher:
<img src="produkt.jpg" width="800" height="600" alt="Produkt">→ der Browser reserviert den Platz vorab, gemessener CLS 0.02 (gut).
Die einzige Änderung – zwei Attribute – senkt den Wert unter die Schwelle. Eine korrekte Bildoptimierung wirkt damit doppelt: schnellere Ladezeit und stabileres Layout.
[!TIP] Ein CLS-Wert von 0.0 sollte das Ziel jeder professionellen Website sein. Prüfen Sie, ob Ihre Website visuelle Instabilitäten aufweist, mit dem PageSpeed Check auf balou.tools.
Häufig gestellte Fragen (FAQ)
Wie berechnet sich der CLS-Wert?
Der CLS-Wert ist ein mathematischer Score. Er berechnet sich aus der betroffenen Fläche auf dem Bildschirm (Impact Fraction) multipliziert mit der Distanz, um die sich das Element verschoben hat (Distance Fraction).
Warum verschieben sich Elemente überhaupt beim Laden?
Das passiert, wenn der Browser den Platzbedarf eines Elements (z. B. eines Bildes oder Werbebanners) beim Aufbau des HTML-Gerüsts noch nicht kennt, weil die Grössenangaben fehlen. Sobald die Datei heruntergeladen ist, drückt sie den Text darunter abrupt nach unten.
Welcher CLS-Wert gilt als gut, verbesserungswürdig oder schlecht?
Google bewertet einen CLS unter 0.1 als „gut“, Werte zwischen 0.1 und 0.25 als „verbesserungswürdig“ und Werte über 0.25 als „schlecht“. Massgeblich ist das 75. Perzentil der realen Nutzerdaten (Felddaten), nicht nur ein einzelner Labortest.
Zählen Layout-Shifts durch Nutzerinteraktion auch zum CLS?
Nein. Verschiebungen, die innerhalb von 500 Millisekunden nach einer bewussten Nutzerinteraktion (Klick, Tastendruck) erfolgen, gelten als erwartet und werden nicht gewertet. Nur unerwartete, vom Nutzer nicht ausgelöste Verschiebungen fliessen in den CLS-Score ein.