Cumulative Layout Shift (CLS) – Core Web Vitals (Teil 4)

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?

Benutzerzentrierte Metrik CLS

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.

Was ist der Cumulative Layout Shift?

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.

Was ist ein guter CLS Wert?

Um eine gute User-Experience sicherzustellen, sollte der CLS-Wert 0,1 nicht übersteigen. Dieser Wert sollte bei mindestens 75% der Besucher erreicht werden.

Layoutverschiebungen im Detail

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.

Layout shift score

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

Impact 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.

Beispiel:

Impact Fraction Rechnung

500,25 / 667 = 0,75

Distance fraction

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.

Unser Beispiel:

Distance Fraction Rechnung

0,75 * 0,25 = 0,1875

Erwartete und unerwartete Layoutverschiebungen

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?

• Field Tools
  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
• Lab tools
  • Chrome DevTools
  • Lighthouse
  • WebPageTest

Wie geht es weiter?

Im kommenden Beitrag beschäftigen wir uns ausführlich mit der Messung der Core Web Vitals.

Beitragsserie "Core Web Vitals"

• Teil 1: Google Page Experience Update und Core Web-Vitals
• Teil 2: Largest Contentful Paint (LCP)
• Teil 3: First Input Delay (FID)
• Teil 4: Cumulative Layout Shift (CLS) (dieser Beitrag)
• Teil 5: Messen der Core Web Vitals