Begriff

agent readableMarkdown

CLS erklärt: Cumulative Layout Shift vermeiden — Glossar

Direkte Antwort

CLS: CLS (Cumulative Layout Shift) misst, wie stark sichtbare Inhalte beim Laden oder Bedienen einer Seite unerwartet verrutschen. Ein Wert bis 0,1 im 75. Perzentil gilt als gut, über 0,25 als schlecht. Du hältst ihn niedrig, indem du für Bilder, Einbettungen, Schriften und Banner von Anfang an Platz reservierst.

Wichtigste Punkte

  • CLS multipliziert den betroffenen Anteil des Sichtfensters mit der Verschiebedistanz und summiert Sprünge im schlimmsten Zeitfenster.
  • Schwellen: bis 0,1 gut, bis 0,25 verbesserungswürdig, darüber schlecht.
  • Immer Breite und Höhe oder aspect-ratio für Medien setzen; Banner nicht nachträglich einschieben.
  • Stabilität schützt Klicks und Vertrauen — besonders auf dem Smartphone, Teil der Core Web Vitals.

— Steve Baka

Aktualisiert: · Autor: Steve Baka

Was ist CLS?

Cumulative Layout Shift beschreibt, wie ruhig eine Seite beim Laden bleibt. Jedes Mal, wenn ein sichtbares Element ohne Nutzeraktion seine Position ändert, entsteht ein Layout-Shift. Du kennst das: Du willst einen Link antippen, im selben Moment lädt ein Bild darüber nach, der Text rutscht nach unten, und du triffst eine Anzeige oder den falschen Button.

CLS ist neben LCP (Ladegeschwindigkeit des größten Elements) und INP (Reaktionszeit auf Eingaben) die dritte Kennzahl der Core Web Vitals. Anders als die beiden anderen wird sie nicht in Sekunden gemessen, sondern als dimensionslose Zahl.

Wie wird CLS berechnet?

Jeder einzelne Sprung erhält einen Wert aus zwei Faktoren: dem Impact Fraction, also dem Anteil des Sichtfensters, den die betroffenen Elemente vor und nach der Verschiebung abdecken, und der Distance Fraction, also dem größten Verschiebeweg im Verhältnis zur Fenstergröße. Beide werden multipliziert. Ein Element, das die Hälfte des Fensters einnimmt und um ein Viertel der Fensterhöhe springt, ergibt 0,5 × 0,25 = 0,125.

Mehrere Sprünge werden zu Sitzungsfenstern gruppiert: höchstens fünf Sekunden lang, mit weniger als einer Sekunde Pause zwischen den Sprüngen. Das Fenster mit der höchsten Summe bestimmt den Messwert der Seite. Verschiebungen innerhalb von 500 Millisekunden nach einer Nutzereingabe wie einem Klick zählen nicht, weil sie als erwartet gelten.

Bewertet wird im 75. Perzentil echter Besuche, getrennt nach Mobil und Desktop. Laborwerte aus einem Test sind hilfreich zur Fehlersuche, aber nicht maßgeblich.

Was verursacht Layout-Sprünge?

  • Bilder ohne Maße: Der Browser kennt die Höhe erst nach dem Laden und schiebt Text nach unten.
  • Nachladende Schriften: Der Wechsel von Fallback- zu Webfont verändert Zeilenumbrüche und Höhen.
  • Einbettungen und Anzeigen: iframes, Karten, Videos oder Werbeflächen ohne reservierte Fläche.
  • Cookie- und Consent-Banner: Werden sie oberhalb des Inhalts eingeblendet, schieben sie alles herunter.
  • Dynamisch eingefügte Inhalte: Hinweisleisten, Newsletter-Boxen oder „Ähnliche Beiträge“ oberhalb des sichtbaren Bereichs.
  • Pagebuilder-Skripte: Spätes Initialisieren von Slidern oder Animationen verändert Abstände nach dem ersten Render, ein häufiges Muster bei Elementor und Divi.

Wie behebst du CLS?

  1. Maße setzen: width und height an Bildern und Videos oder CSS-aspect-ratio, damit der Platz vor dem Laden feststeht.
  2. Platz reservieren: Für Banner, Karten, Anzeigen und Formulare Mindesthöhen vorsehen oder sie als überlagerte Ebene darstellen.
  3. Schriften steuern: Webfonts vorladen, font-display bewusst wählen und Fallback-Schriften passend skalieren.
  4. Animationen mit transform: Positionswechsel per transform statt top oder margin, damit kein Layout neu berechnet wird.
  5. Nichts über dem Fold nachladen: Späte Injects gehören unter den sichtbaren Bereich oder in reservierte Slots.

CLS bei Modern Stack

Beim Neuaufbau auf Next.js liefert die Bildkomponente Maße und Platzhalter, Schriften werden lokal eingebunden, Layout-Slots sind fest definiert. Wir prüfen vor und nach der Modernisierung mit Feldmessung und Labor, besonders auf mobilen Geräten und mit aktivem Consent-Banner. Fehler, die wir oft sehen: ein Hero-Slider, der erst nach Skriptstart seine Höhe bekommt, und ein Banner, das nach 800 ms den Inhalt verdrängt. Gesamtbild: Core Web Vitals & Modernisierung.

Verwandte Themen

Quellen

Häufige Fragen

Ist CLS nur Kosmetik?

Nein. Springt ein Button im Moment des Tippens weg, klicken Nutzer das Falsche oder brechen ab. CLS misst deshalb nicht Schönheit, sondern Bedienbarkeit — und ist offizieller Teil der Core Web Vitals.

Wie wirken Cookie-Banner auf CLS?

Ein Banner, das nachträglich Inhalte nach unten schiebt, erzeugt einen Sprung. Besser: Banner als überlagerte Ebene oder mit reserviertem Platz einbauen. Consent und Layout müssen gemeinsam geplant werden, vor allem mobil.

Welcher CLS-Wert ist gut?

Bis 0,1 gilt als gut, zwischen 0,1 und 0,25 als verbesserungswürdig, über 0,25 als schlecht. Maßgeblich ist das 75. Perzentil echter Besuche, nicht der Laborwert eines einzelnen Tests.

Weiterlesen

  • Core Web Vitals

    Core Web Vitals sind Googles drei Nutzererlebnis-Kennzahlen: LCP (Ladezeit des größten Elements), INP (Reaktionszeit auf Eingaben) und CLS (visuelle Stabilität). Sie fließen in die Suche ein und zeigen Timeout- und Abbruchrisiken auch für KI-Crawler.

  • Core Web Vitals & Modernisierung

    Warum LCP, INP und CLS zur Webseite-Modernisierung gehören — und warum CDN-Caching allein selten reicht, wenn WordPress oder Pagebuilder das Markup aufblasen.

  • LCP

    LCP (Largest Contentful Paint) ist eine der drei Core Web Vitals. Die Metrik misst die Zeit, bis das größte sichtbare Element im Viewport gerendert ist; gut sind höchstens 2,5 Sekunden.

  • INP

    INP (Interaction to Next Paint) ist ein Core Web Vital, der misst, wie schnell eine Webseite nach Klick, Tipp oder Tastendruck sichtbar reagiert. Gut sind 200 Millisekunden oder weniger; schweres JavaScript und aufgeblähte Pagebuilder verschlechtern den Wert.

← Glossar·Themen