Der Cumulative Layout Shift beschreibt das Verschieben von Elementen im sichtbaren Bereich des Displays (Viewport). Häufig ist hier nachladende Werbung ursächlich, Bilder oder auch Web-Fonts. Prinzipiell kann aber alles, was nach dem Ausliefern des HTMLs vom Server in die Seite eingreift, Einfluss auf den CLS-Wert haben.
Unterschiede in RUM- und Lab-Data
CLS wird entgegen vieler anderer Metriken nicht zu einem bestimmten Zeitpunkt gemessen sondern die gesamte Session über, also bis zum Unload-Event der Seite. Damit ist für CLS nicht nur eine Optimierung des First View von Nöten sondern der gesamten Seite. Wichtig dabei: Bewertet wird nur, was im sichtbaren Bereich passiert. Wenn also drei Screen-Höhen unterhalb des aktuell sichtbaren Bereichs Inhalt irgendwo zwischengeschoben wird, hat das keinen Einfluss auf den CLS-Wert. Passiert das jedoch erst, wenn der*die User*in an diese Stelle gescrollt hat zählt es sehr wohl zum CLS.
Das hat auch zur Folge, dass CLS in RUM-Data (z.B. CrUX-Report) ganz anders ausfallen kann als in Lab-Data (z.B. Lighthouse). Tools, die die Performance einer Seite testen, scrollen nicht durch die Seite – hier hat also in der Regel nur der First View Einfluss auf den CLS. Mit RUM-Data hingegen werden Daten bei realen User*innen erhoben und diese bewegen sich über die Seite. An dieser Stelle sei noch erwähnt, dass ein Layout-Shift bis zu 500ms nach einer User-Interaktion (z.B. Klick auf einen Button) nicht zum CLS-Wert hinzugezählt wird.
Änderung der Berechnung seit Frühjahr 2021
Der CLS-Wert hat im Frühjahr 2021 eine Änderung erfahren, wie gemessen wird. Daher beschreibe ich hier einmal die alte, sowie die neue Berechnung. Zu allererst aber einmal die Berechnung eines Layout-Shift.
Generelle Berechnung eines Layout-Shifts
Ein Layout-Shift wird aus zwei Faktoren berechnet: impact und distance. impact beschreibt den Anteil des Viewports, der verschoben wurde. Wird beispielsweise am Anfang einer Seite nachträglich ein Bild eingefügt und verschiebt damit Inhalt auf 75% des Displays, dann ist der impact-Faktor 0,75. distance hingegen bezeichnet – man kann es sich denken – die Strecke, um die Inhalt verschoben wurde. Um beim Beispiel von eben zu bleiben: Wenn das eingefügte Bild nicht sehr hoch war und so nur zu einer Verschiebung des Inhalts um 10% des Displays geführt hat, dann ist der distance-Faktor 0,1. Insgesamt ergibt sich nun durch diesen Layout-Shift ein Beitrag von 0,75 x 0,1 = 0,075 zum CLS-Wert.
Alte CLS-Berechnung
Die alte CLS-Berechnung hat alle einzelnen Layout-Shifts (s.o.) addiert. Der CLS-Wert ergab sich dann aus allen zusammengezählten Layout-Shifts während der gesamten Session mit dieser HTML-Seite. Es wurde erst aufgehört zu zählen, wenn eine andere Seite aufgerufen wurde (Unload-Event).
Das hatte aber Nachteile für besonders „langlebige“ Seiten, allen voran Single Page Applications (SPAs).
Neue CLS-Berechnung
Die neue CLS-Berechnung addiert Layout-Shifts in Zeit-Fenstern. Ein solches Zeit-Fenster startet mit einem Layout-Shift und zeichnet weitere Layout-Shifts auf bis entweder 1 Sekunde kein Layout-Shift mehr statt gefunden hat oder das Zeit-Fenster 5 Sekunden lang ist. Der CLS-Wert am Ende wird dann der schlechteste CLS-Wert eines 5-Sekunden-Fensters – es werden also nicht mehr alle Layout-Shifts bis zum Unload-Event aufaddiert.
Wieso ist mein CLS schlecht?
Layout-Shifts können von unterschiedlichen Dingen ausgelöst werden. Wenn Bilder keine Höhen- und Breiten-Angaben haben hat es einen negativen Einfluss, wenn sich durch das Laden eines Web-Font der Textfluss ändert kann es problematisch sein und auf Seiten mit Werbung ist häufig sich nachträglich aufspannende Werbung ein Problem.