Während Sie den Text einer Website lesen, wird dieser plötzlich an einer anderen Position angezeigt und Sie müssen sich neu auf der Website orientieren. Kennen Sie diese Situationen? Mit dem Cumulative Layout Shift werden genau diese Layoutveränderungen gemessen.

In diesem Blogbeitrag erklären wir, wie der Cumulative Layout Shift gemessen wird und wie diese Kennzahl optimiert werden kann.

Um die Kennzahl des Cumulative Layout Shifts zu erklären, muss erstmal geklärt werden, was als Layout Shift wahrgenommen wird.

Als Layout Shift werden alle sichtbaren Elemente bezeichnet, die ihre Ausgangsposition zwischen zwei Zeitpunkten verändern. Die Veränderung der Ausgangsposition ist dabei ein wichtiges Element. Wenn ein neues Element registriert wird oder die Größe eines Elementes verändert wird, zählt das nicht als Layout Shift, solange die Ausgangsposition von anderen Elementen nicht verändert wird.

Layout Shifts entstehen häufig durch die unterschiedlichen Ladezeiten der Elemente. Wenn zum Beispiel der textliche Inhalt einer Website bereits dargestellt wird, während ein Werbebanner noch geladen wird, kommt es zur nachträglichen Veränderung im Layout. Auslöser sind daher oftmals nachträglich geladene Elemente, die häufig über Javascript nachgeladen werden. Auch Consent Banner verursachen häufig Layout Shifts.

Mit dem CLS wird der längste Layout Shift Score für jeden einzelnen Layout Shift auf einer Website gemessen. Dabei werden auch Ansammlungen von Layout Shifts berücksichtigt, die auftreten, wenn mehrere Layout Shifts direkt hintereinander auftreten. Zwischen den einzelnen Layout Shifts einer Ansammlung muss dabei weniger als eine Sekunde liegen. Alle Layout Shifts einer Ansammlung müssen in maximal 5 Sekunden abgeschlossen sein. Ausgegeben wird von der Kennzahl dabei nur die Ansammlung mit dem höchsten Layout Shift Score.

JETZT PAGESPEED OPTIMIERUNG ANFRAGEN!

Für die Bemessung des Layout Shift Scores werden zwei Kennzahlen multipliziert: Der Auswirkungsgrad sowie der Entfernungsanteil. 
Der Auswirkungsgrad umfasst dabei den Prozentsatz aller Layoutverschiebungen gegenüber dem vorherigen Frame.

Im ersten Screen nimmt das Element nur 25% des gesamten Bildschirms ein. Danach wird das Element um 75% nach oben verschoben. Der Auswirkungsgrad umfasst alle Layoutverschiebungen und beträgt somit 100%.

Der Entfernungsanteil misst den Abstand, um den sich ein Element relativ zum Darstellungsbereich verschoben hat. Der Entfernungsanteil ist dabei der größte Abstand, um den sich ein Element verschoben hat. Je nach Bildschirmdimensionen kann die Höhe oder die Breite größer sein. Der Entfernungsanteil wird dabei anhand der größeren Dimension gemessen. Im oberen Beispiel wird das Element um 50% verschoben, wobei die Höhe im Bildschirm größer ist. Der Entfernungsanteil beträgt somit 50%.

Um den Layout Shift Score zu berechnen, wird dabei der Entfernungsanteil mit dem Auswirkungsgrad multipliziert. Damit beträgt der Layout Shift Score für dieses Beispiel 50% (100% Auswirkungsgrad * 50% Entfernungsanteil).

Bevor der Cumulative Layout Shift optimiert werden kann, muss erst festgestellt werden, ob ein Problem mit dem Messwert vorliegt. Diese Kennzahl wird von mehreren Tools ausgewertet. Dabei gibt es einen Unterschied zwischen Labordaten und Felddaten. Während Tools, die Labordaten verwenden, keine echten Nutzerdaten enthalten, enthalten Tools, die Felddaten verwenden, echte Nutzerdaten.

Besonders bei dieser Kennzahl ist darauf zu achten, dass mit Labordaten nur Layoutverschiebungen untersucht werden können, die auftreten, während eine Seite geladen wird. Layoutverschiebungen die durch Benutzerinteraktionen ausgelöst werden, können nur mit Felddaten analysiert werden. Darum enthalten Labordaten üblicherweise weniger Layoutverschiebungen als Felddaten.

Chrome User Experience Report

