Kontakt aufnehmen

Arne Chananewitz

Head of Search Engine
Optimization (SEO) Braunschweig
+49 531 213605527

    Ich habe die Datenschutzerklärung gelesen und erkläre mich damit einverstanden, dass die von mir im Kontaktformular eingegebenen Daten elektronisch erhoben und gespeichert werden.

    Cumulative Layout Shift (CLS)

    Stand: 07.04.2022

    Mit der Implementierung der Core Web Vitals geraten drei neue Kennzahlen der Suchmaschinenoptimierung besonders in den Fokus. Eine davon ist – neben dem Fist Input Delay und dem Largest Contentful Paint – der Cumulative Layout Shift (CLS). Seit Juni 2021 sind die Core Web Vitals ein wichtiger Rankingfaktor in der mobilen Suche, ab Februar 2022 wurden sie auch für die Desktop-Suche relevant.

     

    Definition Cumulative Layout Shift (CLS)

    Die Kennzahl der Suchmaschinenoptimierung beschreibt die Anzahl der Layout-Verschiebungen innerhalb eines Ladevorgangs. Vor allem ungewollte Verschiebungen der Webseitenansicht beeinträchtigen die User Experience.

    Um den Cumulative Layout Shift zu verbildlichen, stellen wir uns vor, ein User öffnet eine Website und der gewünschte Inhalt erscheint. Werden dann zusätzliche Werbeanzeigen eingeblendet, verschiebt sich mitunter das Layout. Tritt der Zustand häufiger auf, ist es wahrscheinlich, dass der User von erneuten Besuchen absieht, weswegen Google diese Praxis schlechter bewertet.

     

    Messbarkeit des CLS

    Die unerwartete Änderung des Cumulative Layout Shifts kann berechnet werden. Liegt eine Änderung vor oder verschiebt sich ein Element in einen anderen Frame, werden zwei unterschiedliche Bewegungen registriert.

    • Impact Fraction: zeigt den prozentualen Anteil, welcher Bereich des sichtbaren Fensters von der Bewegung betroffen ist
    • Distance Fraction: zeigt die Entfernung – in Abhängigkeit von der Bildschirmgröße –, die ein bewegliches Element im sichtbaren Bereich zurückgelegt hat

    Die Formel zur Messbarkeit des Cumulative Layout Shifts ergibt sich daraus wie folgt:

    Impact Fraction * Distance Fraction = Layout Shift Score

     

    Faktoren zur Beeinflussung

    Die Ursachen eines schlechten Cumulative Layout Shifts sind vielfältig. Allein die Annahme, dass es ausschließlich durch Werbeeinblendungen zu Verschiebungen im Layout kommt, ist nicht richtig. Tatsächlich spielen auch Entwicklungen an der Website und dem Design eine große Rolle.

    Bildmaterial

    Bei Bildern und Grafiken wurden mit der Einführung des responsiven Designs keine Größen mehr festgelegt. Sie passen sich der Bildschirmgröße an und sind in ihren Abmessungen variabel. Erst beim Laden der Webseite kann der Browser die benötigten Abmessungen ermitteln.

    Werbeeinblendungen

    Ads haben meist festgelegte Maße, die sich von der Bildschirmgröße unterscheiden können. Damit kommt es beim Öffnen zu einer Verschiebung des Contents, was den Cumulative Layout Shift beeinflusst. Das betrifft auch Elemente, die bei der Designerstellung ohne feste Größen integriert werden.

    Dynamischer Content

    Pop-ups, Kontaktformulare oder andere leadrelevante Elemente werden auf Websites eingebaut, um eine Interaktion mit dem User zu ermöglichen. In der Regel laden sie nach dem Webseitenaufbau nach und verschieben so den festgelegten Content.

    Animationen

    Nachlässig programmierte Animationen sorgen für ärgerliche Layout-Verschiebungen. Häufig muss ein Reflow stattfinden, der den Browser und das animierte Element bis zu 60-mal in der Sekunde neu aufbaut. Das ist jedoch teuer und verzögert den gesamten Aufbau der Webseite.

    Fonts

    Einige Schriftarten werden erst beim Laden der Webseite aufgebaut und führen zu einer Verschiebung des Layouts. Das kann den Cumulative Layout Shift beeinflussen, da sich die Inhalte anschließend verändern. Einige Schriftarten sorgen zudem dafür, dass sich der Content erst dann vollständig lädt.

     

    Guter oder schlechter CLS?

    Vor allem für ältere Websites stellt der Cumulative Layout Shift ein Problem dar. Nicht immer entdecken SEO-Experten alle zu korrigierenden Punkte auf den ersten Blick.

    Der Rankingfaktor aus den Core Web Vitals wird in einem Score gemessen. Es handelt sich um einen extra dafür geschaffenen Wert, CLS drückt sich nicht in Sekunden oder Millisekunden aus. Stattdessen hat Google einen klaren Wert festgelegt, der den Cumulative Layout Shift in unterschiedliche Abstufungen unterteilt. Tatsächlich gilt: Je niedriger der Score, desto besser ist das Ergebnis des Rankingfaktors für die Website.

    • Gut: maximal 0,1
    • Mäßig: 0,1 bis 0,25
    • Schlecht: ab 0,25

     

    Cumulative Layout Shift optimieren

    Bereits mit kleinen Anpassungen lässt sich der CLS verbessern und der Messwert verringern. Innerhalb der hauptsächlich verantwortlichen Merkmale gibt es einige Tipps und Tricks.

    Bilder

    Damit Fotos und Grafiken schneller laden, empfiehlt es sich, das Seitenverhältnis – die Aspect Ratio – im CSS festzulegen. Finden Browser Angaben wie 16:9 oder 4:3, können sie den benötigten Platz bereits reservieren und der Ladevorgang verbessert sich. Hier ist es ratsam, sich nicht nur auf eine Verhältnisangabe zu beschränken.

    Ads

    Werbeeinblendungen sind für Layout-Verschiebungen im Seitenaufbau maßgeblich verantwortlich. Der Content verschiebt sich in der Folge aus dem sichtbaren Bereich und verschlechtert die User Experience. Entgegenwirken lässt sich dem, wenn dem Ad-Container im Vorfeld ein statischer Platz zugewiesen wird. Dabei ist allerdings zu beachten, dass bei einer kleineren Anzeige ein freier Platz zwischen Ad und Webseiten-Content entstehen kann. Die Werbung sollte zudem nicht direkt am oberen Sichtfeld angebracht werden.

    Einbettungen

    Iframes oder Platzhalter für YouTube-Videos sorgen häufig für ein Nachladen, da auch hier in erster Linie eine Größenbestimmung evaluiert wird. Mit einer Platzreservierung passt sich das Element im Ladevorgang an und verhindert das Verschieben des Layouts.

    Dynamische Inhalte

    Interaktiver Content ist auf Webseiten zur Resonanzermittlung wichtig. Wie schon bei Einbettungen und Ad-Elementen sollte mit Platzhaltern gearbeitet werden, um den Cumulative Layout Shift auf einem niedrigen Score zu halten. Damit können die Pop-ups weiterhin eingebunden werden und schaden der User Experience nicht.

    Benutzerdefinierte Fonts

    Hier kann mit einer Fallback-Font eine Alternative geladen werden, die erst bei vollständigem Ausführen im richtigen Design angezeigt wird. Alternativ bleibt der Text so lange unsichtbar, bis das Rendern abgeschlossen ist. Beide Optionen führen zu einem schlechten CLS. Mit der Nutzung der Font Loading API werden die Ladezeiten verkürzt. Durch den zusätzlichen Befehl <link rel=preload> können benutzerdefinierte Schriftarten bereits vorab geladen werden.

     

    Bedeutung des CLS für die SEO

    Nachladende Elemente sind für den User ein Ärgernis. In manchen Fällen verzögert sich die gesamte Ladezeit oder der Leser beginnt, einen Text zu lesen, und wird von einer Einblendung unterbrochen. Auch ein Klick auf einen Button kann infolge einer Überlagerung plötzlich auf einer ganz anderen Seite enden. Mehr als die Hälfte aller existierenden Websites sind von dem Rankingfaktor betroffen und müssen Stück für Stück optimiert werden. Nach und nach wird sich der CLS verbessern und beeinflusst so das gesamte organische Ranking unmittelbar. Ein guter Cumulative Layout Shift-Score optimiert somit die wichtige User Experience bei Webseiten, die wiederum auch Auswirkungen auf die SEO hat.

     

    Hier geht es zum Whitepaper: Core Web Vitals

     

    Über den Autor
    Arne Chananewitz
    Arne Chananewitz ist Head of SEO der Löwenstark Online-Marketing GmbH. Als gelernter Fachinformatiker für Anwendungsentwicklung schlägt sein Herz für Blogs, SEO, Games und Hardware.

     

    Auch interessant:
    Ihr Kontakt zu uns
    Löwenstark Digital Group GmbH
    Petzvalstraße 38,
    38104 Braunschweig
    Jetzt kostenlose Analyse anfordern

      * Pflichtfeld