CLS verbessern und Layout-Verschiebungen vermeiden

Wenn sich Text beim Lesen bewegt, ein Button plötzlich seine Position ändert oder ein Bild den restlichen Inhalt nach unten schiebt, hat Ihre Website ein Problem mit der visuellen Stabilität.

Diese unerwarteten Bewegungen werden mit Cumulative Layout Shift (CLS) gemessen, einem der Core Web Vitals von Google. Ein niedriger Wert bedeutet eine stabilere Nutzung. Ein CLS-Wert von 0,1 oder weniger gilt als gut, über 0,25 als schlecht.

Was ist CLS?

CLS misst unerwartete Bewegungen sichtbarer Elemente während des Besuchs. Eine Anzeige kann etwa über einem Link erscheinen und ihn verschieben, während jemand klicken möchte. Auch ein großes Bild kann beim Laden den Artikel nach unten drücken.

Der Wert wird am 75. Perzentil der Besuche gemessen, getrennt für Mobilgeräte und Desktop. Damit wird die echte Erfahrung der Besucher abgebildet, nicht nur die Download-Geschwindigkeit einzelner Ressourcen.

Warum CLS wichtig ist

Eine ständig springende Seite erschwert das Lesen, lässt Besucher ihre Position verlieren und kann Fehlklicks verursachen. Das ist auf kleinen Bildschirmen besonders ärgerlich. CLS gehört neben LCP und INP zu den Core Web Vitals; ein guter Wert allein garantiert jedoch kein besseres Ranking.

Häufige Ursachen

Das Grundproblem ist meist, dass der Browser die benötigte Größe eines Elements noch nicht kennt. Typische Auslöser sind Bilder ohne Maße, Videos und Iframes ohne reservierten Platz, Werbung, externe Widgets, wechselnde Webfonts, später eingefügte Banner und JavaScript-Inhalte ohne Platzhalter.

Bilder, Einbettungen und Werbung stabil machen

Geben Sie Bildern immer width und height, damit der Browser das Seitenverhältnis früh reservieren kann:

<img src="beispiel.jpg" alt="Beispiel" width="1200" height="800">

Für Videos, Karten und Formulare eignet sich ein Container mit aspect-ratio: 16 / 9. Reservieren Sie bei Anzeigen die erwartete Höhe, zum Beispiel mit min-height: 250px. Ein leerer Bereich ist weniger störend als eine Verschiebung während des Lesens.

Dynamische Inhalte und Schriften

Cookie-Hinweise, Aktionsbanner, Suchergebnisse, Empfehlungen und API-Antworten sollten keinen sichtbaren Inhalt nachträglich verdrängen. Reservieren Sie den Platz vorher oder verwenden Sie Skeletons und vorhersehbare Mindesthöhen.

Auch eine Fallback-Schrift kann andere Zeichenbreiten als die Webfont haben. Wählen Sie ähnliche Fallback-Metriken, laden Sie Schriften sorgfältig und prüfen Sie bei Bedarf size-adjust.

Animationen richtig einsetzen

Animationen von top, left, width, height oder margin verändern das Layout. Für Bewegung und Skalierung sind CSS-Transforms wie transform: translateX(20px) meist geeigneter.

CLS untersuchen

PageSpeed Insights, Lighthouse und Chrome DevTools helfen bei der Analyse. Felddaten zeigen echte Geräte und Netzwerke, Labordaten helfen beim Debugging. Prüfen Sie auch Scrollen, Menüs, Einwilligungsbanner, Nachladen und Widgets, da Layout-Verschiebungen später auftreten können.

Schnelleres Hosting behebt CLS nicht automatisch. Suchen Sie zuerst das Element, das sich bewegt, und korrigieren Sie HTML, CSS, JavaScript, Medien oder Drittanbieter-Inhalte.

Häufige Fragen

Welcher CLS-Wert ist gut?

0,1 oder weniger ist gut, 0,1 bis 0,25 braucht Verbesserung und über 0,25 ist schlecht.

Was ist der schnellste Fix?

Beginnen Sie mit Bildern, Videos und Einbettungen ohne reservierte Maße. Danach prüfen Sie dynamische Inhalte, Werbung und Schriften.

Verursacht Lazy Loading CLS?

Nicht von selbst. Problematisch ist fehlender Platz, wenn Maße oder ein Seitenverhältnis fehlen.

Eine stabilere Website bauen

Der wichtigste Grundsatz lautet: Der Browser sollte möglichst früh wissen, wie viel Platz ein Element benötigt. Reservieren Sie Raum, testen Sie echte Interaktionen und bewerten Sie sowohl Feld- als auch Labordaten.