Core Web Vitals – Cumulative Layout Shift (CLS) verbessern

Core Web Vitals: Cumulative Layout Shift
von Kai Spriestersbach
30. September 2021

Diese Schritte helfen dir bei deinen Verbesserungen

Im fünften und letzten Teil der Core Web Vitals-Serie widmen wir uns dem „Cumulative Layout Shift“, kurz CLS. Wer sich schon einmal in der Vergangenheit mit PageSpeed-Metriken beschäftigt hat, der könnte beim CLS-Wert etwas verwundert sein, denn hier hat Google in seiner Forschung einen vollkommen neuen Faktor für die Nutzererfahrung beim Laden und Benutzen einer Webseite entworfen.
In diesem Beitrag erkläre ich, welche Faktoren den CLS beeinflussen, was der Cumulative Layout Shift überhaupt ist, wie man ihn misst und berechnet und wir schauen uns an, wie man bei Problemen den CLS-Wert einer Seite gezielt verbessert und den Web Vitals Test bestehen kann. Wie immer spielt es dabei keine Rolle, ob Du WordPress oder ein anderes CMS verwendest.

Du hast Probleme mit dem CLS? Worauf warten wir dann noch?

💡 Lies hier mehr zu unserer Core Web Vitals Reihe:


Inhaltsverzeichnis

  1. Was ist der Cumulative Layout Shift?
  2. Wie wird der CLS berechnet?
  3. Den CLS-Wert analysieren
  4. CLS – Ursachen und Problemlösungen für schlechte CLS-Werte
  5. CLS Fehlerbehebung überprüfen

1. Was ist der Cumulative Layout Shift?

Das „Cumulative Layout Shift – kurz CLS – beschäftigt sich mit der visuellen Stabilität einer Webseite. Sehr komplexe Webseiten laden einen Teil des Contents im Hintergrund, damit die Ladezeit der Seite niedrig bleibt. Wenn die Ladevorgänge aber nicht aufeinander abgestimmt sind, kann es dazu kommen, dass die Inhalte auf der Webseite springen. CLS steht also für die Summe aller Layoutverschiebungen.

Solche Verschiebungen sollten natürlich vermieden werden, sowohl während des Ladevorgangs als auch während der Benutzung der Seite durch den Nutzer. Dies misst der CLS.


Eine Layoutverschiebung ist allerdings nur dann schlecht, wenn der Benutzer sie nicht erwartet. Andererseits sind Layoutverschiebungen als Reaktion auf Benutzerinteraktionen (Klicken auf einen Link, Drücken einer Schaltfläche, Eingabe in ein Suchfeld und ähnliches) im Allgemeinen in Ordnung, solange die Verschiebung zeitlich nahe genug an der Interaktion erfolgt, dass der Zusammenhang für den Benutzer klar ersichtlich ist.

Core Web Vitals – CLS

2. Wie wird der CLS berechnet?

Der CLS ist die Summe aller Layout-Shifts. Ein Layout-Shift-Wert setzt sich aus der „impact fraction“, also dem betroffenen Anteil des Viewports, multipliziert mit der „distance fraction“, zusammen. Also dem Anteil des Viewports, um den ein Element verschoben wird.

Im folgenden Beispiel sind 75% des Viewports von der Verschiebung betroffen, also ist der „impact fraction“ 0,75:

Layout Shift Score
Das Element wird um 25% des sichtbaren Viewports verschoben, damit ist der „distance fraction“ Wert 0,25:
CLS
Als Layout-Shift berechnet man nun 0,75 * 0,25 = 0,1875 und damit ist man mit dieser Verschiebung bereits über der kritischen Marke von 0,1.
Wie schnell lädt Dein WordPress?
  • PageSpeed Score
  • Core Web Vitals
  • Parameter mit Erläuterung
! Kostenloser Speedtest – /speedtest/

Nach dem Absenden erhältst du das Ergebnis direkt per E-Mail.

Mit dem Absenden dieses Formulars stimmst du unseren Datenschutzbestimmungen  zu.

3. Den CLS-Wert analysieren

Ob deine Webseite überhaupt ein Problem mit Layout-Shifts hat, kannst du am zuverlässigsten im Core Web Vitals Bericht der Search Console herausfinden.
CLS
In der Google Search Console findest du Probleme nach URLs aufgeschlüsselt, wobei Google gleiche Ursachen in URL-Gruppen, wie z.Bsp. Gruppen ähnlicher Webseiten, zusammenfasst. Wichtig ist hierbei, dass in diesem Bericht nur indexierte URLs aufgeführt werden.

Die angezeigten URLs sind dabei die tatsächlichen URLs, von Webseiten-Besuchen echter Nutzer mittels einem Google Chrome Browser. Nur diese Daten werden dort erfasst und demzufolge nicht nur einer kanonischen URL einer Seite zugeordnet oder von einem Google Bo oder Tool gemessen.


