Was ist der CLS?

Cumulative Layout Shift misst, wie stark sich der Inhalt einer Seite von selbst bewegt, während der Nutzer sie ansieht. Gezählt werden weder Pixel noch Sekunden, sondern eine einheitenlose Punktzahl aus zwei Größen: welcher Teil des Bildschirms betroffen war und welche Strecke das Verschobene zurückgelegt hat.

Google wertet einen Wert bis 0,1 als gut, bis 0,25 als verbesserungswürdig und darüber als schlecht. Wie bei den übrigen Felddaten wird am 75. Perzentil echter Besuche bewertet, nicht an einem Labortest, genau wie beim LCP und beim INP.

Das Wort „kumulativ“ im Namen führt in die Irre, denn summiert wird nicht der ganze Besuch. Seit 2021 zählt das Sitzungsfenster mit der höchsten Punktzahl: ein Abschnitt von höchstens fünf Sekunden, in dem die Sprünge mit Lücken von unter einer Sekunde aufeinanderfolgen. Eine lange Seite mit verteilten Verschiebungen sammelt also keinen riesigen Wert an, nur weil sie lang ist.

Dieses Detail wiegt in der Praxis schwerer, als es klingt. Vor der Änderung schnitten ein umfangreicher Artikel oder eine endlos nachladende Liste schlechter ab als eine kurze Seite mit demselben Fehler, und das belohnte inhaltsarme Seiten, ohne dass ihr Verhalten besser gewesen wäre.

Die Formel lohnt einen Blick, weil sie erklärt, was eine Änderung wirklich behebt. Die Punktzahl jeder Erschütterung multipliziert zwei Anteile: den betroffenen Teil des Bildschirms und die zurückgelegte Strecke im Verhältnis zur sichtbaren Höhe oder Breite. Ein schmales Banner, das weit rutscht, kann genauso punkten wie ein großer Block, der wenig rutscht.

Daraus folgt etwas Unerwartetes: Ein kleines Element ganz oben zu verschieben kostet meist mehr als ein großes am Seitenende, weil es alles Nachfolgende mitzieht. Die lohnendsten Korrekturen sitzen deshalb fast immer im Kopfbereich der CMS-Vorlage und nicht im Artikeltext.

Hier steckt das teuerste Missverständnis der Kennzahl. Nicht jede Bewegung wird bestraft: Verschiebungen innerhalb von 500 Millisekunden nach einer Nutzerinteraktion gelten als erwartet und bleiben außen vor.

Das ist folgerichtig. Klappt jemand ein Menü auf und rutscht der Inhalt darunter nach unten, hat er genau das verlangt. Es zu bestrafen würde zu starren Oberflächen zwingen, nur um eine Kennzahl zufriedenzustellen, und das ist das Gegenteil dessen, was sie erreichen soll.

Praktisch folgt daraus: Die schlechtesten Werte kommen nicht von interaktiven Oberflächen, sondern von Inhalt, der zu spät eintrifft — ein Werbebanner, ein Einwilligungshinweis, eine Schrift, die eine andere ersetzt, ein Bild ohne angegebene Maße. All das passiert ungefragt, und deshalb zählt es voll.

Die 500-Millisekunden-Regel hat eine Kante, die man kennen sollte. Sie gilt für die Interaktion, nicht für das, was die Interaktion auslöst: Startet ein Klick eine Anfrage, die zwei Sekunden braucht und danach den Inhalt verschiebt, liegt diese Bewegung außerhalb des Fensters und zählt voll.

Genau hier sitzt der häufigste Fall in Shops: ein Katalogfilter, der die Ergebnisse neu lädt. Der Nutzer klickt, sichtbar passiert nichts, und nach zwei Sekunden springt die Liste. Formal hat er es ausgelöst; für die Kennzahl und für den Nutzer ist es eine unerwartete Erschütterung. Die Lösung ist, den Platz zu reservieren und dort, wo das Ergebnis erscheinen wird, einen Ladezustand zu zeigen.

Bilder und Videos ohne Maße. Die häufigste Ursache und die am leichtesten zu behebende: width und height im Tag angeben oder eine aspect-ratio im CSS setzen, damit der Browser den Platz reserviert, bevor er die Datei hat. Das greift direkt in das verzögerte Laden ein, denn ein verzögert geladenes Bild trifft noch später ein und der Sprung fällt stärker auf.

