Was ist Cumulative Layout Shift (CLS)? Kurze Erklärung und Tipps
Kennst du das? Du bist auf einer Website, willst gerade auf einen Button drücken… und schwupps, der ganze Inhalt verrutscht. Du triffst den falschen Button, musst neu scrollen oder verlierst im schlimmsten Fall komplett den Überblick. Willkommen in der Welt von Cumulative Layout Shift. Kurz: CLS.
In diesem Beitrag erfährst du:
- Was Cumulative Layout Shift genau ist und warum es wichtig ist
- Wie der Cumulative Layout Shift-Score berechnet wird und was ein guter Wert ist
- Welche typischen Probleme dafür verantwortlich sind
- Und wie man diese elegant lösen kann
Am Ende geben wir dir ein paar Tipps, wann es sinnvoll ist, tiefer einzusteigen – oder sich einfach bei uns zu melden.
Was ist Cumulative Layout Shift?
Cumulative Layout Shift (CLS) misst, wie stark sich Inhalte auf einer Webseite unerwartet verschieben, während sie geladen wird oder sich verändert. Google nennt es visuelle Stabilität – und sie ist ein zentrales Element der sogenannten Core Web Vitals, den durchaus wichtigen Kennzahlen für die User Experience im Web.
Cumulative Layout Shift betrifft insbesondere das sogenannte „Above the Fold“ – also den sichtbaren Bereich beim ersten Laden der Seite. Wenn dort plötzlich Elemente aufspringen, nachladen oder sich verschieben, wirkt die Seite instabil – was nicht nur nervt, sondern auch zu Fehlklicks führen kann.
Warum ist Cumulative Layout Shift so häufig?
CLS entsteht meistens nicht aus böser Absicht, sondern durch unvollständige Planung oder fehlende technische Massnahmen. Besonders häufig passiert das:
- bei Bildern oder Videos ohne definierte Grösse,
- bei Werbung, die dynamisch nachgeladen wird,
- bei Webfonts, die zu einem sogenannten Flash of Unstyled Text führen,
- oder bei iframes, Formularen und interaktiven Widgets.
Gerade auf mobilen Geräten, wo der Platz begrenzt ist und das Laden länger dauert, macht sich ein schlechter CLS-Wert besonders negativ bemerkbar.
Der CLS-Score
Wie misst man Layout-Verschiebungen?
Der CLS-Score ist eine Zahl zwischen 0 und 1, wobei niedriger besser ist. Er setzt sich zusammen aus zwei Faktoren:
- Impact Fraction: wie viel Platz nimmt das verrutschte Element ein?
- Distance Fraction: wie weit hat sich das Element verschoben?
Beispiel: Ein Button nimmt 20 % der Bildschirmhöhe ein und springt um 25 % nach unten. Der Impact ist 0.2, die Distance ist 0.25 → der CLS-Score dieses Shifts beträgt 0.125 (0.5 × 0.25).
Ein einzelner Shift ist oft nicht das Problem – der Score summiert alle Layoutverschiebungen, die während des Ladens passieren.
Was ist ein guter Cumulative Layout Shift-Wert?
Google gibt folgende Empfehlungen:
| CLS-Score | Bedeutung |
|---|---|
| 0.1 oder weniger | Gut – Benutzer merken nichts |
| 0.1 – 0.25 | Verbesserung nötig |
| über 0.25 | Kritisch – Nutzererlebnis leidet |
Die meisten modernen Page-Speed-Tools wie PageSpeed Insights oder Lighthouse zeigen den CLS-Score direkt an – inklusive Hinweise auf Ursachen.
Typische Ursachen
Und wie man die Cumulative Layout Shifts behebt
1. Fehlende Grösse bei Bildern und Videos
Problem: Ein Bild wird geladen, aber der Platz dafür ist nicht reserviert – dadurch springt der Content beim Nachladen und wird nach unten geschoben.
<img src="beispiel.jpg" width="800" height="400" alt="Beispiel">
Lösung:
Verwende immer width und height im <img>-Tag oder setze die Grösse via CSS. So wird alles an seinem Platz bleiben, auch wenn das Bild etwas später geladen wird. Noch besser: Nutze das Attribut aspect-ratio, wenn das Seitenverhältnis bekannt ist.
2. Dynamisch nachgeladene Werbung oder Banner
Problem: Werbeanzeigen oder Cookie-Banner schieben Inhalte nach unten, sobald sie erscheinen.
Lösung:
Reserviere den Platz für solche Elemente von Anfang an – selbst wenn der Inhalt später kommt. Für Ads gibt es spezielle Ad Slots, die statisch bleiben, auch wenn keine Werbung erscheint.
3. Formulare oder Komponenten, die Inhalte pushen
Problem: Ein Newsletter-Formular lädt verspätet, ein Cookie-Hinweis blendet sich oben ein, und schon springt der sichtbare Inhalt.
Lösung:
Definiere Containerhöhen oder reserviere auch hier den voraussichtlich genutzten Platz von Anfang. Alternative: Nutze sogenannte progressive disclosure: Interaktive Elemente erscheinen durch sanfte Übergänge, ohne Layout-Verschiebung.
4. Lazy Loading ohne Platzhalter
Problem: Bilder oder Komponenten werden erst nachgeladen (lazy loading), aber ohne reservierten Platz. Dadurch springt die Seite, sobald der Inhalt da ist.
Lösung:
Setze Platzhalter (Skeletons) mit derselben Grösse oder verwende Techniken wie min-height, um Layout-Stabilität zu gewährleisten.
5. Webfonts und Flash of Unstyled Text (FOUT)
Problem: Wenn ein Webfont erst nachgeladen wird und der Browser vorher eine Ersatzschrift anzeigt, kann sich der Text später verschieben. Vor allem dann, wenn die Fallback-Schrift eine andere Breite oder Laufweite hat.
In diesem Beispiel wird die Schriftart «PT Sans Narrow» für die Titel und den Einleitungstext verwendet. Weil diese Schriftart sehr eng ist, werden die Texte – sobald die Schriftart geladen wurde, weniger Platz einnehmen.
Das kann dazu führen, dass ein Titel oder Absatz weniger Zeilen benötigt und somit weniger hoch ist.
Lösung:
Setze font-display: swap; bewusst ein – es sorgt dafür, dass der Text sofort sichtbar wird, was aus Performance-Sicht ein grosser Pluspunkt ist. Achte dabei aber darauf, dass die Fallback-Schrift möglichst ähnliche Abmessungen wie der Webfont hat (z. B. bei Zeilenumbrüchen oder Zeichenbreite), um Layout-Sprünge zu vermeiden.
Hier nutzen wir ebenfalls die Schriftart «PT Sans Narrow» für die Titel und den Einleitungstext.
Als Ersatz-Schriftart nutzen wir hier aber die «Arial Narrow», welche ähnlich eng ist, wie der eingesetzte Webfont. Damit kann das Hüpfen der Website verhindert werden.
Wenn das nicht möglich ist, kann auch font-display: optional oder ein gezieltes Preloading der Webfonts (z. B. via link rel="preload") helfen, die CLS-Auswirkungen zu minimieren.
Wie kann ich Cumulative Layout Shift testen?
Hier ein paar Tools und Methoden:
- PageSpeed Insights (Google): gibt CLS-Werte und konkrete Empfehlungen
- Lighthouse im Chrome DevTools: lokale Tests mit Metriken und Wasserfall
- GTmetrix: ergänzende Einblicke, insbesondere für Mobilgeräte
- required Checkup: Unser eigenes Tool, welches die PageSpeed API nutzt, aber noch viele andere und wertvolle Inputs liefert. Bzw. liefern wird, wenn wir es live gestellt haben.
Wie verhält sich WordPress in Bezug auf Cumulative Layout Shift?
TL;DR: Wenn man weiss, was man tut: sehr gut.
WordPress ist das weltweit meistgenutzte CMS und bietet von Haus aus einige solide Grundlagen, um visuelle Stabilität zu gewährleisten. Gleichzeitig hängt vieles von der konkreten Umsetzung im Theme oder Plugin ab. Wer WordPress richtig einsetzt, hat gute Voraussetzungen für einen niedrigen CLS-Score. Wer aber unachtsam arbeitet, kann auch schnell Probleme verursachen.
Die Vorteile von WordPress im Hinblick auf Cumulative Layout Shift
1. Automatisch generierte Bildgrössen und width/height-Attribute
Seit WordPress 5.5 wird bei Bildern im Editor automatisch das width– und height-Attribut ergänzt. Das ist ein grosser Vorteil, weil dadurch beim Laden des Bildes sofort klar ist, wie viel Platz es im Layout einnehmen wird – ganz ohne Springen.
Tipp: Nutzt man den WordPress Block Editor (Gutenberg), werden diese Attribute in der Regel automatisch gesetzt – vorausgesetzt, man verwendet die Bildfunktion korrekt und lädt keine willkürlich eingebetteten <img>-Tags im Custom HTML.
2. Core-Optimierungen für Performance und Barrierefreiheit
Der WordPress Core bringt zunehmend Verbesserungen bei der Performance mit: Lazy Loading von Bildern ist standardmässig aktiviert (loading="lazy"), Themes können mit theme.json gezielt das Layout beeinflussen, und moderne Bildformate wie WebP werden unterstützt – alles Dinge, die CLS positiv beeinflussen können.
Die Nachteile von WordPress im Hinblick auf CLS
So hilfreich WordPress auch ist: nicht alle Themes und Plugins sind automatisch CLS-freundlich. Viele Layoutverschiebungen entstehen durch:
- Themes, die keine festen Grössen oder Seitenverhältnisse für Bilder, Banner oder Komponenten vorgeben. Besonders problematisch: Slider, Hero-Sektionen oder dynamische Header ohne klare Höhenangaben.
- Plugins, die Inhalte nachträglich einfügen – etwa Cookie-Banner, Formulare oder Popups – ohne dabei Platz zu reservieren oder flüssige Übergänge zu nutzen.
- Externe Skripte, die über Plugins eingebunden werden und das Layout unvorhersehbar verändern können.
Genau deshalb entwickeln wir unsere WordPress-Themes immer komplett selbst – massgeschneidert, mit maximaler Kontrolle über das Verhalten im Frontend. Und auch bei Plugins setzen wir auf strenge Qualitätskontrollen: Nur was stabil, performant und visuell zuverlässig ist, darf rein. So stellen wir sicher, dass nicht nur die Inhalte gut aussehen – sondern dass sie auch dort bleiben, wo sie hingehören. Ohne Springen. Ohne Frust. Mit messbar besserem Erlebnis.
Fazit: Visuelle Stabilität ist kein Luxus
CLS ist mehr als eine technische Kennzahl – es geht um das Nutzererlebnis, also die User Experience. Eine Webseite, bei der nichts springt, fühlt sich schnell, stabil und professionell an. Wer hingegen mit ruckelnden Inhalten kämpft, vergrault nicht nur Besucher:innen, sondern auch potenzielle Kundschaft.
TL;DR – Die wichtigsten Tipps gegen Cumulative Layout Shift
- Bilder und Videos immer mit fester Grösse einbauen
- Platz für Banner, Formulare und Widgets reservieren
- Lazy Loading, ja: aber bitte mit Platzhalter oder festem Container
- Cumulative Layout Shift regelmässig mit Tools prüfen
- Webfonts mit passenden Fallbacks kombinieren
Komplexere Fälle? Wir helfen gerne
Natürlich gibt es auch komplexere Ursachen für einen schlechten CLS-Score: JavaScript-getriebene Layouts, reaktive Frameworks oder Third-Party-Skripte mit unvorhersehbarem Verhalten.
Wenn du das Gefühl hast, dass deine Seite optisch unruhig wirkt – oder du einfach mal einen Check möchtest, wie stabil dein Layout ist – melde dich gerne bei uns. Wir helfen, das Nutzererlebnis messbar zu verbessern.
Meldet euch bei uns! Wir sind immer interessiert an neuen Herausforderungen.
FAQ: Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) misst, wie stark sich Inhalte auf einer Webseite während des Ladens unerwartet verschieben. Es ist eine wichtige Kennzahl für die Nutzererfahrung und gehört zu Googles Core Web Vitals.
Cumulative Layout Shift beeinflusst die Nutzererfahrung erheblich. Springende Inhalte führen zu Fehlklicks, Frustration und können sogar das Google-Ranking verschlechtern. Eine stabile Website wirkt professioneller und hält Besucher länger auf der Seite.
Ein Cumulative Layout Shift-Wert von 0,1 oder weniger ist sehr gut. Werte zwischen 0,1 und 0,25 sollten verbessert werden. Alles über 0,25 ist kritisch und schadet dem Nutzererlebnis stark.
Die häufigsten Ursachen sind Bilder ohne definierte Grösse, nachgeladene Werbung oder Banner, Webfonts, die erst später laden, Formulare oder Popups ohne reservierten Platz und Lazy Loading ohne Platzhalter.
Setze immer width und height Attribute bei Bildern. Das reserviert den Platz im Layout, auch wenn das Bild noch lädt. Alternativ kannst du CSS mit aspect-ratio für responsive Bilder verwenden.
Reserviere von Anfang an Platz für Werbebanner, auch wenn diese erst später laden. Verwende feste Container-Grössen oder Ad Slots mit definierten Abmessungen, damit nichts verrutscht.
Wähle Fallback-Schriften, die ähnliche Abmessungen wie deine Webfonts haben. Verwende Sie font-display: swap und preloade wichtige Schriften, um das Laden zu beschleunigen.
WordPress bietet seit Version 5.5 automatische width/height-Attribute für Bilder und integriertes Lazy Loading. Die Cumulative Layout Shift-Performance hängt jedoch stark vom verwendeten Theme und den Plugins ab.
Verwende Platzhalter oder setze min-height für Container. So bleibt der Platz reserviert, auch wenn Inhalte erst später laden. Das verhindert das Springen der Website.
Problematisch sind oft Cookie-Banner ohne Platzreservierung, Slider-Plugins ohne feste Höhen, Social Media Widgets und Formulare, die nachträglich eingebunden werden.
Mobile Geräte sind besonders anfällig für Cumulative Layout Shift. Achte auf responsive Bilder mit korrekten Grössenangaben, touch-optimierte Button-Grössen und vermeide zu viele dynamische Elemente.
Ja, Cumulative Layout Shift ist seit 2021 ein offizieller Ranking-Faktor bei Google. Websites mit schlechten Cumulative Layout Shift-Werten können in den Suchergebnissen benachteiligt werden, besonders bei mobilen Suchanfragen.
Teste Cumulative Layout Shift regelmässig, besonders nach Theme- oder Plugin-Updates, beim Hinzufügen neuer Inhalte oder nach Design-Änderungen. Monatliche Tests sind für die meisten Websites ausreichend.
