Was der Cumulative Layout Shift misst

So funktioniert es

CLS ist einer der drei Core Web Vitals. Jedes Mal, wenn sichtbare Elemente ohne Zutun der Besucher ihre Position ändern, bewertet der Browser die Verschiebung: wie viel des Bildschirms betroffen ist und wie weit sich die Elemente bewegen. Verschiebungen kurz nach einem Klick oder einer Eingabe zählen nicht, die erwartet man. Als CLS gilt die stärkste Häufung von Verschiebungen während des Besuchs.

Der Wert hat keine Einheit. Gut sind bis 0,1, über 0,25 gilt als schlecht, jeweils für drei von vier Seitenaufrufen.

Typische Ursachen:

• Bilder, Videos und iframes ohne feste Maße.
• Banner, Hinweise und Werbung, die nachträglich über dem Inhalt eingefügt werden.
• Webfonts, die beim Wechsel von der Ersatzschrift breiter oder schmaler laufen.

bytereport prüft deshalb zusätzlich, ob die Bilder im HTML width und height haben. Fehlen sie bei einzelnen Bildern, gibt es eine Warnung; bei mehr als der Hälfte und mindestens vier Bildern einen Fehler.

Worauf es ankommt

• Breite und Höhe für jedes Bild. Trag die echten Pixelmaße ein. Der Browser berechnet daraus das Seitenverhältnis und hält den Platz frei; per CSS bleibt das Bild trotzdem flexibel.
• Platz für Einbettungen. Videos, Karten und Werbeflächen bekommen eine feste Höhe oder ein aspect-ratio, bevor ihr Inhalt lädt.
• Banner überlagern statt verschieben. Ein Cookie-Banner oder Hinweis liegt über dem Inhalt, statt ihn nach unten zu drücken.
• Schriften mit font-display. Und eine Ersatzschrift mit ähnlicher Breite, siehe Webfonts.

<img src="foto.webp" width="800" height="600" alt="…">

img { max-width: 100%; height: auto; }
.video { aspect-ratio: 16 / 9; }

So verbesserst du ihn

Viele CMS setzen width und height von selbst, wenn du Bilder über die Mediathek einfügst; fehlen sie, liegt es oft am Theme oder an Bildern, die von Hand eingefügt wurden. Platz für Einbettungen und Banner reserviert deine Agentur im Theme. Die Details nennen jedes Bild ohne Maße.