Wie Cumulative Layout Shift wirklich berechnet wird

Was ist Cumulative Layout Shift (CLS)?

Chrome misst Cumulative Layout Shift als die größte Serie unerwarteter Layout-Bewegungen während der Lebensdauer einer Seite, wobei jede einzelne Verschiebung mit impact fraction multipliziert mit distance fraction bewertet wird und die Serie mit dem höchsten Wert zum CLS der Seite wird. Die Metrik existiert, weil Inhalte, die unter dem Finger des Lesers wegspringen, ihn den Tap kosten, den er gerade machen wollte. Zwei Zahlen entscheiden über jeden Wert: wie viel des Viewports sich bewegt hat und wie weit es gewandert ist.

Der Name sorgt für die meiste Verwirrung. "Kumulativ" beschreibt, was innerhalb einer Serie passiert, nicht über die ganze Seite hinweg, deshalb können vierzig kleine Verschiebungen über drei Minuten besser abschneiden als zwei Verschiebungen im Abstand einer halben Sekunde.

Wie wird ein Layout-Shift-Wert berechnet?

Die vom Chrome-Team auf web.dev veröffentlichte Formel, geprüft am 8. September 2026, ist eine einzige Multiplikation:

layout shift score = impact fraction × distance fraction

Die impact fraction ist die Vereinigung der sichtbaren Fläche, die ein instabiles Element im vorherigen Frame eingenommen hat, und der Fläche, die es im aktuellen Frame einnimmt, geteilt durch die gesamte Viewport-Fläche. Die distance fraction ist die größte horizontale oder vertikale Distanz, die ein instabiles Element in diesem Frame zurückgelegt hat, geteilt durch die größte Abmessung des Viewports, Breite oder Höhe, je nachdem, welche größer ist.

Rechnen Sie eine Verschiebung von Anfang bis Ende durch. Nehmen Sie einen mobilen Viewport mit 400px Breite und 800px Höhe, die größte Abmessung ist also 800px. Eine Artikelüberschrift über die volle Breite und ihr erster Absatz belegen die oberen 400px, also die Hälfte des Viewports. Ein Consent-Banner schiebt sich dann darüber und drückt den Block um 160px nach unten.

0.7 × 0.2 = 0.14

Ein einziges Banner hat 0.14 erzeugt, was bereits im Bereich "Verbesserung nötig" liegt. Die beiden Brüche begrenzen einander: ein winziges Element erreicht einen niedrigen Wert, selbst wenn es über den ganzen Bildschirm wandert, und ein Block über den ganzen Viewport erreicht einen hohen Wert, selbst wenn er nur 20px wandert.

Warum ist CLS nicht die Summe aller Verschiebungen?

CLS meldet das einzelne Session-Fenster mit dem höchsten Wert, keine laufende Summe. Ein Session-Fenster öffnet sich bei der ersten Verschiebung und bleibt offen, solange weitere Verschiebungen in Abständen von weniger als 1 Sekunde eintreffen, bis zu einer maximalen Fensterdauer von 5 Sekunden. Sobald eine Lücke von 1 Sekunde oder mehr vergeht oder das Fenster 5 Sekunden erreicht, schließt dieses Fenster, und die nächste Verschiebung startet ein neues. Der Browser bewertet jedes Fenster einzeln und meldet das größte.

Führen Sie das Beispiel von oben fort. Die Banner-Verschiebung mit 0.14 landet bei 1.2s. Eine Webschrift wird bei 1.5s ausgetauscht und formatiert einen Absatz mit 0.03 um. Die Lücke beträgt 300ms, also gehören beide zu einem Fenster mit dem Wert 0.17. Ein per Lazy Loading nachgeladenes Embed verschiebt dann bei 4.0s den Footer um 0.05, also 2.5 Sekunden nach der letzten Verschiebung, und öffnet damit sein eigenes Fenster.

Das CLS der Seite ist 0.17, der größere der beiden Werte, nicht 0.22. Wer der Summe hinterherjagt, landet bei der falschen Verschiebung: Finden Sie das Fenster mit dem höchsten Wert und reparieren Sie, was darin steckt.

Was zählt als unerwartete Layout-Verschiebung?

Eine Verschiebung zählt als unerwartet, sofern sie nicht innerhalb von 500 Millisekunden auf eine Nutzerinteraktion folgt. Chrome markiert jede Verschiebung, die kurz nach einem Tap, Klick oder Tastendruck aufgetreten ist, mit hadRecentInput, und diese Verschiebungen werden vom Wert ausgeschlossen, weil ein Leser, der ein Accordion geöffnet hat, erwartet, dass sich der Inhalt darunter bewegt.

