Was ist CLS?

CLS (Cumulative Layout Shift) misst unerwartete Inhaltsverschiebungen. Wenn der Text, den Sie gerade lesen, nach unten rutscht, weil darüber eine Anzeige lädt, oder eine Schaltfläche genau in dem Moment springt, in dem Sie darauf tippen, ist der CLS-Wert hoch. Es handelt sich um einen einheitenlosen Wert, der aus der Größe des sich verschiebenden Bereichs und der Distanz der Verschiebung berechnet wird.

#Warum es wichtig ist

• Eine unruhige Seite führt zu Fehlklicks, dem Verlust der Leseposition und einem Gefühl von Misstrauen.
• CLS ist eine der drei Core Web Vitals.
• Das Problem lässt sich meist leicht beheben: Das Reservieren von Platz reicht oft schon aus.
• Verschiebungen direkt nach einer Benutzerinteraktion (innerhalb von etwa 500 ms), wie z. B. das Nach-unten-Rutschen von Inhalten beim Öffnen eines Menüs, zählen nicht. Nur unerwartete Verschiebungen erhöhen den Wert.

#Wo Sie es in SEOAsist sehen

• Die Karte Core Web Vitals auf der Seite Übersicht zeigt den CLS getrennt für Mobil- und Desktop-Geräte an.
• Die SEO-Analyse meldet das Ergebnis Layout-Verschiebung, wenn der mobile CLS den Wert 0,1 überschreitet; die Empfehlung lautet dann, Bildabmessungen und spät ladende Blöcke zu korrigieren.

Mehr erfahren: Dashboard-Übersicht.

#Beispiel

<!-- No dimensions: pushes everything below it when it loads -->
<img src="/img/product.webp" alt="Oak table">

<!-- With dimensions: the browser reserves the space up front -->
<img src="/img/product.webp" alt="Oak table" width="800" height="600">

<!-- Reserve a fixed height for a late banner -->
<div style="min-height:90px"><!-- campaign banner --></div>

#Häufige Fehler

• Fehlen von width/height (oder aspect-ratio) bei Bildern und Videos.
• Einfügen eines Cookie-Hinweises oder Promo-Banners oberhalb des Inhalts nach dem Laden; nutzen Sie stattdessen ein Overlay von unten.
• Starke Größenänderung von Text beim Laden einer Web-Schriftart; wählen Sie eine Fallback-Schriftart mit ähnlichen Abmessungen.
• Die Suche nach Verschiebungen nur beim ersten Laden; auch Inhalte, die erst beim Scrollen nachgeladen werden, erhöhen den CLS.