murattunalı.

CLS.

Cumulative Layout ShiftDEFINITION

CLS misst, wie stark sich Inhalte während des Ladens oder der Nutzung einer Seite unerwartet verschieben; Google wertet Werte unter 0,1 als gut.

Die Berechnung hat zwei Faktoren: wie viel des Bildschirms der verschobene Bereich einnimmt und wie weit er sich bewegt. Deshalb wird die kleine Verschiebung eines großen Elements oben stärker bestraft als die große Verschiebung eines kleinen Elements weiter unten.

Gezählt werden nur UNERWARTETE Verschiebungen. Verschiebungen innerhalb einer halben Sekunde nach einer Nutzerinteraktion sind ausgenommen — deshalb sind Akkordeons und Aufklappmenüs frei.

Es gibt vier häufige Quellen: Bilder ohne Maßangaben, Schriftwechsel, nachträglich eingefügte Inhalte und eingebettete Rahmen ohne Maße. Die erste ist die häufigste und am günstigsten zu beheben — Breite und Höhe ans Bild schreiben.

Die Verschiebung wird nicht über die gesamte Lebensdauer der Seite summiert; sie wird in Sitzungsfenster aufgeteilt, und berichtet wird der Wert des SCHLECHTESTEN Fensters. Das Problem ist also nicht die Summe, sondern die Ballung.

Der gemessene Wert dieser Website und der drei von ihr betreuten Projekte beträgt 0,001 — ein Hundertstel der guten Schwelle. Die Prüf-Suite bindet die Schwelle bei 0,05; der Abstand zur offiziellen Schwelle ist bewusst gewählt, damit eine Verschlechterung sichtbar wird, bevor sie die Grenze erreicht.

Die am häufigsten übersehene Quelle liegt dort, wo die klassische Messung nicht hinsieht: bei Verschiebungen während des Scrollens. Prüfwerkzeuge betrachten das Ladefenster und scrollen nicht; die Nutzerin erlebt genau diese Verschiebungen.

Auf dieser Website wurde dieser blinde Fleck durch Messung gefunden und mit einer eigenen Wache geschlossen: Das über den gesamten Scrollvorgang nach Sitzungsfenster-Logik berechnete schlechteste Fenster muss unter 0,08 bleiben.

  1. Breite und Höhe an Bilder schreiben — eine einzeilige Korrektur, die die häufigste Quelle schließt.
  2. Die Ersatzschrift metrisch anpassen — damit beim Wechsel keine Verschiebung entsteht.
  3. Nachgeladene Inhalte nicht in den Fluss drängen — als Ebene zeigen oder den Platz von Anfang an reservieren.
  4. Eingebetteten Rahmen ein Seitenverhältnis geben — Video, Karten, soziale Boxen.
  5. Nur mit Transformation und Deckkraft animieren — Layout-Eigenschaften erzwingen in jedem Frame einen Neuaufbau.
  6. Im gedrosselten Netz testen — bei schneller Verbindung sind die Verschiebungen unsichtbar.

Der letzte Punkt ist Voraussetzung jeder Messung: Auf einer schnellen Maschine trifft alles fast gleichzeitig ein, und die Verschiebungen treten gar nicht erst auf.

Auch zu wissen, dass das Messfenster nach Sitzungslogik arbeitet, ist wichtig: Berichtet wird nicht die Summe, sondern der Wert des schlechtesten Fensters aus dicht beieinanderliegenden Verschiebungen. Das Problem ist nicht ihre Anzahl, sondern dass sie sich an einer Stelle sammeln.

QUELLEN