Diese 500ms-Regel ist ein Design-Hebel, kein Implementierungsdetail. Ein "Mehr laden"-Button kostet nichts, und derselbe Inhalt, den ein Timer einfügt, kostet genau das, was die Formel sagt.

Was verursacht Cumulative Layout Shift?

Vier Quellen erzeugen fast jede Verschiebung, die eine Korrektur wert ist, und jede hat eine Lösung, die die Verschiebung entfernt statt sie zu verkleinern.

Das Muster hinter allen vier: Reservieren Sie die Box, bevor der Inhalt existiert. Ein Browser, der die Höhe eines Slots bereits kennt, hat nichts umzuformatieren, wenn der Slot gefüllt wird.

Warum unterscheidet sich CLS im Labor von CLS im Feld?

CLS im Labor deckt nur den Seitenaufbau ab, CLS im Feld den gesamten Lebenszyklus der Seite. Lighthouse lädt eine URL auf einem festen Geräteprofil, erfasst Verschiebungen innerhalb seines Messfensters und hört dann auf. Echte Menschen scrollen über dieses Fenster hinaus, lösen per Lazy Loading nachgeladene Bilder aus, schließen ein Banner, öffnen ein Menü, und jede Verschiebung nach dem Schnitt von Lighthouse zählt im Feld weiterhin.

Viewport und Netzwerk sorgen für eine zweite Lücke. Die distance fraction teilt durch die größte Abmessung des Viewports, deshalb erreicht dasselbe 160px-Banner auf einem Telefon einen anderen Wert als auf einem Desktop, und eine schnelle Laborverbindung liefert den Inhalt eines Slots aus, bevor die Verschiebung überhaupt passiert, und verdeckt damit einen Defekt, der in einem langsamen Netz jedes Mal auftritt. Beheben Sie Regressionen im Labor und beurteilen Sie das Ergebnis dann anhand von Felddaten aus echten Besuchen, wo die Schwellenwerte für alle drei Vitals in einer Tabelle stehen.

Wie finden Sie die Verschiebung, die ein schlechtes CLS verursacht hat?

Kombinieren Sie den Feldwert mit einer Aufzeichnung der Session, die ihn erzeugt hat, damit die Serie etwas wird, das Sie ansehen statt erschließen. Ein p75 von 0.28 sagt Ihnen, dass die Seite durchfällt; es sagt Ihnen nicht, dass ein Consent-Banner 160px über der Falz eingefügt wird, sobald die IP eines Besuchers in die EU auflöst.

Flowsery liefert ein Skript unter 10 KB, cookiefrei und in der EU gehostet, und nutzt kein Sampling, sodass der Wert aus jeder Session stammt statt aus einer Teilmenge. Es zeichnet die Sessions zusammen mit den Timings auf, gruppiert übereinstimmende zu einem einzigen Issue, sortiert danach, wie viele Nutzer davon getroffen werden, und schickt dieses Issue mit dem Replay und den Reproduktionsschritten an Slack, Linear oder Jira.

CLS ist einer von drei Core Web Vitals, und jeder fällt aus eigenen Gründen durch. Largest Contentful Paint behandelt das Render-Timing, Interaction to Next Paint die Reaktionsfähigkeit, und die Übersicht zu Core Web Vitals erklärt, warum eine Seite alle drei gleichzeitig bestehen muss.

Häufig gestellte Fragen

Was ist ein guter CLS-Wert?

0.1 oder weniger im 75. Perzentil ist gut, 0.1 bis 0.25 bedeutet "Verbesserung nötig", und über 0.25 ist schlecht, gemäß den Schwellenwerten des Chrome-Teams auf web.dev, Stand September 2026. Das Perzentil wird für Mobilgeräte und Desktop getrennt berechnet, eine Seite kann also auf dem Desktop bestehen und auf Telefonen durchfallen. Was als guter CLS-Wert gilt schlüsselt auf, wie der p75 zustande kommt.

Hat CLS eine Einheit?

Nein. Beide Eingaben der Formel sind Bruchteile des Viewports, ihre Multiplikation ergibt also eine einheitenlose Zahl. Deshalb bedeutet 0.1 auf einem 400px-Telefon dasselbe wie auf einem 2560px-Monitor: Die Metrik normalisiert gegen den Bildschirm, auf dem sie entstanden ist.