Anzeigen, Einbettungen und Hinweise. Ein Block, dessen Größe vorher nicht bekannt ist, schiebt beim Erscheinen alles darunter weg. Die Lösung ist, den Mindestplatz vorab zu reservieren, auch wenn eine Lücke bleibt, falls der Block ausbleibt.

Schriften, die beim Laden ausgetauscht werden. Der Browser zeichnet zuerst mit einer Systemschrift und wechselt, sobald die endgültige da ist; unterscheiden sich beide in ihren Maßen, setzt sich der ganze Text neu. Steuern lässt sich das über font-display und über Ersatzschriften mit ähnlichen Proportionen.

Inhalt, der über bereits Gelesenes gesetzt wird. Ein Angebotshinweis, der ganz oben erscheint, schiebt den Artikel genau dann nach unten, wenn der Nutzer den gesuchten Absatz gefunden hatte. Dieser Fall ist reines UX und braucht keine Kennzahl, um aufzufallen.

Es gibt eine fünfte Ursache, die in den üblichen Listen fehlt und in Prüfungen regelmäßig auftaucht: der Messcode selbst. Heatmap-Werkzeuge, eingeblendete Umfragen und Hinweisleisten, die über den Google Tag Manager geladen werden, fügen sich per Definition nach dem ersten Zeichnen ein, also im denkbar schlechtesten Moment.

Das gehört so regelmäßig geprüft wie alles andere: Jedes für eine Kampagne ergänzte Skript ist ein Kandidat dafür, Inhalt zu verschieben, und weil es über die Oberfläche installiert wird, ohne die Vorlage anzufassen, durchläuft es keine Prüfung im technischen SEO. Einen festen Streifen für die Hinweisleiste zu reservieren, statt sie schieben zu lassen, löst den Fall vollständig.

Beim CLS gehen Labortest und echte Daten weiter auseinander als bei jeder anderen Kennzahl, und der Grund ist einfach: Ein automatisches Werkzeug lädt die Seite und bleibt stehen. Es scrollt nicht, bestätigt keinen Cookie-Hinweis und wartet nicht auf das Banner, das nach acht Sekunden kommt.

Der echte Nutzer tut all das, und viele der schlimmsten Verschiebungen passieren genau beim Scrollen, wenn Blöcke ins Bild kommen, für die noch kein Platz reserviert war. Ein grünes Labor bei rotem Feld ist deshalb kein Widerspruch, sondern der Normalfall.

Für die Arbeit heißt das: Hier sieht man zuerst in die Daten aus Google Search Console und benutzt das Labor nur, um einen bekannten Fall nachzustellen. Eine Heatmap hilft dabei zu sehen, wie weit die Leute tatsächlich nach unten kommen, denn dort muss man suchen.

Um einen konkreten Fall im Browser nachzustellen, gibt es einen kurzen Weg: das Leistungs-Panel öffnen, beim langsamen Scrollen durch die Seite aufzeichnen und die Verschiebungsmarken auf der Zeitachse ansehen. Jede benennt das schuldige Element, und fast immer ist es in einer ganzen Vorlage dasselbe.

Danach lohnt der Abgleich mit dem, was die Leute tatsächlich tun. Kommt der Traffic vor allem mobil, muss mobil geprüft werden, denn die Mobile-First-Indexierung entscheidet, und die Breite ändert, welche Blöcke welche schieben. Und wie bei den anderen Felddaten brauchen die Werte Wochen, am Folgetag zu messen sagt nichts.

• Eine Oberfläche so umbauen, dass sich nie etwas bewegt, obwohl vom Nutzer ausgelöste Bewegungen gar nicht zählen.
• Nur den Artikelbildern Maße geben und die Werbeflächen vergessen, die am stärksten schieben.
• Sich auf den Labortest verlassen, der weder scrollt noch den Einwilligungshinweis bestätigt.
• Eine Vorlage korrigieren und am nächsten Tag messen: Das Feldfenster umfasst 28 Tage, genau wie beim LCP und beim INP.
• Den CLS als Schönheitsfrage behandeln. Ein Sprung im Moment des Klicks auf „Kaufen“ ändert das Ziel des Klicks, und das geht unmittelbar am CRO vorbei und von der Conversion ab.