Lernen
CLS Layout Shifts beheben: Cumulative Layout Shift und Page Experience verbessern
Ein praktischer Leitfaden zum Finden und Beheben von Cumulative Layout Shift: warum Elemente springen, wie man Platz reserviert und wie man ein stabiles Layout nachweist.
Starte ein frisches DomainLens-Audit und nutze den Report als Prioritätenliste.
Was CLS misst und warum es Nutzer stört
Cumulative Layout Shift (CLS) misst visuelle Stabilität — wie stark sich sichtbarer Inhalt bewegt, während die Seite lädt und benutzt wird. Jedes Mal, wenn ein bereits sichtbares Element ohne Zutun des Nutzers an eine neue Position springt, zählt das als Layout Shift, und der Wert summiert die größten Bewegungsschübe des Besuchs.
Ein guter CLS liegt bei 0,1 oder darunter; über 0,25 ist schlecht. Und das ist nicht abstrakt: Sprünge führen dazu, dass Menschen den falschen Button tippen, ihre Stelle im Artikel verlieren oder versehentlich eine Anzeige anklicken. Es ist die Metrik, die dem Gefühl „billig und kaputt“ am direktesten entspricht.
Die üblichen Quellen von Layout Shifts
Fast jeder Sprung entsteht durch Inhalt, der spät in einen Platz kommt, der nicht dafür reserviert war. Die häufigen Übeltäter:
- Bilder und Videos ohne width- und height-Attribute, sodass der Browser die Box erst beim Laden reservieren kann.
- Webfonts, die einswappen und Text neu umbrechen (FOUT) und alles darunter nach unten schieben.
- Anzeigen, Embeds und iframes, die nach dem Rendern in einen Container ohne feste Höhe injiziert werden.
- Banner, Cookie-Hinweise und „das könnte Ihnen gefallen“-Widgets, die über vorhandenen Inhalt gedrückt werden.
- Dynamisch injiziertes DOM — eine Promo-Leiste oder ein A/B-Test, der kurz nach dem First Paint erscheint.
So finden Sie Shifts, die Sie kaum bemerken
Shifts passieren oft schneller, als das Auge registriert, oder nur bei langsamer Verbindung — Sie brauchen Werkzeuge, nicht nur einen kurzen Blick.
- Nehmen Sie im Performance-Panel einen Ladevorgang mit Netzwerk-Throttling auf und öffnen Sie die Layout-Shifts-Spur — jeder Eintrag hebt das bewegte Element und seinen Anteil hervor.
- Nutzen Sie die Web-Vitals-Erweiterung, um zu sehen, wie CLS live beim Scrollen und Interagieren wächst.
- Prüfen Sie Felddaten in Search Console/CrUX, um zu bestätigen, dass echte Nutzer es sehen — und auf welchem Template.
- Testen Sie mit gedrosselter Verbindung: viele Shifts erscheinen erst, wenn Fonts, Bilder oder Ads spät ankommen.
So reservieren Sie Platz, damit nichts springt
- Setzen Sie immer width und height (oder ein CSS-aspect-ratio) auf Bilder, Videos und iframes, damit der Browser die Box vor dem Laden reserviert.
- Geben Sie Ad-Slots, Embeds und dynamischen Widgets eine min-height in typischer Größe, damit später Inhalt den reservierten Platz füllt, statt die Seite zu schieben.
- Laden Sie Fonts mit font-display: optional oder swap plus gut passendem Fallback und size-adjust, um Reflow zu minimieren.
- Reservieren Sie Platz für Banner und Hinweise im Layout, statt sie nach dem Laden über den Inhalt zu setzen — oder fixieren Sie sie als Overlay.
- Animieren Sie mit CSS-Transforms, nie mit Eigenschaften wie top oder height, die ein Layout auslösen.
Fehler, die Layout Shifts zurückbringen
- Dimensionen entfernen beim Wechsel zu einem „responsiven“ Bild und sich nur auf CSS-width ohne aspect-ratio verlassen.
- Above-the-fold-Bilder lazy-loaden, was sie in nicht reservierten Platz verzögert.
- Nur auf einem schnellen Desktop testen, wo Fonts und Bilder sofort ankommen und kein Shift sichtbar ist.
- Die Startseite beheben und annehmen, das Produkt- oder Artikel-Template sei in Ordnung — CLS gilt pro Template.
So validieren Sie ein stabiles Layout
Nehmen Sie den Ladevorgang im Performance-Panel mit Throttling erneut auf und prüfen Sie, dass die Layout-Shifts-Spur für den Viewport leer ist, und verfolgen Sie dann den CLS-Feldtrend in Search Console über die nächsten Wochen.
Behandeln Sie CLS in DomainLens neben LCP und INP: eine schnell ladende, aber springende Seite fällt trotzdem bei der Page Experience durch. Der stärkste Fix ist ein Layout, das ab dem First Paint stabil ist — auf der langsamen mobilen Verbindung Ihrer Besucher.