Zählen Verschiebungen unterhalb der Falz zum CLS?

Zur impact fraction trägt nur die Bewegung von Inhalten bei, die zum Zeitpunkt der Verschiebung im Viewport sichtbar sind. Ein Element, das 4000px weiter unten auf der Seite umformatiert wird, während der Leser oben sitzt, trägt nichts bei. Es zählt in dem Moment, in dem der Leser es in den sichtbaren Bereich scrollt und es sich erneut bewegt.

Warum wurde mein CLS schlechter, nachdem ich einen Skeleton Loader hinzugefügt habe?

Ein Skeleton, das nicht der Höhe des endgültigen Inhalts entspricht, verschiebt die Seite zweimal statt einmal: zuerst, wenn das Skeleton erscheint, dann erneut, wenn der echte Inhalt es mit anderen Abmessungen ersetzt. Dimensionieren Sie das Skeleton auf die Box, die der Inhalt einnehmen wird, sonst wird der Platzhalter zum Defekt.

Kann eine Animation eine Layout-Verschiebung verursachen?

Das Animieren von Eigenschaften, die Layout auslösen, etwa top, left, width oder height, bewegt umgebende Inhalte und wird als Verschiebung gewertet. Das Animieren von transform tut das nicht, weil der Compositor die gezeichnete Ebene bewegt, ohne das Layout erneut auszuführen. Verlagern Sie Animationen auf transform und opacity, und die Verschiebungen verschwinden.

Sammelt CLS weiter an, nachdem die Seite fertig geladen ist?

Ja. Der Browser achtet über den gesamten Lebenszyklus der Seite auf Verschiebungen, ein Banner, das nach 30 Sekunden eingefügt wird, oder ein Bild, das beim Scrollen nachlädt, öffnet also ein neues Session-Fenster und kann zum gemeldeten Wert der Seite werden. Das ist der Hauptgrund, warum ein sauberer Lighthouse-Lauf neben einem durchgefallenen Feldwert bestehen kann.

Wie lange bleibt ein CLS-Session-Fenster geöffnet?

Ein Session-Fenster öffnet sich bei der ersten Verschiebung und sammelt weitere Verschiebungen, die weniger als 1 Sekunde auseinanderliegen, bis zu einer Obergrenze von 5 Sekunden. Eine Lücke von 1 Sekunde oder eine Gesamtdauer von 5 Sekunden schließt es, und die nächste Verschiebung startet ein neues Fenster. Chrome bewertet jedes Fenster auf der Seite und meldet nur das höchste als CLS.

Verhindert ein Klick vor einer Verschiebung, dass sie zum CLS zählt?

Eine Verschiebung wird vom CLS ausgeschlossen, wenn sie innerhalb von 500 Millisekunden nach einem Tap, Klick oder Tastendruck auftritt, ein Flag, das Chrome als hadRecentInput speichert. Ein "Mehr laden"-Button, der Inhalte direkt nach einem Klick einblendet, kostet nichts, während dieselbe Verschiebung durch einen Timer nach der Formel bewertet wird. Die Regel existiert, weil ein Leser, der gerade ein Akkordeon geöffnet hat, erwartet, dass sich der Inhalt darunter bewegt.

Warum bewertet dieselbe Layout-Verschiebung auf dem Handy anders als auf dem Desktop?

Der Distanzanteil teilt die zurückgelegte Strecke eines Elements durch die größte Abmessung des Viewports, sodass eine feste Pixel-Verschiebung auf einem Handybildschirm einen größeren Anteil ausmacht als auf einem breiteren Desktop-Bildschirm. Der 160px-Bannerschub aus dem Beispiel oben erzielt bei einem 800px hohen Viewport 0.2 und würde auf einem höheren Desktop-Bildschirm niedriger ausfallen. Feld-CLS verstärkt das noch, weil das Perzentil für Mobilgeräte und Desktop getrennt berechnet wird, sodass derselbe Fehler auf dem einen Gerät besteht und auf dem anderen durchfällt.

Was ist die schnellste Lösung für bildbedingte Layout-Verschiebungen?

Setzen Sie width- und height-Attribute auf Bilder und Videos, oder reservieren Sie die Box mit der CSS-Eigenschaft aspect-ratio, damit der Browser den Platz reserviert, bevor die Datei eintrifft. Bilder ohne Dimensionen reservieren standardmäßig eine Höhe von null und lassen die Seite reflowen, sobald die Datei lädt. Das Reservieren der Box entfernt die Verschiebung, statt sie nur zu verkleinern.