Cumulative Layout Shift (CLS)

Was diese Prüfung macht

Liest den CLS aus PageSpeed Insights. CLS ist ein einheitenloser Score — die kumulierte Summe aller unerwarteten Layout-Verschiebungen während des Seitenaufbaus, gewichtet danach, wie viel vom Viewport sich bewegt hat und wie weit.

CLS-Wert	Verdikt
≤ 0,1	Gut
0,1–0,25	Verbesserungswürdig
> 0,25	Schlecht

Warum es wichtig ist

Eine springende Seite ist eine frustrierende Seite. Du klickst einen Button, die Seite verschiebt sich, du klickst auf etwas Falsches. Du liest einen Absatz, eine Anzeige lädt, der Absatz rutscht weg. Layout-Shifts gehören zu den Metriken mit der höchsten Korrelation zur Absprungrate.

CLS ist neben LCP und INP das dritte Core Web Vital. Es ist auch das am leichtesten zu fixende, sobald du die schuldigen Elemente gefunden hast — die meisten CLS-Probleme kommen von einer Handvoll spezifischer Muster.

Wie du es behebst

1. Reserviere Platz für Bilder und Embeds. Setze immer width- und height-Attribute (oder aspect-ratio in CSS):

<img src="/hero.webp" width="1200" height="600" alt="..." />

Der Browser reserviert die Box, bevor das Bild lädt. Ohne das taucht das Bild auf und der Text darunter rutscht nach unten.

2. Reserviere Platz für Werbung. Wenn du AdSense oder Ähnliches einsetzt, setze eine Mindesthöhe auf den Anzeigen-Container, die zur häufigsten Anzeigengröße passt:

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

3. Vermeide spät ladende Webfonts. Nutze font-display: swap (Text wird zuerst in der Fallback-Schrift gerendert und wechselt, wenn der Webfont eintrifft — geringer CLS) oder font-display: optional (kein Wechsel; besserer CLS, schlechteres Branding). Selbst gehostete woff2 mit preload minimieren das Swap-Fenster.

4. Schiebe keinen Inhalt über bestehenden Inhalt. Cookie-Banner, „Abonnieren”-Prompts und „Du hast eine neue Benachrichtigung”-Toasts, die die Seite nach unten drücken = garantierter CLS. Positioniere sie als Overlays (position: fixed).

5. Nutze CSS-Transforms für Animationen, nicht top/left. transform: translateY() löst keine Layout-Shifts aus. top zu animieren schon.

Häufig gestellte Fragen

Wie wird CLS gescort?

Der Score ist das schlechteste 5-Sekunden-Fenster mit Layout-Shifts während der Sitzung, nicht die Summe der gesamten Sitzung. Google hat das 2021 angepasst, damit lange Seiten nicht unverhältnismäßig benachteiligt werden.

Was ist mit benutzerinitiierten Verschiebungen?

Klicks, Taps und Formularübermittlungen, die Layout-Änderungen auslösen, werden 500 ms nach der Interaktion vom CLS ausgeschlossen. Das Ausklappen eines Akkordeons zählt also nicht — nur „Überraschungs”-Verschiebungen.

Warum springt mein CLS auf Mobile, aber nicht auf Desktop?

Mobile-Viewports sind schmaler, also ist eine Verschiebung von N Pixeln ein größerer Anteil am Bildschirm. Selbe Ursache, größere Strafe. Teste immer im Mobile-Profil in PageSpeed.