Auch das Layout einer Webseite ist neben LCP (Largest Contentful Paint) und FID (First Input Delay) für eine positive Nutzererfahrung (UX) von großer Bedeutung und führt Google in seinen Core Web Vitals auf. Um das Layout besser messen zu können, hat Google daher den Wert des CLS eingeführt. Die dazugehörige Kennzahl gibt an, wie stabil das Layout der Seite ist, während sie lädt.
Vielleicht kennst Du auch das Problem, dass Du eine Webseite neu aufrufst, im Begriff bist, auf ein Element zu klicken, sich währenddessen aber die Seite verschiebt und Du ganz woanders rauskommst als ursprünglich gewollt. Da kann sich schnell Ärger und Frust beim User breit machen, weshalb Google für die Qualitätsüberprüfung des Layouts den Wert CLS eingeführt hat.
Die Skala beim CLS reicht von 0 (optimal) bis 1 (sehr, sehr schlecht). Testen lässt sich der Cumulative Layout Shift z.B. mit PageSpeed Insights, wobei Google ein Ergebnis bis 0,1 als gut, von 0,1 bis 0,25 als mittelmäßig und ab 0,25 als schwach einstuft.
So kannst Du den CLS-Wert optimieren:

  • Definiere die Höhe und Breite bei Fotos und Videos, damit der Browser genügend Raum beim Laden des Layouts für die Darstellung der visuellen Elemente bereithält
  • Wenn Du Google Ads oder andere Werbung auf Deiner Webseite integriert hast, solltest Du ebenfalls Höhe und Breite hierfür definieren. Am besten nutzt Du historische Daten, um die ungefähren Größen für die Anzeigen einschätzen zu können.
  • Genauso solltest Du für dynamische Content-Elemente (Banner, Related-Content, GDPR-Hinweise etc.) Platzhalter auf Deiner Webseite integrieren.

Weitere Tipps gibt Dir auch direkt Googles Tool PageSpeed Insights, wenn Du die Core Web Vitals Deiner Seite überprüft hast.