Mit der CLS-Methode wird gemessen, inwieweit sich der Inhalt der Webseite während des gesamten Lebenszyklus des Seitenrendering-Zyklus verschiebt oder bewegt, oder, mit anderen Worten, wie stabil das visuelle Erscheinungsbild der Webseite ist.
Sie haben es sicher schon oft erlebt: Man klickt in einem Menü auf einen Eintrag und landet versehentlich auf einer Werbung, die einen auf eine externe Webseite weiterleitet. Genauso ärgerlich ist es, wenn sich der Seiteninhalt mitten in der Interaktion ändert. Solche Layoutänderungen sind natürlich auch für Nutzer lästig. Sie können aber auch für Webseitenbetreiber gravierendere Probleme verursachen, wie hohe Absprungraten und Verstöße gegen die Werberichtlinien aufgrund versehentlicher Klicks.
Da Google CLS als einen der drei „Core Web Vitals“ betrachtet, kann ein niedriger CLS-Wert die Gesamtbewertung der Core Web Vitals negativ beeinflussen und zu einer ungenügenden Bewertung führen. Im Zuge der jüngsten Änderungen am Google-Suchalgorithmus werden Websites, die bei der Core-Web-Vitals-Bewertung gut abschneiden, in den Suchergebnissen besser platziert.
Es besteht ein direkter Zusammenhang zwischen der Verbesserung des CLS-Scores, der Verbesserung des gesamten Nutzererlebnisses, der potenziellen Verbesserung des Google-Rankings und der Steigerung des organischen Google-Traffics.
Wie wird die kumulative Layoutverschiebung gemessen?
Wenn ein im Ansichtsfenster sichtbares Element seine Startposition aus irgendeinem Grund ändert, wird diese Verschiebung protokolliert. Daher gilt ein Element als instabil, wenn es seine Startposition ändert. Wichtig ist, dass eine Layoutverschiebung nur dann auftritt, wenn ein sichtbares Element aufgrund eines Ereignisses auf der Seite an eine andere Position verschoben wird, nicht jedoch, wenn ein neues Element hinzugefügt oder ein vorhandenes Element vergrößert oder verkleinert wird.
Der CLS-Wert setzt sich aus zwei spezifischen Kennzahlen zusammen, die Layoutverschiebungen erfassen: dem Auswirkungsanteil und dem Distanzanteil. Diese beiden Kennzahlen dienen der Bestimmung des CLS-Werts. Der Auswirkungsanteil misst, wie sich instabile Elemente auf den Viewport zwischen zwei Frames auswirken, indem er das ursprüngliche Element und die Verschiebung als Verhältnis zur gesamten sichtbaren Fläche des Viewports zwischen den beiden Frames kombiniert. Bei einem instabilen Element, das sich horizontal oder vertikal bewegt, gibt der Distanzanteil die zurückgelegte Strecke innerhalb des Viewports an (horizontal oder vertikal).
Wie können Sie Ihren CLS-Wert verbessern?
Zur Reduzierung instabiler Elemente/Verschiebungsverhaltens hier einige Empfehlungen:
- Je nach Struktur Ihrer Website können verschiedene Webseiten unterschiedliche CLS-Werte erhalten. Beispielsweise können Artikelseiten höhere CLS-Werte aufweisen als die Startseite. Daher ist der erste Schritt, die CLS-Werte aller primären Seitenvorlagen Ihrer Website zu ermitteln.
- Bilder und Videos sollten immer über Breiten- und Höhenangaben verfügen. Erstellen Sie responsive Bilder mit definierten Seitenverhältnissen.
- Alternativ können CSS-Seitenverhältnisboxen verwendet werden, um den benötigten Platz für die Elemente zu reservieren. Dies stellt sicher, dass der Browser während des Ladevorgangs den entsprechenden Speicherplatz im Dokument zuweist.
- Die Anzeigenauslieferung kann erheblich zu Layoutverschiebungen beitragen, wenn die Platzierungen nicht angemessen optimiert werden.
- Dynamische Inhalte sollten nicht über bereits geladenen Inhalten eingefügt werden, außer als Reaktion auf Benutzerinteraktionen; in diesem Fall ändert sich das Layout.
Steigern Sie die Leistung Ihrer WordPress-Website mit unseren Website-Optimierungsdiensten!
