CLS 0,001 auf drei Live-Sites — wie wir gemessen haben.
Layout-Shift heißt: Die Seite rutscht unter dem Leser weg. Google wertet alles unter 0.1 als „gut“; alle drei von uns betreuten Live-Sites messen 0.001. Kein Zufall — Reservierungsdisziplin.
Layout-Shift hat drei klassische Quellen: ein Bild ohne angegebene Maße, eine spät geladene Webschrift und nachträglich eingefügte Inhalte. Alle drei haben dieselbe Behandlung: Der Platz wird reserviert, BEVOR der Inhalt kommt. width/height bei Bildern, Preload und ein vermessener Fallback bei Schriften, feste Höhe beim Band.
- fersantekstil.com → CLS 0.001 · LCP 0.59s
- karcem.com.tr → CLS 0.001 · LCP 0.55s
- mikroyazilimdestek → CLS 0.001 · LCP 0.46s
- # 21.08.2026 · Kaltstart · 1440×900
Warum „am nächsten an“ null und nicht null selbst?
Chrome zählt auch Elemente, deren Inhalt neu umbricht, obwohl die Box gleich bleibt. Im Hero dieser Website wandert der Punkt in der Zeile, während sich die Breitenachse der variablen Schrift öffnet: gleiche Box, gleiche Größe, gleiche Zeilenzahl — und trotzdem stehen 0,027 in der Messung. Wir haben sie gemessen, ihre Quellen einzeln aufgelistet und bewusst akzeptiert: Eine Geste gehört zum Design, solange sie im Budget bleibt.
Der Schriftwechsel: die heimtückischste Quelle
Der Punkt „spät geladene Webschrift“ lohnt es, genau so zu zeigen, wie er hier auftrat. Auf Mobilgeräten überschritten zwei Routen das Budget, und die erste Diagnose war falsch: Die Schuld ging an den Signature-Effekt. Die Messung widerlegte das. Der Shift geschah bei 2071 ms; archivo-var.woff2 war bei 2046 ms fertig, das loadingdone-Ereignis des Browsers feuerte bei 2073 ms. Diese fünfundzwanzig Millisekunden sind kein Zufall — der Shift war der Wechsel.
Die Ursache hatte zwei Schichten. Erstens: Die Überschriften nutzen die Breitenachse der variablen Schrift, und die Ersatzschrift hat keine solche Achse — der Text steht im Fallback schmal. Zweitens, und das war die eigentliche: Die Regel setzte ihr Gewicht über font-variation-settings, während CSS font-weight bei 400 blieb. Da diese Achse bei einer variablen Schrift font-weight überschreibt, wurde Archivo korrekt gezeichnet, der Fallback blieb regular. Schmal und dünn zugleich; als die echte Schrift kam, wurde die Überschrift breiter und gewann eine Zeile.
- h1 mit Fallback → 149px
- h1 mit Archivo → 186px
- Differenz → +37px = genau eine Zeile
- # mobil 390 · 4G · 4x CPU-Drosselung
Die Lösung kam in zwei Teilen. Zuerst wurde derselbe Gewichtswert als font-weight in die sechsundsechzig Regeln geschrieben, die eines trugen — für die variable Schrift wirkungslos, für den Fallback fett. Dann wurde für jedes der sechzehn tatsächlich genutzten Breiten-Gewichts-Paare eine Fallback-Familie mit size-adjust deklariert; die Verhältnisse wurden nicht geschätzt, sondern im Browser an derselben Zeichenkette gemessen. Ergebnis: null Pixel Bewegung bei h1, und der CLS der schlechtesten Route fiel von 0,1288 auf 0,0216. Der Signature-Effekt blieb unangetastet.
Die Lehre daraus ist methodisch, nicht technisch: Der erste Verdächtige ist der sichtbarste und meist unschuldig. Eine Diagnose, die die Zeitstempel nie nebeneinanderlegt, findet auch die richtige Korrektur nicht — die zuerst gewählte Lösung hätte den Shift nicht behoben, sondern nur den Effekt auf Mobilgeräten getötet.
Die eigentliche Falle liegt nicht beim Laden
Scrollen gilt nicht als „recent input“; jeder Shift während des Scrollens fließt vollständig in echte Nutzerdaten. Eine gepinnte Sektion konnte beim Zurückkehren in den Fluss in einem einzigen Frame 0,64 erzeugen — den Pin auf den Transform-Kanal zu legen löschte ihn vollständig aus der Metrik. Nichts, was per Transform bewegt wird, ist ein Layout-Shift.
Auch beim Messen lauert eine Falle: Ein Laborwerkzeug, das die Seite öffnet und wartet, sieht nur den Ladezeitpunkt. Echte Nutzerinnen scrollen. Deshalb scrollen die Tests hier die Seite programmgesteuert von oben nach unten und protokollieren jeden Shift samt Quelle — welches Element sich wann um wie viel bewegt hat, schriftlich.
Der Platz wird reserviert, bevor der Inhalt kommt; der Rest ist Buchhaltung.