CLS: Cumulative Layout Shift
Was ist der CLS?
CLS ist die Abkürzung für “Cumulative Layout Shift“ – also kumulative Layout-Verschiebung. Diese Metrik ist Teil der sogenannten „Core Web vitals“.
Um genau zu sein, handelt es sich dabei nicht um einen Wert der die Geschwindigkeit einer Website betrifft, sondern ist ausschließlich eine Qualitätsfaktor der User Experience.
Ändert sich die Größe eines Elements auf der Website, und springt infolgedessen der Inhalt unter diesem Element, so stellt dies eine Layout-Verschiebung dar. Dies soll vermieden werden und deswegen gibt es diesen Wert.
Um eine guter User-Experience zu gewährleisten, sollte der CLS-Wert unter 0,1 liegen.
CLS-Wert-Bereiche
| < 0,1s: Gut | 0,1s – 0,25s: Verbesserungswürdig | > 0,25s: Schlecht |
Wie wird der CLS-Wert berechnet?
Der CLS-Wert ergibt sich aus der Mulitplikation von Impact-Fraction und Distance-Fraction.
Impact-Fraction Definition
Der Wert Impact Fraction, berechnet sich aus der prozentuellen Höhe des Elements zum Viewport + plus der prozentuellen Verschiebung zum Viewport.
Beispiel: ein Element nimmt 50% des Viewports (Bildschirmgröße eines Smartphones) ein und das Element verschiebt sich zusätzlich um 15%, somit macht der Impact-Fraction-Wert 0.65 aus.
Distance Fraction Definition
Dieser Wert gibt an wie weit sich ein instabiles Element – also ein Element das springt – bewegt hat. Geteilt durch die höchste Dimension eines Viewports (Höhe oder Breite). Beispielsweise 0.11 – es hat sich um 11% im Verhältnis zum Viewport bewegt.
Folgt man dem Bespiel, so ergibt das einen CLS-Wert von: 0.65 * 0.11 = 0.0715.
Der CLS-Wert wäre somit unter 0.1. Somit in einem guten Bereich und fast ideal.
Wie kann der CLS gemessen werden?
Folgende Web-Tools enthalten in der Analyse den CLS-Wert:
Wie kann die Layout-Verschiebung entstehen?
- Ein Bild ohne Dimensions-Angaben
- Ads, Embeds und iframes ohne Dimensionsangaben
- Dynamisch erzeugter Inhalt
- Webfonts die FOIT/FOUT erzeugen: ist eine verzögert geladene Schriftart breiter als die Standard-Schriftart, so kann es passieren, dass ein Wort in eine neue Zeile springt und dadurch ein nachfolgendes Bild verschoben wird. So entsteht in diesem Fall ein negativer CLS-Wert.
- Aktionen die auf einen Netzwerk-Response warten bevor sie das DOM updaten
Quellen und weiterführende Links:
- https://web.dev/vitals/
- https://www.seonative.de/core-web-vitals/
- https://web.dev/cls/
- https://www.agentur-kreativdenker.de/cumulative-layout-shift-cls/#Cumulative-Layout-Shift-errechnen-messen