Was ist Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) ist eine Maßeinheit, die die Stabilität einer Webseite beschreibt. Es handelt sich dabei um eine Metrik aus dem Bereich der Web Performance Optimization (WPO), die im Kontext der User Experience (UX) eingesetzt wird.
Der CLS Wert gibt an, wie oft sich Benutzer auf einer Webseite unerwartet bewegen müssen, weil die Elemente der Seite sich verschieben oder neu sortiert werden. Dabei kann es sich um Text, Bilder oder andere Inhalte handeln. Ein hoher CLS Wert führt zu einer schlechteren User Experience und kann sich negativ auf das Ranking der Seite in den Suchmaschinen auswirken.
Was ist die technische Grundlage für CLS?
Die technische Grundlage für CLS ist das Zusammenspiel von HTML, CSS und JavaScript. Wenn eine Webseite lädt, werden die verschiedenen Elemente nacheinander angezeigt. Wenn sich diese Elemente aber während des Ladens verschieben oder neu sortiert werden, entsteht ein höherer CLS Wert.
Die Ursache für Layout Shifts können zum Beispiel Bilder oder Videos sein, die erst nachgeladen werden müssen oder Elemente, die dynamisch durch JavaScript eingefügt werden. Auch responsive Webdesigns, die auf unterschiedlichen Geräten unterschiedliche Größen haben können, können zu Problemen führen.
Was ist ein guter CLS Wert?
Ein guter CLS Wert liegt unter 0,1. Um den CLS Wert zu erreichen, sollte die Webseite so gestaltet werden, dass alle Elemente von Anfang an in der richtigen Größe und Position angezeigt werden. Bilder sollten mit den korrekten Abmessungen eingebettet werden und es sollte vermieden werden, Inhalte nachträglich durch JavaScript zu laden.
Je niedriger der CLS Wert ist, desto besser ist die User Experience für die Benutzer. Ein hoher CLS Wert kann dazu führen, dass Benutzer die Seite schnell wieder verlassen und sich auf anderen Seiten umschauen.
Wie kann ich CLS optimieren?
Es gibt mehrere Möglichkeiten, um den CLS Wert einer Webseite zu optimieren. Eine Möglichkeit ist es, alle Elemente der Webseite so zu gestalten, dass sie von Anfang an in der richtigen Größe und Position angezeigt werden. Das bedeutet zum Beispiel, dass Bilder mit dem korrekten Seitenverhältnis eingebettet werden oder dass Inhalte nicht dynamisch durch JavaScript nachgeladen werden.
Eine weitere Möglichkeit ist es, die Ladezeit der Seite zu optimieren. Wenn die Seite schnell lädt, haben die Benutzer weniger Zeit, um die Layout Shifts wahrzunehmen. Dazu kann man zum Beispiel Bilder komprimieren, unnötigen Code entfernen oder die Webseite auf einem schnellen Server hosten.
Insgesamt sollten Webentwickler immer ein Auge auf den CLS Wert ihrer Webseiten haben, um sicherzustellen, dass die Benutzer eine optimale User Experience haben. Durch Anpassungen an der Webseite kann man den CLS Wert deutlich verbessern, was sich positiv auf die Conversion Rate und das Ranking in den Suchmaschinen auswirken kann.
