call Kontakt
speed Optimierungstipps

Cumulative Layout Shift (CLS) : Warum sich Webseiten während des Ladens verschieben

Der Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Webseite während des Ladens. Wir zeigen die häufigsten Ursachen für einen schlechten CLS – und konkrete Lösungen für TYPO3-Websites.

history Letzte Änderung: 21.08.2026

Was ist der Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Webseite. Er beschreibt, wie stark sich sichtbare Inhalte während des Ladevorgangs unerwartet verschieben.

Jeder kennt das Problem: Man möchte gerade auf einen Button klicken – und plötzlich springt die Seite, weil ein Bild, eine Werbung oder ein Cookie-Banner nachgeladen wird. Statt des gewünschten Buttons klickt man versehentlich auf etwas anderes. Genau dieses Verhalten bewertet der CLS.

Je niedriger der CLS-Wert, desto stabiler wirkt eine Website.

flag

Zielwerte: Gut: bis 0,1 · Verbesserungswürdig: 0,1–0,25 · Schlecht: über 0,25.

search Ursachen

Die häufigsten Ursachen für einen schlechten CLS

  1. Bilder ohne feste Abmessungen: Werden für Bilder keine Breite und Höhe definiert, weiß der Browser zunächst nicht, wie viel Platz reserviert werden muss. Sobald das Bild geladen ist, verschiebt sich der gesamte Seiteninhalt.

    Optimierung:

    • width und height angeben
    • Responsive Images mit korrekten Seitenverhältnissen verwenden

  2. Nachträglich eingeblendete Cookie-Banner: Viele Consent-Manager schieben den gesamten Seiteninhalt nach unten, sobald das Banner erscheint.

    Optimierung:

    • Banner als Overlay anzeigen
    • Platz bereits beim Seitenaufbau reservieren

  3. Dynamisch nachgeladene Inhalte: Newsletter-Hinweise, Werbebanner oder Hinweise auf Aktionen werden häufig erst nach dem Seitenaufbau eingefügt.

    Optimierung:

    • Platz im Layout reservieren
    • Elemente nicht oberhalb bereits sichtbarer Inhalte einfügen

  4. Webfonts verursachen Layoutsprünge: Wird zunächst eine Standardschrift angezeigt und später die eigentliche Webfont geladen, ändern sich häufig Zeilenumbrüche und Abstände.

    Optimierung:

    • font-display: swap
    • ähnliche Fallback-Schriften verwenden
    • Fonts lokal hosten

  5. Werbeanzeigen und externe Inhalte: Banner, YouTube-Videos, Google Maps oder Social-Media-Posts werden oft erst nachgeladen und verändern anschließend das Layout.

    Optimierung:

    • feste Containergrößen definieren
    • Platz bereits vor dem Laden reservieren

  6. Animationen verändern das Layout: Animationen, die Breite, Höhe oder Position verändern, können sichtbare Layoutverschiebungen verursachen.

    Optimierung:

    • bevorzugt transform und opacity animieren
    • Layout-Eigenschaften möglichst nicht animieren
terminal TYPO3-Praxis

Typische CLS-Probleme bei TYPO3-Websites

Bei TYPO3 entstehen Layoutverschiebungen häufig durch die Kombination verschiedener Inhaltselemente und Extensions.

  1. Bilder ohne definierte Größe: Werden Bilder individuell im Fluid-Template ausgegeben, fehlen manchmal width- und height-Attribute.

    Lösung:

    • TYPO3 ImageViewHelper korrekt verwenden
    • Bildabmessungen automatisch ausgeben

  2. Inhaltselemente werden nachgeladen: News-Listen, Akkordeons oder weitere Inhaltselemente werden teilweise erst per JavaScript erzeugt.

    Lösung:

    • möglichst serverseitig rendern
    • Platz im Layout reservieren

  3. Cookie-Consent-Lösungen: Consent-Manager gehören zu den häufigsten Ursachen für einen schlechten CLS.

    Lösung:

    • Overlay statt Verschieben des Seiteninhalts
    • feste Höhe für Banner reservieren

  4. Videos und Karten: YouTube, Vimeo oder Google Maps werden häufig ohne Platzhalter eingebunden.

    Lösung:

    • Container mit festem Seitenverhältnis verwenden
    • Lazy Loading mit reservierter Fläche kombinieren

  5. Dynamische Inhaltselemente: Formulare, Accordions oder personalisierte Inhalte verändern teilweise nachträglich ihre Höhe.

    Lösung:

    • Containergrößen vorab definieren
    • Änderungen möglichst unterhalb des sichtbaren Bereichs durchführen

So analysieren Sie den CLS

Der CLS lässt sich einfach mit folgenden Werkzeugen analysieren:

  • Google PageSpeed Insights
  • Lighthouse in den Chrome DevTools
  • Chrome Performance Panel
  • Web Vitals Extension für Chrome

Besonders hilfreich ist dabei die Layout-Shift-Visualisierung in den Chrome DevTools. Sie zeigt exakt, welche Elemente sich verschoben haben und wodurch der CLS entstanden ist.

Fazit

Ein guter CLS sorgt dafür, dass Besucher eine Website als ruhig, hochwertig und zuverlässig wahrnehmen. Unerwartete Layoutsprünge verschlechtern nicht nur die Benutzererfahrung, sondern können auch zu Fehlklicks und einer höheren Absprungrate führen.

Bei TYPO3-Websites lassen sich die meisten CLS-Probleme durch korrekt dimensionierte Bilder, reservierte Platzhalter für dynamische Inhalte, lokal gehostete Webfonts und eine saubere Einbindung von Consent-Managern sowie externen Medien vermeiden. Schon kleine Optimierungen können den CLS-Wert deutlich verbessern und die wahrgenommene Qualität einer Website erheblich steigern.

Bereit für einen stabileren CLS?

Wir analysieren den CLS Ihrer TYPO3-Website kostenlos und zeigen konkrete Optimierungsmaßnahmen.

chat Kostenlose Beratung