Ratgeber · Web-Performance 2026
Cumulative Layout Shift: wenn die Seite springt
Wie der CLS-Score berechnet wird (impact fraction × distance fraction), und welche Hebel den Wert sofort senken.
Was misst CLS?
Cumulative Layout Shift summiert alle unerwarteten Verschiebungen von sichtbaren Layout-Elementen während des Ladens und der gesamten Session. Pro Shift wird berechnet: impact fraction × distance fraction. Diese Werte addiert ergeben CLS.
Schwellwerte
| Bewertung | CLS |
|---|---|
| Good | ≤ 0,1 |
| Needs Improvement | 0,1 - 0,25 |
| Poor | > 0,25 |
Die fünf typischen Layout-Shift-Quellen
- Bilder ohne width/height-Attribute - der Browser kennt die Höhe nicht und reserviert keinen Platz. Wenn das Bild lädt, springt alles darunter nach unten. Mit Abstand häufigste CLS-Ursache.
- Ads / Embeds ohne reservierten Platz - AdSense-Banner, YouTube-Embeds, Twitter-Cards. Lösung: min-height per CSS reservieren.
- Webfonts mit FOIT/FOUT - wenn der Webfont nachlädt und sich Zeichenbreiten ändern, springt der ganze Textblock. font-display: swap + font-feature-settings einsetzen.
- Dynamisch eingefügtes Content - Newsletter-Banner, GDPR-Consent, "You might also like" Sections, die nach DOM-Ready oben eingefügt werden.
- CSS-Animationen die transform NICHT verwenden - Animationen via top/left/width verursachen Layout-Shifts. Stattdessen transform: translate() und opacity.
Die wichtigste Einzelmaßnahme
Alle <img>-Tags brauchen width und height. Mit modernen aspect-ratio CSS-Regeln können sie trotzdem responsiv bleiben:
<img src="foto.jpg" width="800" height="600" alt="...">
img { width: 100%; height: auto; }
/* oder explizit: */
img { aspect-ratio: 4 / 3; }Das gibt dem Browser den Aspect-Ratio, sodass er den Platz reserviert bevor das Bild geladen ist.
Werbe-Banner ohne Sprung
Bei AdSense-Banner mit unbekannter Höhe: container mit fester min-height versehen. Wenn der Ad-Slot 250 px Höhe haben kann, dann:
.ad-slot { min-height: 250px; }Lieber etwas zuviel Platz als Layout-Shift. Auch nicht-gefüllte Slots zeigen dann einen leeren Bereich statt zu kollabieren und Content nachträglich nach oben zu schieben.
CLS messen
Im Chrome DevTools Performance Panel sind Layout-Shifts mit roten "Layout Shift"-Markern annotiert. Mit Klick auf den Marker sieht man genau welches Element gesprungen ist und um wieviel. In der Web-Vitals-Library:
import { onCLS } from 'web-vitals';
onCLS((metric) => {
console.log(metric.value, metric.entries);
});Die entries enthalten die einzelnen Shift-Events - sehr hilfreich zum Debuggen.