Cumulative Layout Shift (CLS)

article.detail.published-on:

February 18, 2021

article.detail.reading-time:

article.detail.minutes

article.detail.tags:

#Blogartikel #Blogreihe Google Update 2021 #Content #Google #Internet #Touchpoint #Web #Website

Dieser Artikel behandelt das Thema Cumulative Layout Shift (CLS): Was bedeutet das konkret für die eigene Website? Wie wirkt sich das aus und was muss eine Webiste leisten, um gut abzuschneiden?

Cumulative Layout Shift: Was ist das?

Mit der dritten neuen Metrik der Core Web Vitals, dem sogenannten „Cumulative Layout Shift“ (kurz CLS) misst Google die visuelle Stabilität eines Webauftritts. Da sich die wenigsten Website-Betreiber darunter etwas vorstellen können, wird der Begriff am besten anhand einer sehr praktischen Erfahrung erklärt, die die meisten User tagtäglich bei der Nutzung des Internets machen. Man ist gerade dabei einen Artikel zu lesen oder einen Link anzuklicken und plötzlich verschieben sich ohne Vorwarnung einzelne Seitenelement, sodass man den Faden verliert. Da Google erkannt hat, dass es sich dabei um eine ärgerliche Erfahrung handelt, die sich negativ auf die User Experience einer Website auswirkt, wurde CLS als neue Kennzahl zur Beurteilung der Nutzer-Erfahrung aufgenommen.

Wie wirkt sich CLS auf meine Website aus?

Um ihren Nutzern eine möglichst gut User Experience zu bieten, sollten Website-Betreiber darauf achten, dass sich die Seitenelemente während der „Lebensdauer“ der Seite möglichst wenig bewegen. Vor allem auf Websites, bei denen es auf das Anklicken von Links ankommt, beispielsweise um ein Produkt zu bestellen, ist die visuelle Stabilität von ganz zentraler Bedeutung. Im entscheidenden Moment darf es zu keiner Verschiebung von Elementen auf der Seite kommen.

Was muss meine Website leisten, um bei CLS gut abzuschneiden?

Konkret ermittelt der Cumulative Layout Shift die Gesamtsumme der einzelnen Verschiebungswerte für alle während des Aufrufens einer Website unerwartet auftretenden Layout-Verschiebungen. Dies erfolgt über die Berücksichtigung von zwei Werten: Der Impact Fraction und der Distance Fraction. Wenn sich beispielsweise ein Seitenelement um 25 Prozent verschiebt, ergibt sich eine Distrance Fraction von 0,25 und eine Impact Fraction von 0,75. Der CLS-Wert wird durch die Multiplikation der beiden Fraction-Werte berechnet. Im gegebenen Beispiel 0,1875. Dieser Wert wird von Google bereits als verbesserungswürdig eingestuft. Nur Werte unter 0,1 gelten als gut. CLS-Werte über 0,25 beurteilt Google als schlecht.