CLS Proxy
Stabile Layouts schaffen Vertrauen.
Das Thema dieser Seite: Der CLS Proxy zeigt, ob Inhalte beim Laden springen und dadurch Nutzer irritieren.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check ordnet den CLS Proxy in Stabilitätsstufen ein und zeigt, ob Layout-Verschiebungen kritisch sind.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| < 0,1 | Layout stabil | OK |
| 0,1–0,25 | Spürbare Sprünge | Warnung |
| > 0,25 | Starkes Layout-Shifting | Kritisch |
Kontext & Problemraum
CLS steigt besonders, wenn Bilder ohne feste Maße, Ads oder Fonts spät nachladen.
| Situation | Symptom | Risiko |
|---|---|---|
| Bilder ohne Maße | Layout springt | Vertrauensverlust |
| Ads laden spät | Content verschiebt sich | Conversion sinkt |
| Webfonts swap | Text springt | Unruhiges Lesen |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| CLS dauerhaft hoch | Layout instabil | Platzhalter fest definieren |
| Nur Ads verschieben | Teilbereich betroffen | Ad-Slots fixieren |
| CLS niedrig | Signal stabil | Beibehalten |
Erklärende Details
CLS entsteht, wenn Elemente ohne reservierten Platz nachgeladen werden. Feste Maße und stabile Slots verhindern Sprünge.
<img src="/image.jpg" width="800" height="600" />| Detail | Warum relevant | Hinweis |
|---|---|---|
| width/height | Platz reserviert | Immer setzen |
| aspect-ratio | Layout stabil | Für Container nutzen |
| Font-Loading | Text springt | font-display prüfen |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| Proxy-Wert | Labor statt Feld | Mit Feldwerten prüfen |
| SPA-Navigation | Route-spezifische Shifts | Wichtige Flows testen |
| Dynamic Content | Variierende Shifts | Platzhalter definieren |
Große Bilder
Bildgrößen beeinflussen Layouts.
Render-blockierendes CSS
CSS kann Layouts verzögern.
INP Proxy
Interaktionen ohne Blockaden.