In den letzten Beiträgen haben wir uns die Core Web Vitals Metriken Largest Contentful Paint und First Input Delay genauer angesehen. In diesem Beitrag zeigen wir Ihnen Informationen zum dritten und letzten Messwert Cumulative Layout Shift.
Haben Sie auch schon mal folgende Erfahrung gemacht: Sie laden eine Website und genau in dem Moment in dem Sie auf einen Link klicken, verschiebt plötzlich eine Werbeanzeige den Link, welchen Sie gerade anklicken wollten, nach unten und Sie klicken stattdessen auf die Werbeanzeige?
Das ist sehr ärgerlich und führt zu einer schlechten User-Experience. Eigentlich möchten Sie auch gar nicht mehr auf dieser Seite bleiben, oder?
Die benutzerzentrierte Metrik Cumulative Layout Shift gibt an, wie häufig es zu unerwarteten Layoutverschiebungen kommt. Diese Verschiebungen sind für Benutzer sehr störend und können zu Frustration und einem schnellen Absprung führen. Die Metrik CLS hilft beim Messen dieser Verschiebungen. Je mehr Verschiebungen es gibt, umso höher ist dieser Messwert. Ein niedriger CLS-Wert ist daher sehr wichtig und trägt dazu bei, dass die Seite für den Benutzer ansprechend ist.
Bei der Messung des Cumulative Layout Shift wird die Summe der Layoutverschiebungen für alle unterwarteten Verschiebungen ermittelt, welche während der gesamten Lebensdauer der Seite auftreten.
Von einer Layoutverschiebung spricht man immer, wenn ein sichtbares Element seine Position zwischen zwei Frames ändert.
Um eine gute User-Experience sicherzustellen, sollte der CLS-Wert 0,1 nicht übersteigen. Dieser Wert sollte bei mindestens 75% der Besucher erreicht werden.
Verschiebungen des Layouts werden von der Layout Instability API definiert, welche Layouterverschiebungseinträge immer dann meldet, wenn ein im Viewport sichtbares Element, seine Startposition (i.d.R. die linke obere Ecke des Elements) zwischen zwei Frames ändert. Solche Elemente werden als instabile Elemente betrachtet.
Wenn Sie ein neues Element zum DOM hinzufügen oder die Größe eines bestehenden Elementes ändern, kommt es nicht pauschal zu einer Layoutverschiebung. Wird hierdurch allerdings die Startposition eines anderen sichtbaren Elements verändert, dann wird diese als Verschiebung gewertet.
Bei der Berechnung des Layout shift score betrachtet der Browser die Größe des Viewports und die Bewegung instabiler Elemente im Viewport zwischen zwei gerenderten Frames. Der Layout-Verschiebungs-Score ist ein Produkt aus zwei Maßen dieser Bewegung:
dem Impact Fraction und dem Distance Fraction
layout shift score = impact fraction * distance fraction
Die Impact Fraction misst, wie instabile Elemente den Viewport Bereich zwischen zwei Frames beeinflussen.
Der Zusammenschluss der sichtbaren Bereiche aller instabilen Elemente des letzten und des aktuellen Frames ergeben die Impact Fraction für den aktuellen Frame.
Impact Fraction Rechnung
500,25 / 667 = 0,75
Der andere Teil der Layout shift score Berechnung misst die Entfernung, um die sich instabile Elemente relativ zum Viewport verschoben haben.
Bei der Distance Fraction wird der größte Abstand, um den sich ein instabiles Element im Frame bewegt hat, geteilt durch Breite oder Höhe (je nachdem welcher Wert größer ist), verwendet.
Distance Fraction Rechnung
0,75 * 0,25 = 0,1875
Neben den bisher erwähnten unerwarteten Verschiebungen gibt es natürlich auch erwartete. Klickt ein Benutzer auf einen Link oder Button, erwartet er natürlich auch eine Reaktion des Layouts.
Wie kann man den CLS messen?
Im kommenden Beitrag beschäftigen wir uns ausführlich mit der Messung der Core Web Vitals.
Sie haben Interesse an einer Zusammenarbeit mit uns? Dann nehmen Sie jetzt ganz unverbindlich mit uns Kontakt auf.
SCHÖTEX IT-Solutions GmbH
Heinz-Paulisch-Straße 5
97816 Lohr a. Main
Öffnungszeiten:
Mo - Fr: 08:30 - 12:30 Uhr
Mo - Do: 13:30 - 17:00 Uhr
