Cumulative Layout Shift (CLS)
Misst wie stark sich Seiteninhalte beim Laden visuell verschieben. Ziel: unter 0,1. Hauptverursacher sind Bilder ohne Dimensionsangabe.
Cumulative Layout Shift, abgekürzt CLS, ist einer der drei Core Web Vitals und misst die visuelle Stabilität einer Seite während des Ladens.
Was Layout Shifts sind
Sie kennen das: Sie wollen auf einen Button klicken, eine Sekunde später lädt darüber eine Werbung nach und Sie klicken aus Versehen auf die Anzeige. Das ist ein Layout Shift. Google bewertet die Summe aller solcher Verschiebungen während der gesamten Lebensdauer der Seite, nicht nur beim ersten Laden.
Schwellenwerte
Ein CLS-Wert unter 0,1 ist gut. Zwischen 0,1 und 0,25 ist verbesserungswürdig. Über 0,25 ist schlecht. Der Wert ist dimensionslos und ergibt sich aus dem Anteil des betroffenen Viewports mal der Distanz der Verschiebung.
Häufige CLS-Verursacher
Bilder ohne width und height Attribute. Der Browser kennt die Dimensionen erst nach dem Download und muss dann das Layout neu berechnen. Web-Fonts ohne fallback-Anpassung. Wenn der Fallback-Font breiter ist als der Custom-Font, springt der Text nach dem Laden. Banner und Cookie-Hinweise die nachträglich erscheinen und Inhalte nach unten drücken. Dynamische Werbung mit variabler Höhe.
Wie Sie CLS vermeiden
Auf jedem img-Tag width und height setzen, auch bei responsivem Layout. Der Browser leitet daraus das Seitenverhältnis ab und reserviert Platz. Für Web-Fonts size-adjust und ascent-override verwenden, damit der Fallback genauso viel Platz braucht wie das echte Schriftbild. Werbe-Slots in feste Container packen. Cookie-Banner als overlay über den Inhalt legen, nicht als Block der ihn verschiebt.
Verbundene Begriffe
Webseite konkret verbessern?
Wir analysieren Ihre Seite und sagen Ihnen ehrlich was sich lohnt zu fixen. Erstgespräch kostenfrei.
Kostenloses Erstgespräch