Für kleine Webseiten ist es außerdem wichtig, dass URLs nur dann auftauchen, wenn für diese eine Mindestmenge an Berichtsdaten für einen dieser Messwerte verfügbar ist. Ansonsten werden diese nicht berücksichtigt.

4. CLS – Ursachen und Problemlösungen für schlechte CLS-Werte

Der häufigste Grund für Layout-Verschiebungen während des Ladevorgangs sind Bilder, denen im Layout keine feste Höhe zugewiesen wurde. Gerade größere Bilddateien werden meist erst fertig geladen, wenn die Webseite vom Nutzer schon betrachtet werden kann. Wenn nun das Layout diesen Bildern keinen Platz reserviert hat, schieben die plötzlich auftauchenden Bilder alle nachfolgenden Elemente nach unten.
cls
Das kannst du ganz einfach beheben, in dem du entweder dem Bild-Element, oder einem umfassenden Elternelement, eine feste Höhe mittels CSS zuweist. Diese muss aber der Höhe des Bildes entsprechen, wenn es fertig dargestellt ist.

Die zweithäufigste Ursache für CLS-Probleme sind nachträglich eingefügte Overlays, wie Cookie-Consent-Banner, Hinweisboxen oder andere Formen der Benachrichtigung.

cls overlays
Die Lösung dafür ist, je nach Art und Weise der Implementierung, nicht ganz einfach bzw. nicht ganz unwichtig. Hierfür hat Katie Hempenius von Google sogar einen eigenen Artikel über „Best practices for cookie notices “ veröffentlicht.

Die einfachste Lösung ist es, die Cookie-Benachrichtigungs-Skripte einfach asynchron zu laden. Leider ist das bei einigen Varianten nicht möglich, ohne deren Funktionalität zu zerstören. Zum Beispiels falls diese Skripte gleichzeitig auch dafür sorgen, dass externe Skripte und Embeds, wie YouTube-Videos, erst geladen werden, nachdem der Nutzer sein Einverständnis dafür gegeben hat.

5. CLS Fehlerbehebung überprüfen

Wenn du CLS-Probleme hattest und diese auf deiner Webseite behoben hast, solltest du Google veranlassen zu überprüfen, ob es auch tatsächlich bei allen URLs behoben wurde. Dazu klickst du einfach bei dem auftretenden Problem in der Google Search Console auf „Tracking starten“. Anschließend wird 28 Tage lang überwacht, ob das Problem auch noch an einer anderen Stelle auf deiner Website auftritt.

Tritt dasselbe Problem innerhalb dieses Zeitraums nicht erneut auf, gilt es als behoben. Selbst, wenn es nur bei einer einzigen URL auftritt, gilt es allerdings als nicht behoben. Der Status einzelner URLs wird jedoch unabhängig davon die gesamten 28 Tage lang analysiert.


Wenn die Überprüfung fehlschlägt, solltest du erneut versuchen, das Problem zu beheben und die Überprüfung erneut starten.

Mehr Informationen zu unserer Core Web Vitals Reihe

Kai Spriestersbach
Kai Spriestersbach
Kai Spriestersbach, M.Sc. Web Science, ist Inhaber von SEARCH ONE und unterstützt Unternehmen als externer Marketing- und Digital Stratege und gründet gerade ein Unternehmen auf Basis seiner Forschung im Rahmen der Master Thesis. Kai ist einer der erfahrensten Search Marketing Experten im deutschsprachigen Raum und hat sich in den letzten Jahren intensiv mit künstlicher Intelligenz, Natural Language Processing (NLP) und Information Retrieval beschäftigt. Als Experte für die Texterstellung mit Hilfe von KI-Tools veröffentlichte er 2023 ein Sachbuch über das Schreiben mit Hilfe von KI.
Mehr aktuelle Beiträge rund um WordPress & Co.:
2 Responses

  1. Guter Artikel. Nur leider ist es gar nicht so einfach, wie hier beschrieben. Unsere Webseite hat in allen Testmöglichkeiten 100%, nur in der Google Search Console werden schlechte CLS Werte angezeigt. Einen Grund dafür konnten wir bisher nicht finden. Hat jemand eine Idee?

    Antworten

    1. Hallo Michael,
      mit den externen Testtools macht man ja eine Labormessung. Google verwendet für das Ranking hingegen die Felddaten von echten Besuchern. Diese Daten werden Dir in der Search Console angezeigt. Dort kannst Du auch Hinweise darauf finden, welcher der Werte auf welchen URLs Probleme macht. Der nächste Schritt wäre dann zu versuchen das Verhalten im eigenen Chrome Browser zu reproduzieren und über die Developer Tools die Layout Shifts ausfindig zu machen. Dann kann man das Problem angehen und ggf. lösen.
      LG Kai

      Antworten
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert