Leitfäden

CLS, kurz für Cumulative Layout Shift, ist eines von Googles Core Web Vitals, den Metriken, mit denen Google bewertet, wie gut sich eine Seite in der Nutzung anfühlt. CLS misst die visuelle Stabilität: Bleiben die Elemente beim Laden einer Seite an ihrem Platz, oder springen sie umher? Ein niedriger CLS bedeutet, dass das Layout ruhig und vorhersehbar ist; ein hoher CLS bedeutet, dass sich Inhalt vor Ihren Augen verschiebt, gerade wenn Sie eine Zeile lesen oder eine Schaltfläche antippen wollen, eines der ärgerlichsten Dinge, die eine Webseite tun kann.

Wie CLS gemessen und bewertet wird

Der Name beschreibt, was gemessen wird. Kumulativ ist er, weil er die Layout-Verschiebungen aufaddiert, die während der Lebensdauer der Seite auftreten, und eine Layout-Verschiebung ist jedes Mal, wenn ein sichtbares Element von einem gerenderten Frame zum nächsten seine Position ändert, ohne dass Sie es angefordert haben. Von Ihnen ausgelöste Bewegung zählt nicht: einen Link anklicken, ein Akkordeon oder ein Menü öffnen ist erwartet und ausgenommen. Ein Bild, das spät lädt und den Absatz, den Sie gerade lesen, nach unten schiebt, ist nicht erwartet, und genau das soll CLS erfassen.

CLS ist eines der drei Core Web Vitals, neben Largest Contentful Paint, das die Ladezeit misst, und Interaction to Next Paint, das die Reaktionsfähigkeit misst. CLS ist dasjenige, das die visuelle Stabilität abdeckt. Eine Seite kann schnell laden und sofort reagieren und trotzdem einen schlechten CLS erzielen, wenn sich Dinge verschieben, nachdem sie zuerst erschienen sind. Die drei Metriken messen also wirklich verschiedene Eigenschaften, und eine Seite muss alle bestehen.

Anders als eine zeitbasierte Metrik wie LCP oder INP ist CLS ein einheitenloser Score und keine Anzahl von Millisekunden. Jede einzelne Verschiebung wird bewertet, indem zwei Bruchteile multipliziert werden: der Impact-Anteil, wie viel des Viewports die sich bewegenden Elemente betroffen haben, und der Distanz-Anteil, wie weit sie sich relativ zum Viewport bewegt haben. Diese Verschiebungs-Scores werden zu dem Wert kombiniert, den Google meldet, sodass sowohl wie viel sich bewegt hat als auch wie weit es sich bewegt hat einfließen.

Googles Schwellenwerte

Googles Schwellenwerte, gemessen am 75. Perzentil echter Ladevorgänge, sind leicht zu merken. Ein CLS von 0,1 oder weniger ist Good. Zwischen 0,1 und 0,25 ist Needs improvement. Über 0,25 ist Poor. Weil der Score kumulativ ist, können mehrere kleine Verschiebungen zusammen zu einer nicht bestandenen Note führen, selbst wenn kein einzelner Sprung dramatisch wirkt. Deshalb muss Stabilität eine Gewohnheit über die ganze Seite hinweg sein und nicht ein Fix für ein einzelnes sichtbares Element.

• Was es ist: Cumulative Layout Shift, eines der drei Core Web Vitals, neben Largest Contentful Paint und Interaction to Next Paint.
• Was es misst: die visuelle Stabilität, wie stark sich sichtbarer Inhalt unerwartet verschiebt, während eine Seite lädt.
• Wie es bewertet wird: ein einheitenloser Wert aus der Summe von Verschiebungs-Scores, jeder der Impact-Anteil multipliziert mit dem Distanz-Anteil.
• Schwellenwerte am 75. Perzentil: Good ist 0,1 oder weniger, Needs improvement ist 0,1 bis 0,25, Poor ist über 0,25.
• Wie man es verbessert: Abmessungen oder aspect-ratio bei Medien setzen, Platz für späten Inhalt wie Werbung und Banner reservieren, Webfonts abstimmen und mit transform animieren.

Was Layout-Verschiebungen verursacht

Die meisten Layout-Verschiebungen kommen von einer Handvoll bekannter Ursachen. Bilder, Videos und Iframes, die ohne width- und height-Attribute eingefügt werden, haben keinen reservierten Platz, sodass der Browser das Layout neu berechnen muss, sobald sie ankommen und ihre echte Größe kennt. Webfonts können eine Verschiebung verursachen, wenn eine Ersatzschrift durch die Webschrift getauscht wird und der Text in einer anderen Größe neu umbricht. Und Inhalt, der oberhalb von dem eingefügt wird, was Sie bereits lesen, etwa Werbung, Einbettungen oder ein spätes Cookie- oder Consent-Banner, schiebt alles darunter nach unten.

Wie man Layout-Verschiebungen behebt und vermeidet

Die Korrekturen ergeben sich direkt aus den Ursachen. Setzen Sie immer width- und height-Attribute auf Bilder und Videos, oder reservieren Sie den Platz mit der CSS-Eigenschaft aspect-ratio, damit der Browser die Größe schon vor dem Laden des Mediums kennt. Reservieren Sie Platz für alles, was spät ankommt, einschließlich Werbeflächen und Bannern, statt es über bestehendem Inhalt erscheinen zu lassen. Verwenden Sie für Webfonts die Eigenschaft font-display und gleichen Sie die Metriken der Ersatzschrift so weit wie möglich an, damit der Wechsel den Text so wenig wie möglich verschiebt.

Auch Animation spielt eine Rolle. Wenn Sie ein Element bewegen müssen, animieren Sie es mit der CSS-Eigenschaft transform statt Eigenschaften wie top, left, width oder height zu ändern. Transforms werden vom Compositor des Browsers verarbeitet und lösen kein Layout aus, sodass sie ein Element visuell bewegen, ohne als Layout-Verschiebung zu zählen. So können Sie Bewegung im Design behalten, ohne dem Score zu schaden.

Wie man CLS misst

CLS beurteilt man am besten anhand von Felddaten, echten Nutzern auf echten Geräten und Verbindungen, die Sie im Chrome User Experience Report und im Core-Web-Vitals-Bericht der Google Search Console sehen. Zum Debuggen im Labor hebt das Performance-Panel der Chrome DevTools Layout-Verschiebungen und die verantwortlichen Elemente hervor, Lighthouse meldet einen CLS-Wert, und die JavaScript-Bibliothek web-vitals misst ihn direkt im Browser. Auf dieser Seite können Sie mit unserem Web-Vitals-Checker Ihre gemessenen Werte eingeben und sofort sehen, ob sie Googles Schwellenwerte bestehen.

Das Fazit

Das Fazit: CLS belohnt Seiten, deren Layout an seinem Platz bleibt. Der meiste Aufwand ist defensiv, nämlich Platz für Bilder, Medien, Schriften und alles spät Eingefügte zu reservieren, damit nichts bestehenden Inhalt beiseiteschieben muss. Machen Sie das richtig, und eine Seite fühlt sich ruhig und stabil an statt sprunghaft, genau das, was die Metrik fördern soll.