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

Erstellt am von

Cumulative Layout Shift

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

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:

 

Wie im obigen Beispiel haben wir ein Block-Element mit einer Höhe von 50%.

 

Bei der Verschiebung kommt es zu einer Verschiebungsdistanz von 25% der Höhe.

 

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.

Gerne unterstützen wir auch Sie bei der Optimierung der Web-Vitals-Messwerte Ihrer Website!

Kontaktieren Sie uns!

Bahadir Heeb

Bahadir Heeb ist Projektleiter in unserer Web-Abteilung. Seit 2009 ist Bahadir Heeb bei SCHÖTEX und unser Experte, wenn es um Web-Entwicklung, Online-Marketing und User-Experience geht. Als Ausbilder ist er zudem für die Ausbildung unserer Auszubildenden verantwortlich.


Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 4 plus 2.

Kontaktieren Sie uns

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 am Main

Mit dem Absenden des Kontaktformulars erklären Sie sich damit einverstanden, dass wir die angegebenen Daten gemäß unserer Datenschutzerklärung zur Bearbeitung Ihrer Anfrage verarbeiten können.

Was ist die Summe aus 2 und 5?