Die ‚kumulative Layoutverschiebung‘ (Cumulative Layout Shift – CLS) ist ein Begriff, der in der Webentwicklung genutzt wird. Er beschreibt den Umstand, dass Content sich beim Nachladen oder Rendern einer Site verschiebt. Er ist eine zentrale und auch benutzerorientierte Metrik, bei der die visuelle Stabilität gemessen wird.
Die kumulative Layoutverschiebung beschreibt, wie häufig ein User Layoutverschiebungen beim Laden einer Webseite erleben muss. Ein geringer CLS-Wert signalisiert eine angenehme User Experience (UX). Der CLS, der etwa in der Search Console oder im Page-Insight-Tool zu finden ist, zeigt an, wie häufig und auch wie stark sich Webelemente oder Teile des Contents während des Ladeprozesses verändern oder verschieben, bis die Webseite für den User einsatzbereit ist.
Der Wert spielt bei den Core Web Vitals und dem Google-Suchfaktor Page Experience eine zentrale Rolle, weil es aufgrund von starken Layoutverschiebungen zu Problemen in der UX kommt.
Ein Beispiel: Wenn etwa ein User ein Produkt auf der Website kaufen möchte, dieses auch anklickt, der Content sich aber verschiebt und dadurch ein anderes Produkt im Warenkorb landet, ist das die eine Sache. Wenn er dieses nun entfernen möchte und sich der Inhalt dabei erneut verschiebt und nunmehr zwei falsche Produkte im Warenkorb liegen, die beide nicht zu löschen sind, wird das für den betreffenden E-Commerce-Anbieter zum Problem. Ein anderes Beispiel ist ein Textblock, bei dem durch JavaScript ein Webelement über den Textblock gelegt wird. Dadurch verschiebt sich der Text, in den der Leser bereits eingestiegen ist. Im schlimmsten Fall verlässt der genervte Besucher die Seite und die Absprungrate (Bounce Rate) verschlechtert sich.
Eine ganz plötzliche Layoutverschiebung entsteht dadurch, dass Webinhalte asynchron geladen werden oder sich DOM-Elemente zum vorhandenen Inhalt hinzufügen. Der Trigger kann ein Film oder Fotos mit unbekannten Abmessungen sein. Auch eine Schriftart, die kleiner oder größer ist als im Fallback angegeben, oder das Widget eines Drittanbieters, das sich dynamisch in der Größe ändert, können der Grund sein. Es sind häufig personalisierte Inhalte, die zu den Layoutverschiebungen führen.