Cumulative Layout Shift (CLS)

Cumulative Layout Shift

Die Cumulative Layout Shift (CLS) Metrik misst die allgemeine Layout-Stabilität Ihrer Website. Unerwartete Layoutverschiebungen während des Ladens der Seite können zu versehentlichen Benutzerfehlern und Ablenkung führen.

Cumulative Layout Shift (CLS) tritt auf, wenn Elemente nach ihrer initialen Darstellung durch das DOM verschoben werden. In diesem Beispiel wurde ein Button nach dem Textblock gerendert, wodurch der Block nach unten verschoben wurde. Bei der Berechnung des CLS werden sowohl die Auswirkung als auch die Distanz der Verschiebung berücksichtigt.

Beispiel für Cumulative Layout Shift

Elemente, die ihre Position ändern, wenn neue Elemente auf dem Bildschirm gerendert werden, beeinflussen den CLS-Wert.

Die individuelle Layout-Verschiebungsbewertung jedes Elements wird nur dann in den CLS einbezogen, wenn eine unerwartete Bewegung auftritt. Wenn ein neues Element zum DOM hinzugefügt wird oder ein bestehendes Element seine Größe ändert, zählt dies nicht als Layout-Verschiebung, solange die geladenen Elemente ihre Position beibehalten.

Weiterführende Literatur

On this page