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.
Layout Shifts entstehen fast immer durch Bilder, Banner oder Schriften ohne feste Maße. Wer den Platz dafür vorab reserviert, hat das Problem meist schon gelöst.
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.
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
Häufige Fragen
Kurz beantwortet.
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.