Skip to main content

Cumulative Layout Shift (CLS)


PDF herunterladen

Was ist der Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift ist ein Wert, der Teil der Core Web Vitals von Google ist und angibt, wie stark sich eine Webseite während des Ladeprozesses der einzelnen Elemente im Browser verändert, ohne dass der Nutzer Einfluss darauf nimmt. Je besser (sprich: niedriger) dieser Wert ist, desto leichter lässt sich die Webseite für den Anwender nutzen.

Layout-Probleme zahlreicher Webseiten

Es gibt Webseiten, die ihren Content scheinbar geladen und via CSS fertig formatiert haben, nur um anschließend noch einmal etwas an ihrem Layout zu verändern. Dies ist für Menschen ärgerlich, die gerade auf eine Schaltfläche klicken oder sie antippen wollen und nun eine andere, nicht gewünschte Aktion ausführen. Diese visuelle Instabilität veranlasste Google dazu, den Cumulative Layout Shift-Wert zu erfinden und zu messen. Je besser der Wert, desto unwahrscheinlicher ist es, dass sich eine Webseite während des Ladens des Contents ohne Zutun des Anwenders verändert, und desto besser die Usability.

Beispiele könnten wie folgt ausfallen:

  • Ein Button, den der Anwender anklicken möchte, verschiebt sich nach unten, weil darüber in der Zwischenzeit ein Werbeelement geladen wurde. Nun folgt ein versehentlicher Klick auf das Werbeelement, was ein Pop-up oder andere, unerwünschte Folgen hat.
  • Ein Textblock, der gerade gelesen wird, verschiebt sich nach links oder rechts, sodass der Leser den Fokus verliert. Auch hier könnten Werbeeinblendungen oder zu spät geladene CSS-Informationen verantwortlich sein.

Was ist ein guter CLS-Score?

Anders als die beiden anderen Metriken der Core Web Vitals – First Input Delay (FID) und Largest Colorful Paint (LCP) – kommt für CLS ein künstlich erschaffener Wert zum Einsatz und keine Millisekunden oder Sekunden:

  • Einen Wert von maximal 0,1 stuft Google als guten CLS-Score ein.
  • Im Raum zwischen 0,1 und 0,25 befindet sich ein mäßiger Score.
  • Alles ab 0,25 und aufwärts wird als schlechter Score definiert.

Es gilt: Je niedriger der Wert, desto besser (und desto besser das Ergebnis der gesamten Seite in der Page Experience). Einen separaten Benchmark für CLS gibt es nicht, gemessen wird immer “live” auf der Webseite.

Wie wird der CLS gemessen?

Google ermittelt den Cumulative Layout Shift durch eine Formel, die die beiden Variablen “impact friction” und “distance friction” miteinander multipliziert.

“Impact friction” bezieht sich auf die Verschiebung eines Webseitenelementes inklusive der bereits genutzten Bildschirmfläche. Nimmt ein Webseitenelement 40 % des Bildschirms ein und verschiebt sich anschließend um 20 %, würde dies einen Score von 0,6 (0,4 + 0,2) ergeben. “Distance friction” meint hingegen die größte Distanz, die sich ein Element in vertikaler oder horizontaler Richtung bewegt hat. Verschiebt sich ein Element um 30 %, ergibt dies einen Score von 0,3. “Impact friction” und “distance friction” werden nun multipliziert, was einen Wert und damit einen Cumulative Layout Shift von 0,18 ergibt (0,6 * 0,3).

Mit einem Add-on für Google Chrome und Chrome-basierte Browser lässt sich der CLS-Score auch automatisch ermitteln. Außerdem kann das Analysetool PageSpeed Insights den CLS-Wert ebenfalls ausgeben und Vorschläge für die Verbesserung der Webseite liefern.

Cumulative Layout Shift optimieren

Fest definierte Größen anstelle von Variablen für Gestaltungselemente einer Webseite beeinflussen den CLS-Wert positiv. Weitere Hilfestellungen, die sowohl auf Seiten der Hardware als auch Software-Veränderungen vornehmen, um den Cumulative Layout Shift in einen grünen Bereich zu bewegen, stellen wir in einem gesonderten Ratgeber bereit.

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Paywall

Was ist eine Paywall? Unter Paywall (deutsch: Bezahlschranke) wird ein Mechanismus im Internet verstanden, mit welchem bestimmte Inhalte einer Website nur nach dem Bezahlen einer Gebühr oder dem Abschluss eines Abonnements sichtbar sind. Dieses Modell wird insbesondere von Zeitungen und Zeitschriften als weitere Einnahmequelle verwendet. Definition Mit einer Paywall ist […]

Newsletter

Was ist ein Newsletter? Ein Newsletter ist ein elektronisches Rundschreiben, das zur Informationsmitteilung in regelmäßigen Abständen an Abonnenten versendet wird. Der Inhalt der E-Mail kann Werbung, Informationen, Neuigkeiten, Termine oder Aktionen umfassen. Newsletter sind ein Bestandteil des E-Mail-Marketings. Definition Der englische Begriff „Newsletter“ bezeichnet im Online-Marketing einen Rundbrief in elektronischer […]

WLAN – Einfach und verständlich erklärt

Was ist WLAN? Der Begriff WLAN (auch Wireless LAN oder Wi-Fi) ist eine Abkürzung für das englische “Wireless Local Area Network” (zu Deutsch: drahtloses lokales Netzwerk). Innerhalb dieses drahtlosen Funknetzwerks, das in der Regel auf einem Standard der IEEE-802.11-Familie basiert, sind WLAN-fähige Geräte wie Drucker, Computer, Smartphones oder Tablets in […]

Bit.ly – Einfach und verständlich erklärt

Was ist Bit.ly? Bitly (auch bitly oder bit.ly geschrieben) ist ein 2008 von Peter Stern gegründetes Tech-Unternehmen mit Sitz in New York. Kerngeschäft der SaaS-Firma ist der Betrieb des gleichnamigen Kurz-URL-Dienstes. Dieser lässt sich wahlweise über die Website bit.ly (oder bitly.com), mittels API oder über die für iOS und Android […]

Data Warehouse – Einfach und verständlich erklärt

Was ist ein Data Warehouse? Bei einem Data Warehouse (manchmal auch Datenlager genannt, kurz: DWH) handelt es sich um ein zentrales Datenbanksystem, das sich in Unternehmen zu Analyse- und Prognosezwecken einsetzen lässt. Für diesen Zweck sammelt und verdichtet das System relevante Daten aus verschiedenen heterogenen Datenquellen wie zum Beispiel dem Customer Relationship Management (CRM), Human Resources (HR) oder Enterprise Resource Planning (ERP) und stellt diese nachgelagerten Anwendungen zur Verfügung. […]

Pinterest

Was ist Pinterest? Pinterest ist eine Online-Pinnwand für Grafiken und Fotos, die im Jahr 2010 gegründet wurde. Der Begriff “Pinterest” ist ein Kofferwort aus den englischen Wörtern pin ‚anheften‘ und interest ‚Interesse‘. User können sich verschiedene Bilder und Videos auf eigenen Pinnwänden merken, die entweder öffentlich oder privat einsehbar sind. […]