Mit den Daten des Chrome User Experience Reports (CrUX) kann nachvollzogen werden, wie eine Webseite von Chrome-Nutzer:innen weltweit wahrgenommen wird. Die CrUX-Kennzahlen können mit mehreren Google Tools, zum Beispiel Pagespeed Insights (https://pagespeed.web.dev/) ausgewertet werden.

Pagespeed Insights

Mit dem Pagespeed Insights Tool (https://pagespeed.web.dev/) können Webseiten auf die Seitenladezeit geprüft werden. Im oberen Bereich werden dabei die Daten der echten Nutzer:innen angezeigt. Diese Daten werden für Desktop und Mobilgeräte gesondert ausgewertet. Dieses Tool enthält dabei Daten von echten User:innen sowie Labordaten.

Google Search Console

In der Google Search Console werden im Punkt “Core Web Vitals” bestehende Probleme mit den Core Web Vitals angezeigt. Liegt ein Problem mit der Cumulative Layout Shift Kennzahl vor, wird das auch angezeigt.

Javascript Web Vitals Datenbank

Mit der Web Vitals JavaScript Datenbank (https://github.com/GoogleChrome/web-vitals) können Felddaten von Nutzer:innen einer Website erhoben werden. Diese Bibliothek umfasst dabei eine Reihe von Messzahlen, unter anderem den Cumulative Layout Shift.

Chrome Entwicklertools

Die Chrome Entwicklertools können in Google Chrome mit einem Rechtsklick auf “Untersuchen” geöffnet werden. Im Menüpunkt “Performance” werden alle Kennzahlen der Core Web Vitals angezeigt. Mit diesem Tool können bestehende Layout Shifts ausgewertet werden. Dabei werden alle gefundenen Layout Verschiebungen angezeigt sowie der jeweilige Layout Shift Score.

In der neuen “Performance insights” Übersicht in den Google Chrome Entwicklertools können Layoutshifts besser nachvollzogen werden.

Lighthouse

In Google Chrome kann mit einem Rechtsklick auf “Untersuchen” auch ein Lighthouse Audit durchgeführt werden. Dabei werden die Seitenladezeit, Barrierefreiheit, die Einhaltung von Best Practices in der Programmierung sowie SEO aufgrund bestimmter Kriterien geprüft. Für jeden der untersuchten Bereiche wird in der Auswertung eine Bewertung abgegeben. Der Cumulative Layout Shift wird dabei als Teil der Seitenladezeit ausgewertet. Zusätzlich werden auch entsprechende Optimierungen vorgeschlagen, die eingebunden werden könnten.

Weitere Tools zur Messung der Seitenladezeit

Die Seitenladezeit kann auch mit weiteren Tools wie zum Beispiel https://www.webpagetest.org/ gemessen werden. Bei vielen dieser Tests kann der Standort gewählt werden, von welchem aus gemessen wird. Dieser sollte möglichst nah an potenziellen Nutzer:innen gewählt werden.

PAGESPEED OPTIMIERUNG ANFRAGEN!

Nach den Richtlinien von Google gilt ein Cumulative Layout Shift Wert von unter 0.1 als gut. Ein Wert über 0.25 gilt dabei als schlecht.

Der Cumulative Layout Shift unterscheidet sich je nach Seitenaufruf. Um eine gute Bewertung zu erhalten, müssen mindestens 75% aller Seitenaufrufe einen CLS Wert von unter 0.1 erhalten. 
Probleme mit dem CLS Wert werden auch in der Google Search Console ausgegeben. Dabei wird auch angezeigt, auf welchen URLs die Probleme auftreten.

Verschiebungen im Layout können mehrere Gründe haben, wie zum Beispiel Bilder ohne Höhen und Breitenangaben, Werbungen, dynamisch integrierte Inhalte sowie auch Schriftarten. Mit Tools wie den Chrome Entwicklertools und Pagespeed Insights kann nachvollzogen werden, woran das Problem liegt. Im Folgenden erfahren Sie, wie diese Probleme gelöst werden können.

Aufgrund der angegebenen Höhen- und Breitenangaben bei Bildern erkennen Browser, wie viel Platz einem Bild zugeordnet wird. Aktuell werden Bilder oftmals responsive dargestellt, dabei wird entweder die Höhe oder die Breite eines Bildes mit Prozentwerten angegeben. Da sich dieser Prozentwert auf die Größe des Bildschirms bezieht, kann die dargestellte Größe von Browsern erst während dem Laden einer Seite bestimmt werden. Somit kann sich die Größe des Bildes während des Ladeprozesses ändern und es entstehen Verschiebungen im Layout. Das kann verhindert werden, indem im  Tag die Attribute für “width” und “height” gesetzt werden. Oftmals wird auch mit unterschiedlich großen Bildern je nach Bildschirmgröße (responsive Bilder) gearbeitet. Die unterschiedlichen Bilder sollten dabei im srcset-Attribut angegeben werden. Dabei sollte darauf geachtet werden, dass alle Bilder dasselbe Seitenverhältnis verwenden.

Besonders Anzeigen werden häufig mit dynamischen Formaten eingebunden. Dabei ist erst beim Laden der Seite klar, in welche Größe die Anzeigen eingebunden werden. Um eine Layoutverschiebung zu vermeiden, kann im Layout ein entsprechender Platz für die Anzeige eingeplant werden. Dazu können die CSS min-height oder aspect-ratio Eigenschaften verwendet werden.

Da die tatsächliche Größe einer Anzeige meist erst während des Ladevorgangs bekannt wird, können Layoutverschiebungen meist nicht komplett vermieden werden. Um die Verschiebung gering zu halten, könnte viel Platz für die entsprechenden Inhalte reserviert werden. In dieser Situation kann es jedoch vorkommen, dass relativ viel des reservierten Platzes nicht befüllt wird und daher weiß bleibt. Eine andere Möglichkeit, um den Layout Shift gering zu halten, besteht darin, die Inhalte möglichst weit unten im sichtbaren Bereich zu implementieren. Dadurch bleibt der Layout Shift Score meist recht gering.

Bei Animationen werden häufig CSS Attribute verändert, die eine neue Kalkulation des Layouts verursachen. Durch die Neuanordnung der Elemente entsteht eine Layoutverschiebung. In diesen Fällen sollten CSS Attribute wie “transform” oder “opacity” verwendet werden, die keine neue Kalkulation des Layouts verursachen.

Wenn Webschriftarten gerendert werden, entsteht oftmals ein Cumulative Layout Shift, weil die Fallback-Schriftart durch die verwendete Webschriftart ersetzt wird. Um diesen Layout Shift zu begrenzen, können mehrere Möglichkeiten genutzt werden.

Mit der “font-display:optional” Angabe wird die Webschriftart nur gerendert, wenn sie zum Zeitpunkt des initialen Layouts vorhanden ist. Zusätzlich sollte auch das Schriftmuster der Fallback-Schriftart angegeben werden. Wenn eine sans-serif Schriftart als Webschriftart angegeben ist, sollte dies auch als Fallback definiert werden. Wenn die Fallback-Schriftart nicht festgelegt ist, wird die Standardschriftart des Browsers als Fallback verwendet.

Es gibt unterschiedliche CSS Angaben wie size-adjust oder ascent-overwrite, mit denen die Fallback-Schriftart an die Webschriftart angepasst werden kann. Diese sollten auch genutzt werden, um den Unterschied so klein wie möglich zu halten.

Schriftarten, die von Dritten bereitgestellt werden, sollten mit ausgezeichnet werden, damit sie so früh wie möglich geladen werden.

Mit dem Backward/forward Cache (bfcache) werden Seiten für kurze Zeit im Browser Cache gehalten. Kehrt ein:e Nutzer:in zu dieser Seite zurück, wird sie so angezeigt, wie er sie verlassen hat, ohne Layout Verschiebungen. In den Google Chrome Entwicklertools kann einfach getestet werden, ob eine Website den Backward/forward Cache nutzt. Dazu geht man in den Google Entwicklertools unter “Application” auf “Back/forward Cache”. Hier kann der Test gestartet werden. Nach dem Test wird angezeigt, ob eine URL diesen Cache nutzen kann.

Der Cumulative Layout Shift ist ein Bestandteil der Core Web Vitals Kennzahlen, die von Google verwendet werden, um die Seitenladezeit einer Website zu messen. Die Seitenladezeit ist dabei ein Rankingkriterium der Google Suchmaschine. Webseiten mit einer höheren Seitenladezeit haben daher schlechtere Chancen, in der Google Suchmaschine gefunden zu werden. Auch für Benutzerfreundlichkeit einer Website ist es schädlich, wenn die Website zu lange lädt.

Verschiebungen im Layout sind ärgerlich und sorgen für eine schlechtere Nutzererfahrung. Mit dem Cumulative Layout Shift wird der Einfluss der Layoutverschiebungen auf einer Website gemessen. Der CLS ist dabei ein Bestandteil von den Core Web Vitals Kennzahlen, die verwendet werden, um die Seitenladezeit einer Website auszuwerten.

Wenn ein Problem mit der Seitenladezeit festgestellt wird, muss erst ermittelt werden, in welchem Bereich die Probleme bestehen. Um den Cumulative Layout Shift genauer zu analysieren, sollten vor allem Felddaten verwendet werden. Nachdem ein Problem mit dem CLS festgestellt wurde, sollten die in diesem Beitrag erwähnten Optimierungen vorgenommen werden.

Gerne beraten wir Sie zum Cumulative Layout Shift oder kümmern uns darum, den CLS auf Ihrer Website zu optimieren!

JETZT UNVERBINDLICH ANFRAGEN!