Kontakt aufnehmen
Steffen Pfeiffer

Steffen Pfeiffer

Senior SEO Manager, SEO Scientist
+49 (345) 9639-6616

    Ich stimme der Verwendung meiner Daten zur Bereitstellung der angeforderten Informationen zu.

    Cumulative Layout Shift (CLS)

    Stand: 15.08.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

     

    Steffen Pfeiffer
    Über den Autor
    Steffen Pfeiffer
    Steffen ist unser Senior SEO Manager und SEO Scientist. Seit 2014 im Bereich SEO tätig und seit 2018 bei Löwenstark, bringt Steffen seine Leidenschaft für Automatisierung, Webseitentechnik, Ladezeiten, KI, und Onpage SEO ein. Er ist besonders versiert in den Bereichen SEO Skalierungs-Strategien, strukturierte Daten, SERP Optimierung und Local SEO. Mit seinem umfassenden Wissen entdeckt Steffen kontinuierlich neue Strategien und Wege, um unsere Kunden auf dem neuesten Stand der Suchmaschinenoptimierung zu halten und ihre Online-Präsenz zu maximieren. Seine Expertise sorgt dafür, dass Löwenstark-Kunden stets die besten Ergebnisse erzielen.

     

    Was ist Cumulative Layout Shift CLS?

    Der Cumulative Layout Shift (CLS) ist die allmähliche Veränderung der Position des Inhalts auf einer Seite im Laufe der Zeit. Dies kann auf eine Reihe von Faktoren zurückzuführen sein, vor allem Änderungen im Design oder im Nutzerverhalten.
    Ein häufiges Beispiel für CLS ist, wenn Benutzer anfangen, eine Seite nach unten zu scrollen, anstatt sich zu weiteren Seiten durchzuklicken. Dies kann dazu führen, dass die wichtigen Inhalte auf der Seite allmählich nach unten wandern und schließlich aus dem Blickfeld verschwinden. Dies kann sowohl für die Nutzer als auch für die Betreiber der Website ein Problem darstellen, da den Nutzern wichtige Informationen entgehen können, und es kann sich auch auf die Platzierung der Website in den Suchmaschinen auswirken.

     

    Auch interessant:

     

    Langjährige Erfahrung, engagierte Experten und starke Kampagnen zahlen sich aus:
    4.7
    star rating star rating star rating star rating star rating
    powered by Google
    Ihr Kontakt zu uns
    Adresse
    Löwenstark Digital Group GmbH
    Damm 17,
    38100 Braunschweig

      Jetzt Kontakt aufnehmen

      * Pflichtfeld
      Ich stimme der Verwendung meiner Daten zur Bereitstellung der angeforderten Informationen zu. Die Löwenstark Digital Group GmbH und verbundene Unternehmen können mich telefonisch, per E-Mail oder Post über Neuigkeiten zu Online-Marketing-Themen und Umfragen zur Kundenzufriedenheit informieren. Meine Kontaktdaten dürfen zu diesem Zweck an verbundene innerhalb der Unternehmensgruppe weitergegeben werden. Ich bin damit einverstanden, dass die Öffnungsrate von Mailings erfasst wird. Die Einwilligung kann jederzeit über den Abmeldelink im Mailing oder unter kontakt@loewenstark.com widerrufen werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.