CLS bei echten Nutzern (Felddaten)

Was diese Prüfung macht

Liest das 75.-Perzentil des Cumulative Layout Shift aus dem Chrome UX Report aus – über ein gleitendes 28-Tage-Fenster aggregiert aus eingewilligten echten Chrome-Sitzungen. CLS ist einheitenlos; er summiert den Effekt jeder unerwarteten Layout-Bewegung während des Besuchs, gedeckelt auf das größte 5-Sekunden-Aktivitätsfenster.

Feld-CLS (p75)	Bewertung
≤ 0,10	Gut
0,10–0,25	Verbesserungsbedürftig
> 0,25	Schlecht

Warum sich Feld-CLS von Labor-CLS unterscheidet:

• Labor-CLS läuft einmal. Lighthouse lädt die Seite, wartet ein paar Sekunden und summiert die Shifts.
• Feld-CLS läuft über den ganzen Besuch. Echte Nutzer:innen scrollen, klicken und interagieren minutenlang. Jeder Shift zählt – einschließlich später ladender Werbenetzwerke, lazy-geladener Bilder, A/B-Varianten und Empfehlungs-Widgets, die erst nach dem ersten Paint hydratisieren.

Genau deshalb ist Feld-CLS in der Regel schlechter als Labor-CLS, und genau deshalb erfordert die Korrektur, über die gesamte User Journey nachzudenken – nicht nur über die ersten 5 Sekunden.

Warum es zählt

CLS ist eines von Googles drei Core Web Vitals und ein direktes Ranking-Signal. Schlechter CLS ist nicht nur ein SEO-Problem – er ist ein Usability-Bug, der umso schlimmer wird, je länger Nutzer:innen bleiben:

• Nutzer:innen klicken den falschen Button, wenn eine Anzeige Inhalte nach unten drückt.
• Formulare werden mit falschen Werten abgeschickt, wenn ein spät geladener Banner das Layout verschiebt.
• Conversion-Raten fallen messbar oberhalb von CLS 0,25 (Googles Schwelle für „schlecht”).

Ist dein Feld-CLS hoch, der Labor-CLS aber gut, liegt das Problem fast immer an Inhalten, die nach dem ersten Paint geladen werden – und Laborwerkzeuge warten nicht lange genug, um sie zu sehen.

Wie du ihn verbesserst

1. Reserviere Platz für alles Asynchrone. Jedes Bild, Video, Embed, jede Anzeige und jedes Widget, das nach dem ersten Paint lädt, braucht vor dem Laden explizite Abmessungen:

<!-- Bei Bildern immer width + height angeben -->
<img src="/photo.jpg" width="600" height="400" alt="..." />

<!-- Bei iframes (YouTube, Twitter) in einen Container mit festem Seitenverhältnis wickeln -->
<div style="aspect-ratio: 16 / 9;">
  <iframe src="https://www.youtube.com/embed/abc" width="100%" height="100%"></iframe>
</div>

<!-- Bei Werbeplätzen die min-height in CSS festlegen, bevor das SDK lädt -->
<div class="ad-slot" style="min-height: 250px;"></div>

2. Injiziere keinen Inhalt über bestehenden Inhalt. Wenn du ein Cookie-Banner zeigen musst, schiebe es an den Seitenfuß oder verwende eine oben angedockte Leiste mit position: fixed – niemals in den Dokumentenfluss injizieren.

3. Setze font-display: optional (oder swap mit einem sorgfältigen Fallback). Spät eintreffende Webfonts lassen die Überschrift von den Maßen des Fallbacks auf die Maße der Webfont springen. Der CSS-Deskriptor size-adjust kann den Fallback an die x-Höhe der Webfont angleichen, sodass der Swap unsichtbar wird:

@font-face {
  font-family: "Inter-Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

4. Verwende für Animationen transform statt top / left / margin. Transform-basierte Animationen lösen kein Layout aus und tragen daher nicht zu CLS bei.

5. Achte auf spät bindende <script>-Tags, die das DOM mutieren. Personalisierungs-Tools, GTM, Hotjar, Intercom – alles häufige Übeltäter. Wenn ein Drittanbieter-Skript ein Element oberhalb der Falz einfügt, nachdem die Seite gerendert ist, ist das CLS.

6. Teste mit aktivierten Erweiterungen. Laborwerkzeuge laufen in einem sauberen Browser; echte Nutzer:innen haben Adblocker, die Platzhalter entfernen und kollabierte Layouts hinterlassen, die sich dann erneut verschieben. Reserviere Platz mit CSS, das die DOM-Manipulation durch Adblocker übersteht.

Häufige Fragen

Mein CLS ist in der Entwicklung großartig, in der Produktion aber schlecht. Warum?

Die Produktion hat Dinge, die der Dev-Stand nicht hat: echtes Anzeigeninventar, echte A/B-Varianten, echte Empfehlungs-Widgets, echte Personalisierung. Richte die CrUX-API oder die web-vitals-JS-Bibliothek ein, um live in der Produktion zu messen – npm i web-vitals und onCLS(reportFn) aufrufen, um Shifts live zu loggen.

Werden Layout-Shifts auf Nutzereingaben gezählt?

Nein. CLS zählt nur unerwartete Shifts – alles innerhalb von 500 ms nach einem Klick, Tap oder Tastendruck wird ausgenommen. Ein Tab, der ein Akkordeon öffnet, zählt also nicht, auch wenn er sichtbar Inhalte verschiebt.

Was ist mit Anchor-Links, die die Seite springen lassen?

Anker-Scrolls werden nicht als CLS gezählt – die Spezifikation schließt jeden Shift aus, der während eines programmatischen Scrolls passiert. Ist dein CLS rätselhaft hoch, sind Anker-Sprünge nicht die Ursache.