Cumulative Layout Shift
Cumulative Layout Shift ist eine Messzahl dafür, wie stark Inhalte auf einer Internetseite beim Laden noch verrutschen. Je höher der Wert, desto unruhiger wirkt die Seite und desto eher klickt man versehentlich auf das Falsche.
Du öffnest eine Internetseite und beginnst zu lesen. Plötzlich springt der Text nach unten, weil über ihm noch ein Bild nachgeladen wurde. Genau diese Sprünge misst der Cumulative Layout Shift, kurz CLS. Der Name bedeutet übersetzt ungefähr « aufsummierte Verschiebung des Seitenaufbaus ». Die Messzahl addiert alle Sprünge, die während des Ladens passieren, zu einem einzigen Wert. Ein Wert von 0 heißt: nichts hat sich bewegt. Werte über 0,25 gelten als schlecht.
Warum springende Seiten Geld kosten
Der offensichtliche Grund ist Ärger beim Lesen. Wer eine Zeile sucht, die gerade weggerutscht ist, verliert den Faden. Noch unangenehmer wird es bei Knöpfen. Du willst auf « Weiterlesen » tippen, im selben Moment schiebt sich eine Werbung dazwischen, und du landest auf einer fremden Seite. In Onlineshops kann derselbe Fehlklick eine Bestellung auslösen oder abbrechen.
Deshalb ist CLS keine reine Geschmacksfrage. Google zählt den Wert zu den sogenannten Core Web Vitals. Das sind drei Kennzahlen für Ladegeschwindigkeit, Reaktionszeit und optische Stabilität einer Seite. Sie fließen in die Bewertung ein, mit der Google entscheidet, wie weit oben eine Seite in den Suchergebnissen erscheint. Der Einfluss ist nicht riesig, aber messbar.
Für Betreiber von Nachrichtenseiten oder Shops hängt daran direkt Umsatz. Wer bei Google auf Seite zwei rutscht, verliert einen großen Teil seiner Besucher. Große Anbieter haben nach Messungen berichtet, dass ruhigere Seiten auch länger gelesen werden. Ein niedriger CLS ist also billiger zu haben als neue Werbung.
Wie aus Sprüngen eine Zahl wird
Der Browser beobachtet während des Ladens jedes sichtbare Element. Verschiebt sich eines, ohne dass der Nutzer gescrollt oder geklickt hat, wird das als Layout Shift gezählt. Für jeden Sprung rechnet der Browser zwei Dinge zusammen. Erstens: Wie viel Prozent des Bildschirms war von der Bewegung betroffen? Zweitens: Wie weit ist der Inhalt gerutscht, gemessen an der Bildschirmhöhe oder -breite? Beide Werte werden multipliziert, alle Ergebnisse addiert.
Ein Beispiel: Ein Textblock füllt die halbe Höhe des Bildschirms und rutscht um ein Viertel der Bildschirmhöhe nach unten. Das ergibt 0,5 mal 0,25, also 0,125. Zwei solche Sprünge auf einer Seite reichen schon, um die Schwelle für « gut » zu überschreiten. Diese liegt bei 0,1.
Die häufigste Ursache sind Bilder ohne angegebene Größe. Der Browser weiß erst beim Laden, wie viel Platz sie brauchen, und schiebt danach alles darunter weg. Die Lösung ist simpel: Höhe und Breite im Quelltext festlegen, damit der Platz von Anfang an reserviert ist. Ähnlich funktioniert es bei Werbeflächen und Bannern zur Cookie-Einwilligung. Auch Schriftarten, die nachgeladen werden, können Text umbrechen lassen.
Wo dir CLS im Netz über den Weg läuft
Am direktesten spürst du CLS auf dem Handy. Kleine Bildschirme und langsame Mobilfunkverbindungen machen jedes Nachladen sichtbar. Nachrichtenseiten mit viel Werbung sind ein Klassiker: Der Artikel steht schon da, dann öffnen sich nacheinander drei Anzeigenplätze.
Wer selbst nachmessen will, braucht keine teure Software. Googles kostenloses Werkzeug PageSpeed Insights zeigt für jede öffentliche Adresse den CLS-Wert an, zusammen mit den Stellen, die für die Sprünge verantwortlich sind. In den Entwicklerwerkzeugen von Chrome lässt sich das Ganze live beobachten.
In Wirtschaftsnachrichten taucht der Begriff meist im Umfeld von Suchmaschinenoptimierung auf. Ein verbreiteter Irrtum ist dabei, CLS mit Ladegeschwindigkeit gleichzusetzen. Eine Seite kann blitzschnell erscheinen und trotzdem einen schlechten CLS haben, weil sie danach unruhig bleibt. Umgekehrt kann eine langsame Seite völlig stabil aufbauen. Gemessen wird nicht Tempo, sondern Ruhe.