Cumulative Layout Shift (CLS) verstehen und optimieren

cumulate layout shift

In der Welt des SEO rücken mit der Einführung der Core Web Vitals drei neue Kennzahlen ins Rampenlicht. Neben dem First Input Delay und dem Largest Contentful Paint spielt der Cumulative Layout Shift (CLS) eine entscheidende Rolle. Seit Juni 2021 sind die Core Web Vitals ein bedeutender Rankingfaktor für die mobile Suche, während sie seit Februar 2022 auch für die Desktop-Suche relevant sind.

Was ist der Cumulative Layout Shift?

Der Cumulative Layout Shift (CLS) ist eine Kennzahl des SEO, die die Anzahl der Layout-Verschiebungen innerhalb eines Ladevorgangs misst. Insbesondere unerwartete Verschiebungen der Webseitenansicht beeinträchtigen die Benutzererfahrung erheblich.

Um das Konzept des Cumulative Layout Shift zu veranschaulichen, nehmen wir an, ein Benutzer öffnet eine Webseite und der gewünschte Inhalt wird angezeigt. Werden dann zusätzliche Werbeanzeigen eingefügt, kann sich das Layout verschieben. Wenn dieses Phänomen häufig auftritt, ist es wahrscheinlich, dass der Benutzer die Seite nicht erneut besuchen möchte, was von Google negativ bewertet wird.

Wie wird der CLS gemessen?

Die unerwartete Änderung des Cumulative Layout Shifts kann berechnet werden. Dabei werden zwei unterschiedliche Bewegungen erfasst:

  • Impact Fraction: Zeigt den prozentualen Anteil des sichtbaren Fensters, der von der Bewegung betroffen ist.
  • Distance Fraction: Zeigt die Entfernung, die ein bewegliches Element im sichtbaren Bereich zurückgelegt hat, abhängig von der Bildschirmgröße.

Die Formel zur Messbarkeit des Cumulative Layout Shifts ergibt sich aus der Multiplikation von Impact Fraction und Distance Fraction.

Faktoren, die den CLS beeinflussen

Die Ursachen für einen schlechten Cumulative Layout Shift sind vielfältig und gehen über bloße Werbeeinblendungen hinaus. Entwicklungen an der Website und im Design spielen ebenfalls eine große Rolle. Zu den Hauptfaktoren gehören:

  • Bildmaterial: Variable Abmessungen von Bildern und Grafiken im responsiven Design.
  • Werbeeinblendungen: Ads mit festgelegten Maßen, die sich von der Bildschirmgröße unterscheiden können.
  • Dynamischer Content: Pop-ups, Kontaktformulare und andere interaktive Elemente, die nach dem Seitenaufruf geladen werden.
  • Animationen: Nachlässig programmierte Animationen, die zu Layout-Verschiebungen führen können.
  • Schriftarten: Einige Schriftarten, die erst beim Laden der Webseite aufgebaut werden und das Layout beeinflussen können.

CLS optimieren: Tipps und Tricks

Mit kleinen Anpassungen lässt sich der CLS verbessern und der Messwert verringern. Hier sind einige Optimierungstipps:

  • Bilder: Festlegung der Aspect Ratio im CSS für schnellere Ladezeiten von Fotos und Grafiken.
  • Werbeeinblendungen: Ad-Container im Vorfeld einen statischen Platz zuweisen, um Layout-Verschiebungen zu vermeiden.
  • Einbettungen: Iframes oder Platzhalter für Videos mit Platzreservierungen versehen, um Nachladen zu verhindern.
  • Dynamische Inhalte: Mit Platzhaltern arbeiten, um den Layout Shift zu minimieren.
  • Benutzerdefinierte Fonts: Nutzung der Font Loading API, um Ladezeiten zu verkürzen.

Bedeutung des CLS für die SEO

Der Cumulative Layout Shift ist mehr als nur eine Kennzahl – er beeinflusst die gesamte Benutzererfahrung und damit auch das organische Ranking einer Website. Ein niedriger CLS-Score verbessert die User Experience und trägt somit maßgeblich zur SEO-Optimierung bei.

In einer Zeit, in der mehr als die Hälfte aller Websites von diesem Rankingfaktor betroffen sind, ist die Optimierung des Cumulative Layout Shifts ein wichtiger Schritt, um das organische Ranking nachhaltig zu verbessern.

Unser Experte
Matthias Eggert ist seit über 14 Jahren im Online Marketing tätig und seit 6 Jahren Head of Online Marketing bei DIXENO . DIXENO ist an den Standorten Arnsberg, Paderborn, Hamburg und Berlin vertreten und verfügt über mehr als 50 Mitarbeiter. Neben seiner Tätigkeit als Head of Online Marketing ist Matthias Gründer von onlinemarketingberatung.de – Cruising Media. Sein Fokus liegt auf allen SEO relevanten Themen und er unterstützt Kunden von der Konzeption der richtigen Strategie, über die technische Umsetzung, bis zur detaillierten Analyse.