In Kürze: Cumulative Layout Shift (CLS)
Der Cumulative Layout Shift (CLS) ist ein wichtiger Wert der Core Web Vitals von Google, der die visuelle Stabilität einer Webseite während des Ladevorgangs misst. Ein niedriger CLS-Wert verbessert die Benutzererfahrung erheblich, da er verhindert, dass sich Elemente unerwartet verschieben.
Erklärung: Cumulative Layout Shift (CLS)
Der Cumulative Layout Shift (CLS) ist ein Kennwert, der die visuelle Stabilität einer Webseite während des Ladeprozesses beschreibt. Er zeigt an, wie stark sich Elemente auf einer Seite verschieben, ohne dass der Nutzer Einfluss darauf hat. Ein niedriger CLS-Wert bedeutet, dass die Webseite für den Anwender benutzerfreundlicher ist.
Layout-Probleme auf Webseiten
Viele Webseiten laden ihren Inhalt und formatieren ihn mit CSS (Cascading Style Sheets), nur um anschließend das Layout zu verändern. Dies kann zu unerwünschten Klicks führen, wenn beispielsweise ein Button, den der Nutzer anklicken möchte, durch ein nachladendes Werbeelement verschoben wird. Solche visuellen Instabilitäten sind ärgerlich und beeinträchtigen die Benutzererfahrung.
Was ist ein guter CLS-Score?
Im Gegensatz zu anderen Metriken der Core Web Vitals, wie First Input Delay (FID) und Largest Contentful Paint (LCP), wird der CLS-Wert nicht in Millisekunden gemessen. Google stuft einen CLS-Wert von maximal 0,1 als gut ein. Werte zwischen 0,1 und 0,25 gelten als mäßig, während alles über 0,25 als schlecht betrachtet wird. Ein niedriger Wert verbessert die Gesamtbewertung der Seite in der Page Experience.
Wie wird der CLS gemessen?
Google ermittelt den CLS durch die Multiplikation der Variablen „Impact Friction“ und „Distance Friction“. „Impact Friction“ bezieht sich auf die Verschiebung eines Elements in Relation zur genutzten Bildschirmfläche. Beispielsweise würde ein Element, das 40 % des Bildschirms einnimmt und sich um 20 % verschiebt, einen Score von 0,6 ergeben. „Distance Friction“ misst die größte Distanz, die ein Element bewegt wurde. Wenn sich ein Element um 30 % verschiebt, ergibt dies einen Score von 0,3. Der endgültige CLS-Wert wird durch die Multiplikation dieser beiden Werte berechnet.
Optimierung des Cumulative Layout Shift
Um den CLS-Wert zu verbessern, sollten feste Größen für Gestaltungselemente verwendet werden, anstatt variable Größen. Weitere Tipps zur Optimierung des CLS finden Sie in unserem speziellen Ratgeber. Tools wie das PageSpeed Insights von Google können ebenfalls helfen, den CLS-Wert zu analysieren und Verbesserungsvorschläge zu liefern.
« Back to Glossary Index