CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) ist eine der drei Core-Web-Vitals-Metriken von Google und misst die visuelle Stabilität einer Webseite während des Ladevorgangs. Es beschreibt, wie sehr sich Seitenelemente (Text, Buttons, Bilder) während des Ladens unerwartet verschieben. Ein hoher CLS-Wert bedeutet schlechte Nutzererfahrung: Nutzer versuchen auf einen Button zu klicken und der Button rutscht plötzlich weg – frustrierend und schädlich für die Conversion-Rate. CLS beeinflusst direkt die Ranking-Position in Google.

Technisch entsteht Layout Shift, wenn Inhalte nachträglich nachgeladen werden: Bilder ohne Höhen-Attribut, eingebettete Videos, Fonts, die sich noch laden, oder Skripte, die das DOM verändern. Google misst CLS während der ersten 3 Sekunden nach Seiteninteraktion des Nutzers. Ein CLS-Wert unter 0,1 ist „gut”, 0,1 bis 0,25 ist „verbesserungsbedürftig”, über 0,25 ist „schlecht”. Tools wie Lighthouse, PageSpeed Insights oder Web Vitals Chrome-Extension zeigen exakt an, welche Elemente für Layout Shift verantwortlich sind.

In der Praxis lässt sich CLS durch mehrere Maßnahmen senken: Immer width- und height-Attribute für Bilder und Videos angeben (so behält der Browser Platz reserviert), Web Fonts mit font-display: swap laden (damit Text sofort sichtbar wird), asynchrones JavaScript vermeiden und Reserve-Space für dynamisch geladene Inhalte planen. Ein häufiger Übeltäter ist Google Ads und Analytics-Code, der Layout Shift verursacht – dieser sollte asynchron geladen werden. Besonders auf Mobil-Geräten ist CLS kritisch, da hier weniger Platz vorhanden ist.