Was ist Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) ist eine Kennzahl aus den Core Web Vitals, die die visuelle Stabilität einer Webseite während des Ladens misst. Sie erfasst, wie stark sich sichtbare Elemente unerwartet verschieben, während die Seite aufgebaut wird.
Als eine der drei zentralen Web-Vitals-Metriken adressiert CLS ein konkretes Nutzerproblem: Springende Inhalte, die etwa dazu führen, dass ein Nutzer versehentlich auf ein falsches Element klickt. Der Wert summiert die unerwarteten Verschiebungen und drückt so die wahrgenommene Stabilität in einer einzigen Kennzahl aus.
Was gemessen wird
CLS bewertet die Summe der unerwarteten Layoutverschiebungen während der gesamten Ladephase. In die Berechnung fließen die Größe der verschobenen Fläche und die Distanz der Verschiebung ein. Nur unerwartete Verschiebungen werden gewertet; Bewegungen als direkte Reaktion auf eine Nutzereingabe bleiben unberücksichtigt. Als gut gilt ein CLS-Wert von bis zu 0,1, gemessen an realen Nutzerdaten. Werte zwischen 0,1 und 0,25 gelten als verbesserungswürdig, darüber als schlecht. Da der Wert dimensionslos ist, beschreibt er nicht eine Zeit, sondern das Ausmaß der visuellen Instabilität.
Typische Ursachen
Layoutverschiebungen entstehen meist durch Elemente, die nachträglich geladen werden, ohne dass zuvor Platz reserviert wurde. Häufige Ursachen sind Bilder und Videos ohne festgelegte Abmessungen, dynamisch eingefügte Werbung oder Banner, nachgeladene Schriften, die die Textdarstellung verändern, sowie asynchron eingefügte Inhalte. In all diesen Fällen verschiebt sich der bereits sichtbare Inhalt, sobald ein neues Element erscheint. Die Ursachen liegen damit überwiegend in der Reihenfolge und der fehlenden Platzreservierung beim Aufbau der Seite, nicht in der reinen Ladegeschwindigkeit.
Vermeidung von Layoutverschiebungen
Zur Reduktion des CLS tragen mehrere Maßnahmen bei: das Festlegen von Größenangaben für Bilder und Medien, damit der Platz von Beginn an reserviert ist, das Vorabladen oder eine stabile Darstellung von Schriften, sowie das Reservieren von festen Bereichen für dynamisch nachgeladene Elemente wie Anzeigen. Auch das Einfügen neuer Inhalte oberhalb bereits sichtbarer Elemente sollte vermieden werden. Ziel ist ein Seitenaufbau, bei dem die Position sichtbarer Elemente unverändert bleibt, während weitere Inhalte geladen werden. So bleibt die visuelle Stabilität über die gesamte Ladephase erhalten.
Einordnung in die Core Web Vitals
CLS ergänzt Largest Contentful Paint und Interaction to Next Paint zu den Core Web Vitals. Während LCP die Ladegeschwindigkeit und INP die Reaktionsfähigkeit misst, bewertet CLS ausschließlich die visuelle Stabilität. Die drei Metriken sind unabhängig voneinander: Eine Seite kann schnell laden und dennoch instabil sein. Eine gute Page Experience erfordert daher, alle drei Aspekte gemeinsam zu betrachten und jeweils eigene Maßnahmen abzuleiten.
FAQ
Was misst Cumulative Layout Shift?
Die visuelle Stabilität einer Seite, also das Ausmaß unerwarteter Verschiebungen sichtbarer Elemente während des Ladens.
Welcher CLS-Wert gilt als gut?
Ein CLS-Wert von bis zu 0,1 gilt als gut, gemessen an realen Nutzerdaten.
Was verursacht Layoutverschiebungen?
Meist Elemente ohne reservierten Platz, etwa Bilder ohne Größenangabe, nachgeladene Werbung oder Schriften.
Werden alle Verschiebungen gewertet?
Nein. Nur unerwartete Verschiebungen zählen. Bewegungen als direkte Reaktion auf eine Nutzereingabe bleiben unberücksichtigt.
Ist CLS eine Zeitangabe?
Nein. CLS ist ein dimensionsloser Wert, der das Ausmaß der visuellen Instabilität beschreibt, keine Dauer.
Messung und Diagnose
Wie die uebrigen Core Web Vitals wird auch der CLS-Wert anhand realer Nutzerdaten bewertet, waehrend Labormessungen der Diagnose dienen. Da Layoutverschiebungen oft nur unter bestimmten Bedingungen auftreten, etwa bei langsamer Verbindung oder spaet nachgeladenen Elementen, ist die Betrachtung der Felddaten besonders wichtig. Diagnosewerkzeuge koennen die verschobenen Elemente sichtbar machen und so die Ursachen einer Instabilitaet aufzeigen. Auf dieser Grundlage lassen sich gezielt Massnahmen ableiten, etwa das Reservieren von Platz fuer Medien oder Anzeigen. Eine erneute Messung nach der Umsetzung stellt sicher, dass die Verschiebungen tatsaechlich reduziert wurden.
Systematische Bedeutung
Cumulative Layout Shift macht die visuelle Stabilität einer Seite messbar und adressiert damit ein konkretes, häufig unterschätztes Nutzerproblem. Seine Bedeutung liegt darin, springende Inhalte als Qualitätsdefizit erkennbar und behebbar zu machen. Als eigenständige Dimension der Core Web Vitals ergänzt CLS die Betrachtung von Ladegeschwindigkeit und Reaktionsfähigkeit um den Aspekt der Darstellungsruhe.
Weiterführende Begriffe
Vom Wissen zur Sichtbarkeit
Semtrix setzt SEO, SEA und GEO täglich in die Praxis um – von der Analyse bis zur laufenden Optimierung. Starte mit einer kostenlosen Analyse deiner Website.
Kostenlos & unverbindlich – keine Weitergabe deiner Daten.
Immer einen Schritt voraus:
Die Semtrix Newswatch
Im digitalen Marketing entscheidet Wissen über Erfolg. Mit der Semtrix Newswatch erhältst du jede Woche exklusive Einblicke, klare Handlungstipps und brandneue Trends aus der Welt von SEO, SEA, GEO und Performance Marketing. Verständlich, praxisnah – und immer mit Fokus auf das, was wirklich Ergebnisse bringt.
- Aktuelle SEO-Trends verständlich erklärt, bevor sie im Mainstream ankommen
- Tipps damit ChatGPT, Gemini & Co. dich überhaupt zitieren
- Strategien & Best Practices, die du sofort anwenden kannst
- Einblicke in Google-Updates und deren Auswirkungen auf deine Sichtbarkeit
- Case Studies & Learnings aus echten Kundenprojekten
- Tools, Templates & Ressourcen, die deinen Alltag einfacher machen