Wie man CLS auf null bringt.

CLS misst, wie stark sich Inhalte unerwartet verschieben, während eine Seite lädt oder benutzt wird, und Google zählt unter 0,1 als gut.

Von den drei Core-Web-Vitals-Metriken entspricht diese dem greifbarsten Erlebnis: Der Text, den Sie zu lesen begannen, rutscht unter Ihnen weg, der Button, den Sie drücken wollten, wandert, und Sie tippen daneben. Eine Quelle des Ärgers, die jeder kennt und die niemand benannt hatte.

Die Rechnung hat zwei Faktoren: wie viel des Bildschirms die verschobene Fläche einnimmt und wie weit sie sich bewegte. Eine kleine Verschiebung eines großen Elements oben im Bildschirm wird deshalb stärker bestraft als eine große eines kleinen Elements unten — und genau das stört den Nutzer wirklich.

Unerwartet muss es sein

Die Metrik zählt nur UNERWARTETE Verschiebungen. Die Verschiebung, die entsteht, wenn der Nutzer einen Button drückt und ein Menü öffnet, zählt nicht, denn der Nutzer erwartete sie. Der Browser unterscheidet das, indem er prüft, ob in der halben Sekunde vor der Verschiebung eine Nutzerinteraktion stattfand.

Diese Ausnahme heißt, dass Komponenten wie Akkordeons und Dropdowns frei sind — aber nur für Verschiebungen direkt nach der Interaktion. Eine nach der halben Sekunde entstehende Verschiebung zählt weiterhin, und das ist eine Falle bei verzögerten Animationen.

Vier häufige Quellen

Auf echten Websites kommt die Verschiebung fast immer aus einer derselben vier Stellen, und alle vier haben bekannte Lösungen.

1. Bilder ohne Maße — ohne deklarierte Breite und Höhe kann der Browser keinen Platz reservieren; kommt das Bild, drückt es alles darunter nach unten.
2. Der Schrifttausch — mit der Ersatzschrift gemalter Text braucht anderen Platz, wenn die echte Schrift kommt.
3. Später eingefügte Inhalte — Werbung, Benachrichtigungsleisten, Cookie-Banner. ÜBER bestehendem Inhalt eingefügt, schieben sie alles.
4. Einbettungen ohne Maße — Videoplayer, Karten, Social-Media-Boxen. Sie melden ihre Größe spät.

Der erste Punkt ist der häufigste und der billigste: Breite und Höhe ans Bild schreiben. Moderne Browser berechnen aus den beiden Werten das Seitenverhältnis und reservieren auch im responsiven Layout den richtigen Platz. Eine einzeilige Korrektur schließt den Großteil der CLS-Quellen.

Für den dritten Punkt lautet die Regel: Später kommender Inhalt gehört nicht über den bestehenden, sondern entweder in seinen eigenen reservierten Platz oder auf eine Ebene, die den Inhaltsfluss nicht berührt. Eine nachträglich ganz oben eingefügte Benachrichtigungsleiste ist eine der zerstörerischsten Verschiebungsquellen.

Der auf dieser Website gemessene Wert

Die gemessene Layoutverschiebung dieser Website und der drei von ihr betreuten Live-Projekte ist 0,001 — ein Prozent von Googles guter Schwelle 0,1. Kein Glück, sondern das Ergebnis einer Disziplin: Jedes Bild kommt mit Maßen, die Ersatzschrift passt metrisch, und keine eingefügte Ebene betritt den Inhaltsfluss.

Die Prüfsuite bindet die Schwelle bei 0,05 — der Hälfte dessen, was Google erlaubt — und misst bei jedem Lauf. Das Budget unter der offiziellen Schwelle zu halten ist bewusst: Kommt eines Tages eine Regression, soll sie sichtbar werden, bevor sie an die Schwelle stößt.

Das Budget bleibt unter der offiziellen Schwelle, damit die Regression sichtbar wird, bevor sie an die Schwelle stößt.

Was die klassische Messung nicht sehen kann

Die wichtigste Warnung kommt zuletzt. Die klassische Messung der Layoutverschiebung schaut auf das Ladefenster der Seite. Verschiebungen nach dem Beginn des Scrollens sind in diesem Fenster unsichtbar — doch der Nutzer erlebt genau sie.

Genau so ein blinder Fleck wurde auf dieser Website gefunden: Die beim Laden gemessene Verschiebung lag nahe null, aber beim Scrollen, beim Loslassen eines fixierten Abschnitts, entstand eine Verschiebung. Die klassische Messung sah sie nie.

Nach der Korrektur kam ein eigener Wächter hinzu: Die Verschiebung beim Scrollen wird mit Googles Sitzungsfenster-Logik gemessen, und das schlechteste Fenster muss unter 0,08 bleiben. Das ist eine Frage, die kein allgemeines Werkzeug stellt — und nur ein Test fängt, der sie stellt.

Animation und Übergänge

Es gibt zwei Wege, ein Element zu bewegen, und für CLS verhalten sie sich völlig verschieden. Position oder Größe über Layouteigenschaften zu ändern zwingt den Browser zur Neuberechnung des Layouts und verschiebt alles ringsum — das erzeugt CLS direkt.

Transform und Opazität dagegen berühren das Layout nie; das Element bewegt sich auf seiner eigenen Ebene und die Nachbarn bleiben stehen. Die Regel performanter Animation ist deshalb ein Satz: Verwenden Sie nur Transform und Opazität.

Die Regel ist zugleich ein Geschwindigkeitsgewinn: Diese zwei Eigenschaften können auf der GPU-Ebene des Browsers verarbeitet werden und belegen den Hauptthread nicht. Die richtige Animationstechnik schützt also CLS und INP zugleich.

Auf dieser Website ist die gesamte Bewegungsschicht unter dieser Auflage gebaut, und die Prüfsuite misst zusätzlich das Frame-Budget: Die mediane Frame-Zeit muss unter 12 Millisekunden bleiben, das 95. Perzentil unter 24. Beide Schwellen leiten sich vom Ziel von sechzig Bildern pro Sekunde ab.

Das Messfenster

In der Rechnung der Metrik steckt eine wissenswerte Feinheit: Die Gesamtverschiebung wird nicht über die ganze Lebensdauer der Seite summiert. Google teilt die Verschiebungen in Sitzungsfenster — nah beieinanderliegende sammeln sich in einem Fenster, und berichtet wird der Wert des SCHLECHTESTEN Fensters.

Auf langen Seiten macht das einen echten Unterschied. Eine Seite mit Hunderten Verschiebungen kann gut ausfallen, wenn alle klein und verstreut sind; drei große an einer Stelle stoßen die Seite ins Rot. Das Problem ist nicht die Summe, sondern die Dichte.

Auf dieser Website wird die Verschiebung beim Scrollen mit genau dieser Logik gemessen: Die Fenster werden berechnet, und das schlechteste muss unter 0,08 bleiben. Dass die Messung dieselbe Rechnung wie Google verwendet, garantiert, dass der Test wirklich dasselbe misst.

Eine letzte praktische Notiz: Der ehrlichste Weg, Layoutverschiebung zu messen, ist der Test mit langsamem Netz und simuliertem schwachem Gerät. Auf einer schnellen Maschine kommt alles fast gleichzeitig, und die Verschiebungen zeigen sich nie; in einer verlangsamten Umgebung tauchen sie nacheinander auf, und jede Quelle lässt sich einzeln markieren. Die Entwicklerwerkzeuge des Browsers bieten beide Simulationen, und die nützlichste Einstellung der Verschiebungsjagd ist, beide zusammen einzuschalten.