Ein bekanntes Problem

Die meisten kennen es. Man liest einen Online-Artikel und plötzlich ändert sich etwas - ohne Warnung verschiebt sich der Text und man verliert die Übersicht. Oder schlimmer: man möchte einen Link anklicken, oder auf einen Button drücken und einen Augenblick, bevor der Finger abdrückt - Zack - ist der Link weg und man klickt auf etwas völlig anderes.

Meistens ist das nur ein bisschen ärgerlich, aber in seltenen Fällen kann es auch zu echten Problemen führen.

Unerwartete Bewegungen der Webinhalte ergeben sich meistens, weil die Ressourcen nicht gleichzeitig geladen und dynamisch zu bestehenden Webinhalten hinzugefügt werden. Das können Bilder, oder Videos mit undefinierten Maßen sein, besondere Schriftarten, oder Werbeanzeigen von Drittanbietern, die ihr Format dynamisch anpassen.

Diese Probleme entstehen oft durch eine Diskrepanz zwischen der User Experience während der Entwicklung einer Webseite und der Erfahrungen, die User bei der Nutzung der Webseite haben.

Cumulative Layout Shift (CLS) hilft dabei, indem es erfasst, wie oft sich Inhalte für echte Nutzer verschieben.

Was ist CLS genau?

CLS misst die Gesamtsumme aller individuellen layout shift scores für jeden unexpected layout shift, der während der Gesamten Lebenszeit einer Seite auftritt.

Von einem layout shift spricht man immer, wenn sich ein sichtbares Element von einem geladenen Ort zu einem anderen verschiebt.

Was ist ein guter CLS-Wert?

Um eine gute User Experience zu gewährleisten, sollten Webseiten einen CLS-Wert von weniger als 0,1 anstreben. Dieser CLS-Wert kann nie für alle Besucher einer Seite erreicht werden, daher ist der angezielte Schwellenwert bei 75% der Seitenaufrufe, sowohl bei mobilen, als auch Desktop-Geräten.

Layout shifts im Detail

Layout shifts werden von der Layout Instability API definiert, die jedes sichtbare Element im Darstellungsbereich erfasst, das seine Starposition verändert. Diese Elemente werden als unstable elements, oder instabile Elemente deklariert.

Layout shifts betreffen dabei nur bereits existierende Elemente, die ihre Position ändern. Neue Elemente, oder bestehende Elemente, die ihre Größe ändern werden nicht als layout shift erfasst - solange die Änderungen keine sichtbaren Elemente verschieben.

Layout shift score

Bei der Berechnung der layout shift score werden die Größe des Ansichtsfeldes und die Bewegungen von instabilen Elementen innerhalb dieses Feldes zwischen zwei ladenden Frames erfasst. Die layout shift score ist ein Produkt aus zwei unterschiedlichen Messungen dieser Bewegungen: die impact fraction und die distance fraction.

layout shift score = impact fraction * distance fraction

Impact fraction

Die impact fraction misst, wie instabile Elemente das Ansichtsfeld zwischen zwei Frames beeinflussen. Die Zusammenfassung des sichtbaren Bereichs aller instabilen Elemente des vorigen und des aktuellen Frames - als Teil des gesamten sichbaren Bereichs - ist die impact fraction des aktuellen Frames.

>>> Bild einfügen <<<

Im obigen Bild nimmt ein Element die Hälfte des sichtbaren Bereichs eines Frames ein. Im nächsten Frame shiftet um 25% des Ansichtsfensters nach unten. Der markierte Bereich zeigt die Zusammenfassung der Bereiche des Elements in beiden Frames, in diesem Fall 75% des Ansichtsfensters. Die impact fraction ist daher 0,75.

Distance fraction

Der zweite Teil der Gleichung misst die Entfernung, die instabile Elemente zurücklegen, abhängig von ihrem Ausgangspunkt. Die distance fraction ist dabei die größte Entfernung aus allen instabilen Elementen, die sich zwischen den Frames bewegt haben (vertikal oder horizontal), dividiert durch die größte Dimension des Ansichtsfeldes (Breite oder Höhe, je nachdem was größer ist).

>>> Bild einfügen <<<

In diesem Beispiel ist die größte Dimension die Höhe und das instabile Element hat sich um 25% des Ansichtsbereichs bewegt. Daher ergibt sich eine distance fraction von 0,25.

 

In diesem Beispiel ist die impact fraction also 0,75 und die distance fraction 0,25 - die layout shift score berechnet sich daher wie folgt:

0.75 * 0.25 = 0.1875

 

Ursprünglich wurde die layout shift score ausschließlich über die impact fraction berechnet. Die distance fraction wurde eingeführt, um übermäßig schlechte Bewertungen von großen Elementen, die sich nur gering bewegen, zu reduzieren.

Im nächsten Beispiel lässt sich sehen, wie zusätzliche Inhalte in einem bereits existierenden Element die layout shift score beeinflusst:

>>> Bild einfügen <<<

 

Der Button erscheint unter dem weißen Textfeld und verschiebt das grüne Textfeld nach unten (und außerhalb des Ansichtsfeldes). Weder der Button, noch das weiße Textfeld ändern ihre Position, deshalb sind sie keine instabilen Elemente.

Die Startposition des grünen Textfeldes verschiebt sich jedoch. Der Teil, der dabei aus dem Sichtfeld rutscht, wird bei der Berechnung der impact fraction nicht berücksichtigt. Die Zusammenfassung aller sichtbaren Bereiche des grünen Textfeldes im ersten Frame - gekennzeichnet durch XXX - nimmt den gleichen Raum ein, wie im aktuellen Frame: 50% des Ansichtsfeldes. Die impact fraction ist also 0,5.

Die disctance fraction wird durch den Pfeil illustriert. Das grüne Textfeld hat sich um etwa 20% nach unten verschoben, daher ist die distance fraction 0,2.

Die layout shift score in diesem Beispiel ist also:

0.5 x 0.2 = 0.1.

 

Erwartete vs. unerwartete layout shifts

Nicht alle layout shifts sind ungewollt. Tatsächlich ändern viele dynamische Webapplikationen regelmäßig die Startposition von Elementen auf einer Seite.

User-initiated layout shifts

Layout shifts ist nur dann ungewollt, wenn User sie nicht erwarten. Andererseits sind layout shifts, die als Reaktion auf eine User-Interaktion (Link anklicken, Button drücken, Eingabe in einem Suchfeld,...) grundsätzlich in Ordnung, solange der shift nahe genug an der Interaktion liegt und damit für die User eindeutig in Verbindung steht.

Beispielsweise könnte eine User-Interaktion eine Netzwerkanfrage auslösen, die eine kurze Zeit zur Bearbeitung braucht. Hier ist es hilfreich, einen Platzhalter zu implementieren, der eine Ladezeit signalisiert, um unangenehme layout shifts zu vermeiden, wenn die Netzwerkanfrage abgeschlossen ist. User, die nicht erkennen, dass etwas lädt, oder kein Gefühl dafür haben, wann ein Inhalt fertig geladen ist, könnten während der Wartezeit auf etwas anderes klicken - etwas, das sich währenddessen verschiebt.