Was bedeutet Cumulative Layout Shift (CLS) und wie optimiert man dafür?

Cumulative Layout Shift (CLS) ist eine Google Metrik, die dazu geeignet ist die Nutzer Erfahrung auf einer Website zu beurteilen. Angeblich soll CLS auch ein Ranking Faktor sein und deshalb muss man sich genauer damit beschäftigen.

Wie äußert sich CLS?

Während eine Webseite vom Browser geladen und gerendert wird, können sich Elemente verschieben. Meistens handelt es sich dabei um Schriftarten, Bilder, Schaltflächen, Formulare oder Videos. Ja, eben Elemente aus denen eine Website in den allermeisten Fällen besteht. Es handelt sich dabei um ein Problem mit der Programmierung und kann folglich auch gelöst werden.

Laut Google verursachen eingebettete Bilder ohne Größenangaben häufig Verschiebungen, genau wie iframes ohne Größenangaben und andere eingebettete Objekte. Bei responsiven Bildern ist es ratsam Bilder für die verschiedenen Viewports im selben Verhältnis skalieren zu lassen. Google schlägt zur Berechnung des Aspect Ratios sogar ein passendes Tool vor.

Design Verschiebungen werden auch häufig durch eingebettete Werbeanzeigen ausgelöst. Um das zu umgehen kann man das Element “stylen” welches die Werbeanzeige umgibt. Legt man bspw. für das umgebende <div> Element Größenangaben fest, so wird auch die Werbeanzeige immer in der richtigen Größe ausgespielt. Bei mangelndem Werbeinventar muss man einen Platzhalter für den Werbebanner anzeigen lassen, damit kein Shift auftritt.

Manchmal machen auch dynamisch eingefügte Objekte, wie Youtube Videos, Probleme. Mit SISTRIX kann man die CLS messen und erkennen ab welchem Datum sich diese verändert hat. Wurde an diesem Tag “dynamically injected content” auf die Website gepackt, dann könnte diese Änderung dafür verantwortlich sein. Muss auf eine Netzwerk Antwort gewartet werden bevor das Document Object Model (DOM) geladen wird kann es ebenfalls zu ungewollten Verschiebungen kommen.

Ein weiterer üblicher Verdächtiger sind auch Web Fonts, die von einer externen Quelle runtergeladen werden. Flash of invisible text (FOIT) oder Flash of Unstyled Text (FOUT) sind dabei die Symptome. Zu Beginn der Web Font Ära wurden Fallback-Schriftarten definiert und angezeigt bis der Web Font geladen war (FOUT). Danach gingen Browser dazu über Inhalte, die mit einem Web Font formatiert wurden so lange zu verstecken bis der Download des Fonts abgeschlossen war (FOIT). Beides kann CLS hervorrufen und wirkt sich damit negativ auf das Ranking der Website aus.

Gute Lösungen zur CLS Optimierung findet man hier.

Hallo! Wollen Sie ein Erstgespräch, ein Seminar oder eine andere Leistung anfragen? Dann hinterlassen Sie mir eine kurze Nachricht.
Das ist OK!
Dipl. Ing. (FH) Armin Müller
Digital Marketing Spezialist
Overlay Image
Dipl. Ing. (FH) Armin Müller
Digital Marketing Spezialist
Das ist ok!
Overlay Image
WOLLEN SIE NEUE KUNDEN?
Preiswert, schnell und nachhaltig
Ist OK!
Overlay Image
SIE WOLLEN NEUE KUNDEN?
Neuer Online-Marketing Service
Alles klar! Ich bin einverstanden.