CLS — so verhindern Sie springende Inhalte

Ein bekannter Ärger: Sie wollen einen Button klicken, und just in dem Moment lädt die Seite ein Bild oder eine Anzeige nach, alles verschiebt sich — Ihr Klick landet an der falschen Stelle. Dieses Ärgernis misst CLS (Cumulative Layout Shift), der dritte Core Web Vital. Er misst, wie stark sich Elemente während des Ladens unerwartet bewegen. Ein guter Wert liegt unter 0,1; über 0,25 gilt als schlecht, und Google nutzt ihn als Ranking-Signal.

Warum Inhalte springen

Die Hauptursachen sind fast immer dieselben: Bilder und Videos ohne festgelegte Maße, Anzeigen und Embeds, die spät laden und Inhalte nach unten drücken, Webschriften, die die Systemschrift ersetzen und den Text umbrechen, sowie per JavaScript oberhalb bestehender Inhalte eingefügte Elemente (Banner, Cookie-Hinweise). All das verschiebt, was der Nutzer bereits gesehen hat.

So verhindern Sie CLS

• Setzen Sie immer width und height bei Bildern und Videos. Der Browser reserviert den Platz dann vorab, und nichts springt beim Laden. Das behebt den Großteil des Problems.
• Reservieren Sie Platz für Anzeigen und Embeds. Definieren Sie eine feste Container-Höhe, bevor die Anzeige lädt.
• Nutzen Sie font-display: optional oder swap mit Preload. Das reduziert den Textsprung, wenn die echte Schrift eintrifft.
• Fügen Sie keine Inhalte oberhalb bestehender ein. Platzieren Sie Banner und Cookie-Hinweise als Overlay oder am Seitenende, nicht so, dass sie Inhalte nach unten drücken.
• Animieren Sie dynamische Elemente mit transform, nicht durch Höhenänderung. Transform-basierte Animationen lösen kein Reflow aus.

Der häufigste Fehler

Der mit Abstand größte Verursacher sind Bilder ohne Maße. In modernem HTML genügt es, die Attribute width und height (oder aspect-ratio im CSS) zu setzen, und der Browser berechnet den Platz selbst. Viele lassen das weg, weil sie glauben, das responsive Design regle es — tut es nicht, denn der Browser kennt die Proportionen erst, wenn das Bild eintrifft.

Wo Hosting ins Spiel kommt

CLS ist überwiegend ein Frontend-Problem, doch die Ladegeschwindigkeit hilft: Wenn Bilder und Schriften schnell von einem schnellen Hosting und CDN laden, ist das Zeitfenster, in dem Inhalte springen können, kürzer. Ein langsamer Server verlängert die Phase des instabilen Layouts. Ein Aufbau auf hochwertigem WordPress-Hosting gibt Ihnen eine gute Basis, doch Bildmaße und reservierten Platz müssen Sie selbst setzen.

So messen Sie den CLS

PageSpeed Insights meldet den CLS und zeigt im Diagnosebereich, welche Elemente sich verschieben. Die Chrome DevTools bieten zudem eine visuelle Layout-Shift-Ansicht im Performance-Panel, in der Sie genau sehen, was wann springt.

Häufige Fragen

Was ist ein guter CLS? Unter 0,1 für 75 % der mobilen Besuche.

Schadet ein Cookie-Hinweis dem CLS? Ja, wenn er Inhalte nach unten drückt. Platzieren Sie ihn als Overlay, das die Seite nicht bewegt.