Cumulative Layout Shift (CLS) ist ein Core Web Vital, das das Ausmaß unerwarteter visueller Inhaltsbewegungen auf einer Webseite quantifiziert. Eine unerwartete Layoutverschiebung tritt auf, wenn Elemente auf der Seite sich bewegen, nachdem sie bereits gerendert wurden, oft aufgrund von asynchron geladenen Ressourcen wie Bildern, Anzeigen oder dynamischem Inhalt, der durch JavaScript eingefügt wird. Ein niedriger CLS-Wert deutet auf eine stabile und angenehme Benutzererfahrung hin.
Ein guter CLS-Wert liegt typischerweise bei 0,1 oder weniger. Für Entwickler ist die Minimierung von CLS entscheidend, um frustrierende Benutzererfahrungen zu vermeiden, bei denen Benutzer möglicherweise auf den falschen Button klicken oder ihren Platz beim Lesen verlieren. Es ist auch ein wichtiger Faktor in Googles Page Experience Ranking Signals.
Um CLS zu verbessern, solltest du immer Größenattribute für deine Bilder- und Videoelemente angeben, Platz für Anzeigen oder eingebettete Inhalte reservieren, bevor sie geladen werden, und das Einfügen neuer Inhalte über bestehenden Inhalten vermeiden, es sei denn, dies wird durch eine Benutzerinteraktion ausgelöst. Wenn du beispielsweise ein dynamisch geladenes Werbebanner hast, verhindert die Sicherstellung, dass sein Container eine feste Höhe oder einen Platzhalter hat, dass der darunter liegende Inhalt herumspringt, sobald die Anzeige erscheint.