Core Web Vitals: Cumulative Layout Shift

Cumulative Layout Shift (CLS) verbessern und optimieren! – CWV-Serie 5/5:

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?

Cumulative Layout Shift (CLS)

Inhaltsverzeichnis:

  1. Was ist der CLS?
  2. Wie wird der CLS berechnet?
  3. So analysierst Du den CLS-Wert
  4. Häufige Ursachen und Problemlösungen für schlechte CLS-Werte
  5. Fehlerbehebung überprüfen

 

1. Was ist der CLS?

Wie schon gesagt, steht die Abkürzung CLS für „Cumulative Layout Shift“, also die Summe aller Layoutverschiebungen. Bislang wurden Layoutverschiebungen bei klassischer PageSpeed-Optimierung nicht berücksichtigt, doch ich halte diesen Wert für absolut sinnvoll.

 

Wer kennt es denn nicht: Man will bereits auf einen Link klicken, aber die Seite war noch nicht vollständig geladen – und im Moment des Klicks, schiebt ein geladenes Bild den Link nach unten. Man ärgert sich und klickt erneut, im schlimmsten Fall klickt man womöglich einen anderen Link an und landet auf einer Seite, auf die man gar nicht wollte. Sehr ärgerlich.

 

Daher sollte man Verschiebungen des Layouts, sowohl während des Ladevorgangs als auch während der Benutzung der Seite durch den Nutzer möglichst vermeiden. 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.

 

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“, 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:

 

Cumulative Layout Shift: Impact Fraction
Cumulative Layout Shift: Impact Fraction

 

Das Element wird um 25% des sichtbaren Viewports verschoben, damit ist der „distance fraction“ Wert 0,25:

Cumulative Layout Shift: Distance Fraction
Cumulative Layout Shift: Distance Fraction

 

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.

Layout Shift Score

 

3. So analysierst Du den CLS-Wert

Ob deine Webseite überhaupt ein Problem mit Layout-Shifts hat, kannst Du am zuverlässigsten im Core Web Vitals Bericht der Search Console herausfinden.

 

Cumulative Layout Shift: Werte analysieren
Cumulative Layout Shift: Werte analysieren

 

Dort findest Du Probleme nach URLs aufgeschlüsselt, wobei Google gleiche Ursachen in URL-Gruppe (Gruppen ähnlicher Webseiten) zusammenfasst. Wichtig ist, dass in diesem Bericht nur indexierte URLs aufgeführt werden!

 

Die angezeigten URLs sind dabei die tatsächlichen URLs, für die diese Daten durch Besuche echter Nutzer deiner Webseite mit dem Chrome Browser erfasst wurden. Die Daten werden also nicht nur der kanonischen URL einer Seite zugeordnet, wie es in den meisten anderen Berichten der Fall ist, oder von einem Google-Bot oder Google Tool gemessen.

 

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

4. Häufige Ursachen und Problemlösungen für schlechte CLS-Werte

1. 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 und gescrollt werden kann. Wenn nun das Layout diesen Bildern keinen Platz reserviert hat, schieben die plötzlich auftauchenden Bilder alle nachfolgenden Elemente nach unten.

 

Cumulative Layout Shift: Layout verschiebt sich

 

Dies kann man einfach beheben, in dem man entweder dem Bild-Element, oder einem umfassenden Elternelement eine feste Höhe mittels CSS zuweist, die der Höhe des Bildes entspricht, wenn es dargestellt wird.

 

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

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

 

Der einfachste Fix ist es, die Cookie-Benachrichtigungs-Skripte einfach asynchron oder gar defer zu laden. Leider ist das bei einigen Varianten nicht möglich, ohne deren Funktionalität zu zerstören, beispielsweise 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. 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 auf „Tracking starten“ bei dem jeweiligen Problem in der Search Console. Dann wird 28 Tage lang überwacht, ob das Problem noch an anderer Stelle auf Ihrer Website vorkommt.

 

Tritt es innerhalb dieses Zeitraums bei keiner URL deiner Website auf, gilt es als behoben. Selbst, wenn es nur bei einer einzigen URL auftritt, gilt es 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.

5/5 - (5 votes)