Was ist ein guter CLS-Score?

0,1 oder darunter gilt als "gut". 0,1 bis 0,25 braucht Verbesserung, und über 0,25 ist "schlecht". Der Score ist einheitenlos - er ist eine Summe daraus, wie weit sichtbare Elemente sich bewegt haben, gewichtet danach, wie viel vom Viewport sie einnehmen.

Zählt eine Layout-Verschiebung auch, wenn sie schnell passiert?

Ja. CLS interessiert sich nicht für Geschwindigkeit, nur für Distanz und Fläche - eine blitzschnelle Verschiebung eines großen Elements zählt genauso viel wie eine langsame. Ausgenommen sind nur Verschiebungen, die innerhalb von 500ms nach einer Nutzerinteraktion wie einem Klick oder Tap passieren.

Warum sieht mein CLS lokal gut aus, aber schlecht in Scanverras Bericht?

Lokale Tests auf einer schnellen Verbindung laden Werbung, Schriften und Embeds oft, bevor Sie eine Verschiebung bemerken würden. Scanverra misst die echte Render-Reihenfolge gegen Ihre Live-URL, was Verschiebungen sichtbar macht, die erst unter realistischem Netzwerk-Timing auftreten.

Zählen Sticky-Header oder Cookie-Banner gegen CLS?

Nur, wenn sie bestehenden Inhalt nach unten schieben, nachdem er bereits gerendert wurde. Ein Cookie-Banner, der Inhalt überlagert, oder einer, für den von Anfang an Platz reserviert war, zählt nicht - einer, der einschiebt und den Seiteninhalt nach unten drückt, schon.

Cumulative Layout Shift (CLS) beheben

Warum Ihre Seite sich verschiebt

Fast jedes CLS-Problem stammt aus einer von drei Quellen:

Bilder und iframes ohne reservierte Abmessungen. Kennt der Browser die Größe eines Bildes vor dem Laden nicht, rendert er die Box zunächst mit Höhe null und schiebt alles darunter abrupt nach unten, sobald das Bild eintrifft.
Inhalt, der oberhalb von bestehendem Inhalt eingefügt wird. Werbung, Promo-Leisten und Cookie-Banner, die nach dem initialen Rendering ins DOM eingefügt werden, schieben alles darunter nach unten.
Web-Fonts, die beim Austausch den Textfluss verändern. Zuerst rendert eine Fallback-Schrift, dann lädt die echte Schrift und tauscht sich mit einer anderen Breite/Höhe ein, was jede berührte Zeile neu umbricht.

So findet man, was sich verschiebt

Scanverras Performance-Checks bewerten CLS direkt anhand eines echten Lighthouse-Laufs gegen Ihre Live-URL, mit derselben cumulative-layout-shift-Metrik, auf der auch Googles Felddaten beruhen. Ist der Wert hoch, markiert Scanverra ihn als eigenständiges Problem - nicht nur als Zahl, sondern als benanntes Problem -, weil ein instabiles Layout noch etwas anderes beschädigt: Ein KI-Agent oder ein automatisiertes Tool, das versucht, einen gerade verschobenen Button anzuklicken, trifft das falsche Element.

Um das konkrete verantwortliche Element zu finden, zeichnet das Performance-Panel der Chrome DevTools "Layout Shift"-Einträge auf, mit dem genauen Knoten, der sich bewegt hat, und um wie viel - öffnen Sie es, zeichnen Sie einen Seitenaufruf auf und suchen Sie nach den roten Layout-Shift-Markierungen im Experience-Track.

So behebt man es

1. Platz mit expliziten Abmessungen reservieren

Jedes Bild, Video und iframe sollte seine Breite und Höhe angeben (oder das moderne CSS aspect-ratio nutzen), damit der Browser die richtige Box reservieren kann, bevor die Ressource eintrifft:

Explizite width/height reserviert die Box von vornhereintypescript

1<img
2  src="/product.webp"
3  alt="Wireless keyboard, top view"
4  width={640}
5  height={480}
6  loading="lazy"
7/>

Variiert die genaue Pixelgröße (etwa bei einem responsiven Embed), nutzen Sie stattdessen CSS:

aspect-ratio reserviert Platz ohne feste Pixel-Abmessungencss

1.video-embed {
2  width: 100%;
3  aspect-ratio: 16 / 9;
4}

2. Dynamisch eingefügtem Inhalt einen festen Platz reservieren

Muss ein Cookie-Banner, ein Werbeslot oder eine Promo-Leiste nach dem initialen Rendering eingefügt werden, geben Sie dessen Container von Anfang an eine reservierte min-height, statt Inhalte beim Eintreffen nach unten zu schieben - selbst eine leere Platzhalterbox verhindert die Verschiebung.

3. Die Metriken Ihrer Fallback-Schrift an die echte Schrift angleichen

Nutzen Sie font-display: swap zusammen mit einer Fallback-Schrift, deren x-Höhe und durchschnittliche Zeichenbreite nahe an Ihrer echten Schrift liegen (Tools wie Fontaine oder ein manuelles size-adjust in einem @font-face-Block können sie angleichen), damit der Austausch die Zeile nicht sichtbar neu umbricht.

4. Nie Inhalt oberhalb der aktuellen Scroll-Position des Nutzers einfügen

Muss neuer Inhalt erscheinen - etwa ein Banner "Neue Beiträge verfügbar" -, fügen Sie ihn unterhalb des sichtbaren Bereichs ein oder verlangen Sie eine Nutzeraktion, um ihn anzuzeigen, statt ihn oberhalb des bereits Sichtbaren einzufügen.

Wie Scanverra CLS-Probleme erkennt

Scanverra führt einen echten Lighthouse-Lauf gegen Ihre Live-URL durch und liest den tatsächlichen cumulative-layout-shift-Wert daraus aus - denselben Lauf, der auch für LCP und TTFB verwendet wird - und markiert bei einem hohen Wert ein eigenes Problem, mit einer Beschreibung, warum Layout-Instabilität speziell für alles (menschlich oder automatisiert) wichtig ist, das mit Ihrer Seite interagieren will.