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)

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

Senior SEO Manager, SEO Scientist

Sie interessieren sich für das Thema "Cumulative Layout Shift (CLS)"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Steffen Pfeiffer kostenfrei beraten.

Jetzt Kontakt aufnehmen