Cumulative Layout Shift (CLS): Definition, Ursachen, Lösungen

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) ist ein Core Web Vital und bewertet, wie stark sich sichtbare Inhalte während der Nutzung einer Seite unerwartet verschieben. Es ist eine einheitenlose Zahl: der größte Schub an Layout-Verschiebungen während des Besuchs. Google bewertet 0,1 oder weniger als gut und mehr als 0,25 als schlecht, gemessen am 75. Perzentil der Seitenaufrufe, getrennt für Mobilgeräte und Desktop.

Es erfasst den Moment, in dem Sie nach einem Button greifen, die Seite springt und Sie stattdessen eine Anzeige antippen. CLS ist eine von drei Core Web Vitals, neben LCP (Laden) und INP (Reaktionsfähigkeit). Die Ladegeschwindigkeit behandelt der LCP-Eintrag.

CLS-Schwellenwerte

Die Schwellenwerte pflegt web.dev.

So wird CLS berechnet

Jede unerwartete Verschiebung erhält einen Wert: Layout-Shift-Wert = Impact Fraction x Distance Fraction.

• Impact Fraction: die zusammengenommene sichtbare Fläche der instabilen Elemente vor und nach der Verschiebung, als Anteil am Viewport.
• Distance Fraction: die größte Strecke, die ein instabiles Element zurückgelegt hat, als Anteil der größten Viewport-Abmessung.

Verschiebungen werden zu Sitzungsfenstern gebündelt: Schübe mit weniger als 1 Sekunde Abstand zwischen den Verschiebungen und höchstens 5 Sekunden Gesamtdauer. CLS ist der Wert des schlechtesten Fensters, nicht die Summe des ganzen Besuchs. Verschiebungen innerhalb von 500 Millisekunden nach einem Tippen, Klicken oder Tastendruck sind ausgenommen, weil der Besucher sie ausgelöst hat. Scrollen, Ziehen und Pinch-Zoom gelten nicht als solche Eingabe.

Beispiel: Ein Banner schiebt den Artikel nach unten

Angenommen, ein Bild füllt die Hälfte des Viewports und ein spät ladendes Banner schiebt es um ein Viertel der Viewport-Höhe nach unten. Die betroffene Fläche vor und nach der Verschiebung deckt drei Viertel des Viewports ab (Impact Fraction 0,75), die Distance Fraction beträgt 0,25. Die Verschiebung ergibt 0,75 x 0,25 = 0,1875 und liegt damit allein schon im verbesserungswürdigen Bereich. Die Zahlen sind beispielhaft; echte Seiten haben viele kleinere Verschiebungen.

Was Layout-Verschiebungen verursacht

So beheben Sie CLS

Geben Sie jedem Bild und Video seine Abmessungen, damit der Platz schon da ist, bevor die Datei eintrifft (den Rest der Bild-Checkliste finden Sie unter Bildgröße):

<!-- shifts the page when it loads -->
<img src="/img/banner.jpg" alt="Sale banner">

<!-- reserves the space up front -->
<img src="/img/banner.jpg" alt="Sale banner" width="1200" height="400">

• Reservieren Sie Platz für Inhalte, die später laden, etwa Anzeigen, Einbettungen und Cookie-Hinweise, mit fester oder Mindesthöhe.
• Fügen Sie keinen neuen Inhalt oberhalb dessen ein, was der Besucher gerade liest, es sei denn, er hat ihn angefordert.
• Nutzen Sie transform: translate() und transform: scale() für Bewegungs- und Größenanimationen statt top, height oder width zu ändern, wie web.dev empfiehlt.
• Zeigen Sie bei Inhalten, die nach einem Klick erscheinen, einen Ladeindikator fester Größe.

Häufige CLS-Fehler

• Abmessungen am Hero-Bild ergänzen, aber Logo, Avatare und Bilder im Artikel vergessen.
• Einen Anzeigenplatz zusammenfallen lassen, wenn keine Anzeige erscheint, sodass der Inhalt darunter springt.
• Nur den ersten Bildschirm testen, obwohl Verschiebungen weiter unten oder später im Besuch passieren.
• Sich allein auf einen Laborwert verlassen, der meist kurz nach dem Laden endet, während echte Besucher den ganzen Besuch erleben.

So messen Sie CLS

Lighthouse und Chrome DevTools zeigen Verschiebungen für einen einzelnen kontrollierten Ladevorgang, was bei der Suche nach dem Element hilft. Felddaten echter Besucher, etwa vom selbst betriebenen Real User Monitoring oder aus dem Chrome UX Report, decken den ganzen Besuch ab und entscheiden über das Core-Web-Vitals-Ergebnis. So protokollieren Sie CLS mit Googles web-vitals-Bibliothek:

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

CLS in Test und Monitoring

Das Page-Speed-Monitoring von LoadFocus führt planmäßig Lighthouse-Audits aus 25 Cloud-Regionen aus und erfasst die Core Web Vitals einschließlich CLS, sodass eine Template-Änderung, die Inhalte zu verschieben beginnt, als Trend sichtbar wird. Der kostenlose Core-Web-Vitals-Checker zeigt das CLS echter Chrome-Nutzer für eine URL am 75. Perzentil. Die Schritt-für-Schritt-Lösungen für alle drei Metriken stehen in unserem Leitfaden zur Core-Web-Vitals-Optimierung. Zum Weiterlesen: Core Web Vitals mit Alarmen und Berichten überwachen und 10 Schritte zu einer schnelleren Website.

Häufige Fragen: Cumulative Layout Shift

Was ist ein guter CLS-Wert?

0,1 oder weniger am 75. Perzentil der Seitenaufrufe. Zwischen 0,1 und 0,25 ist verbesserungswürdig, über 0,25 ist schlecht.

Zählt eine Verschiebung nach einem Klick auf einen Button?

Nicht, wenn sie innerhalb von 500 Millisekunden nach dem Tippen, Klicken oder Tastendruck passiert, weil der Besucher sie ausgelöst hat. Scrollen, Ziehen und Pinch-Zoom zählen nicht als diese Art von Eingabe.

Brauche ich width und height bei jedem Bild?

Bei jedem Bild und Video, dessen Größe nicht ohnehin durch Ihr Layout feststeht. So kann der Browser den Platz reservieren, bevor die Datei lädt. Ein CSS-aspect-ratio erfüllt denselben Zweck.

Warum ist mein CLS in den Felddaten schlechter als im Labor?

Ein Labortest deckt meist nur das Laden ab, Felddaten dagegen den ganzen Besuch, einschließlich spät erscheinender Anzeigen, Banner und Inhalte nach dem Scrollen. Echte Geräte und Verbindungen unterscheiden sich außerdem vom Testaufbau.

Wie finde ich das Element, das sich verschiebt?

Führen Sie Lighthouse aus und lesen Sie die Diagnosen zu Layout-Verschiebungen, oder zeichnen Sie einen Trace im Performance-Tab der Chrome DevTools auf, der Layout-Verschiebungen und die beteiligten Elemente markiert.