Cumulative Layout Shift (CLS): Layout-Verschiebungen beheben

Warum das wichtig ist

Du willst auf "Termin buchen" tippen, in dem Moment schiebt sich ein Bild oder ein Banner hinein, und du landest auf dem falschen Link. Das ist eine Layout-Verschiebung. Sie nervt, sie kostet Vertrauen, und in einem Shop führt sie zu Fehlklicks.

CLS ist einer der drei Core Web Vitals. Der Wert hat keine Einheit, er ergibt sich daraus, wie viel Fläche sich bewegt und wie weit. Verschiebungen kurz nach einem Klick oder Tippen zählen nicht, die erwartet der Besucher, etwa wenn ein Menü aufklappt.

Wichtig für das Verständnis: Die Labormessung von Lighthouse sieht nur die Verschiebungen beim Laden. Bei echten Besuchern misst Chrome auch danach weiter, also auch Werbung, die beim Scrollen nachlädt. Der Feldwert kann deshalb deutlich schlechter sein als der Laborwert.

So prüfst du es selbst

In PageSpeed Insights findest du CLS im Reiter Mobil bei den Messwerten. In den Diagnosen listet Lighthouse die Elemente auf, die sich am stärksten verschoben haben. Oft ist das schon die ganze Antwort.

Für die Suche im Browser öffnest du die Chrome-Entwicklertools, gehst in den Bereich Performance und zeichnest ein Neuladen der Seite auf. Layout-Verschiebungen erscheinen dort als eigene Spur, beim Anklicken wird das verschobene Element markiert. Chrome zeigt dort inzwischen auch live an, wie sich CLS entwickelt, während du durch die Seite scrollst.

Ganz ohne Werkzeug: Lade die Seite auf dem Handy bei schwachem Empfang und beobachte, was springt. Klingt banal, findet aber erstaunlich viel.

Im kostenlosen Check von checkfrei messen wir CLS automatisch über PageSpeed Insights (mobil). Bis 0,1 ist gut, bis 0,25 gibt es eine Warnung, darüber einen Fehler.

So behebst du es

Das Prinzip ist immer gleich: Der Browser muss vorher wissen, wie viel Platz etwas braucht.

• ·Bilder und Videos bekommen width und height. Der Browser berechnet daraus das Seitenverhältnis und reserviert den Platz, auch wenn das Bild per CSS flexibel skaliert.
• ·Werbung und Einbettungen wie Karten, Videos oder Bewertungs-Widgets bekommen einen Container mit fester Mindesthöhe oder aspect-ratio.
• ·Cookie-Banner gehören als Overlay über den Inhalt. Ein Banner, das oben eingefügt wird, drückt die ganze Seite nach unten.
• ·Webschriften brauchen eine passende Ersatzschrift. Ist sie viel breiter oder schmaler, springt beim Wechsel der Text um. size-adjust in einer @font-face-Regel gleicht das an.
• ·Animationen baust du mit transform. Bewegungen per top, left oder height verschieben das Layout, transform zählt nicht als Verschiebung.

/* Platz für eine eingebettete Karte oder ein Video reservieren */
.einbettung {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Widget mit bekannter Höhe */
.widget-platz {
  min-height: 250px;
}

/* Ersatzschrift an die Webschrift angleichen */
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial");
  size-adjust: 107%;
}
body {
  font-family: "Inter", "Inter Ersatz", sans-serif;
}

<img src="/bilder/team.webp" width="800" height="533" alt="Unser Team vor dem Laden">

<style>
  img { max-width: 100%; height: auto; }
</style>