CLS (Cumulative Layout Shift), im Tech-Kontext.
CLS misst, wie stark Inhalte beim Laden springen. Google wertet bis 0,1 als gut und über 0,25 als schlecht. Ursache sind meist fehlende Maßangaben.
Cumulative Layout Shift bewertet, wie stark sich sichtbare Elemente ohne Zutun des Nutzers verschieben. Der Wert ist dimensionslos und ergibt sich aus verschobener Fläche und Verschiebungsweg, summiert über das schlechteste Zeitfenster eines Besuchs. Google nennt bis 0,1 gut, 0,1 bis 0,25 verbesserungswürdig und darüber schlecht. Vier Ursachen decken fast alle Fälle ab: Bilder ohne Breiten- und Höhenangabe, nachgeladene Schriften mit abweichenden Maßen, eingeschobene Banner oder Hinweise über dem Inhalt, und Elemente, die per JavaScript nachträglich in den Textfluss gesetzt werden. Das Gegenmittel ist immer dasselbe: Platz vorher reservieren, statt ihn hinterher zu erzeugen.
Beispiele aus dem Mittelstand
- Ein Cookie-Hinweis schiebt beim Erscheinen die gesamte Seite nach unten, der Besucher klickt daneben.
- Eine Bildergalerie ohne Maßangaben lässt den Text bei jedem geladenen Bild erneut springen.
<!-- Breite und Höhe reservieren den Platz, bevor das Bild da ist -->
<img src="/team.webp" width="1200" height="800" alt="Team" />/* Seitenverhältnis reservieren, wenn die Maße erst zur Laufzeit feststehen */
.karte-bild {
aspect-ratio: 3 / 2;
width: 100%;
height: auto;
}
/* Einblendungen über dem Inhalt erzeugen keine Sprünge, wenn sie schweben */
.hinweis-leiste {
position: fixed;
inset-block-end: 0;
}Folge-Fragen
Wie finde ich heraus, welches Element springt?
In den Entwicklerwerkzeugen die Layout-Shift-Regionen einblenden. Sie markieren die verschobenen Bereiche direkt auf der Seite.
Zählen Verschiebungen nach einem Klick mit?
Nein. Verschiebungen kurz nach einer Eingabe gelten als erwartet und fließen nicht in den Wert ein.
Was macht die Schrift mit dem Wert?
Beim Tausch von Ersatz- auf Zielschrift ändern sich die Zeilenlängen. Mit angepassten Ersatzmaßen bleibt der Sprung aus.
Reicht es, im Testwerkzeug 0 zu erreichen?
Nein. Der Test scrollt nicht. Viele Sprünge entstehen erst weiter unten auf der Seite und zeigen sich nur in den Felddaten.
CLS (Cumulative Layout Shift) in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance