CLS
Abkürzungen / Synonyme: Cumulative Layout Shift
Kurzdefinition
Cumulative Layout Shift: Ein Mass für die unerwartete Verschiebung sichtbarer Elemente während des Ladens (visuelle Stabilität).
Ausführliche Erklärung
CLS (Cumulative Layout Shift) bewertet die visuelle Stabilität einer Seite, indem es unerwartete Verschiebungen sichtbarer Elemente während des Ladens summiert. Solche Sprünge entstehen typischerweise durch Bilder ohne reservierte Abmessungen, nachträglich eingeblendete Werbung/Banner, dynamisch injizierte Inhalte oder Webfonts, die einen Textreflow auslösen (FOUT/FOIT). Gegenmassnahmen sind feste `width`/`height`- bzw. `aspect-ratio`-Angaben, reservierter Platz für dynamische Inhalte und `font-display: optional/swap`. Zielwert: unter 0,1.
Beispiel
Ein Bild ohne Grössenangabe schiebt den darunterliegenden Text beim Laden nach unten; mit `width` und `height` im img-Tag bleibt das Layout stabil und der CLS fällt auf 0.
Im ausführlichen Fachartikel erklären wir CLS mit Architektur, Praxisbeispielen und Best Practices im Detail:
Sie möchten CLS direkt in der Praxis prüfen oder anwenden? Nutzen Sie das passende kostenlose Tool: