CLS - Kumulative Layout-Verschiebung

Was ist CLS?

Die kumulative Layoutverschiebung (CLS) misst die visuelle Stabilität Ihrer Website. Dabei wird ermittelt, wie stark sich der sichtbare Inhalt während des Ladevorgangs unerwartet verschiebt. Wenn Sie schon einmal auf eine Schaltfläche geklickt haben, die plötzlich verschoben wurde, weil ein Bild oder eine Anzeige darüber geladen wurde, haben Sie eine Layoutverschiebung erlebt.

CLS ist einer der drei Core Web Vitals von Google und wird als Ranking-Faktor in den Suchergebnissen verwendet.

Wie wird CLS gemessen?

CLS wird als die Summe aller einzelnen Layout-Verschiebungen berechnet, die ohne Nutzerinteraktion auftreten:

• Gut: CLS unter 0,1 - minimale oder keine sichtbare Verschiebung
• Verbesserungsbedürftig: CLS zwischen 0,1 und 0,25
• Schlecht: CLS über 0,25 - erhebliche unerwartete Bewegung

Es werden nur Layoutverschiebungen gezählt, die ohne Benutzerinteraktion (Scrollen, Klicken) erfolgen. Wenn ein Benutzer auf eine Schaltfläche klickt und sich der Inhalt ändert, ist dies zu erwarten und wird nicht gezählt.

Typische Ursachen für CLS in Online-Shops

• Bilder ohne Abmessungen: Wenn Bilder keine Breiten-/Höhenattribute im HTML-Code haben, reserviert der Browser keinen Platz und der Inhalt unter dem Bild springt, wenn das Bild geladen wird.
• Dynamischer Inhalt: Banner, Werbung oder Produktempfehlungen, die nach dem ersten Rendering der Seite geladen werden und den Inhalt nach unten drücken.
• Web-Schriftarten: Schriftarten, die spät geladen werden und eine andere Größe als die Fallback-Schriftart haben (FOUT - Flash of Unstyled Text), können Inhalte verschieben.
• Cookies/Zustimmungsbanner: Cookie-Zustimmungsleisten, die nach dem Laden auftauchen und den Inhalt nach unten verschieben.
• Faul geladener Inhalt: Elemente, die ohne Platzreservierung faul geladen werden.

Wie kann CLS verbessert werden?

• LegenSie die Abmessungen für Bilder fest: Legen Sie immer Breite und Höhe für alle <img>-Elemente fest, damit der Browser Platz reservieren kann, bevor das Bild geladen wird.
• Reservieren Sie Platz für dynamische Inhalte: Verwenden Sie CSS (min-height oder aspect-ratio), um Platz für Banner, Anzeigen und andere Elemente zu reservieren, die dynamisch geladen werden.
• Verwenden Sie font-display: swap; dies verhindert unsichtbaren Text, kann aber FOUT verursachen. Kombinieren Sie dies mit preload für ein optimales Gleichgewicht.
• Platzieren Sie Cookie-Banner als Overlay: Verwenden Sie position:fixed, damit sie den Seiteninhalt nicht verdrängen.
• Holen Sie wichtige Ressourcen vor: Verwenden Sie <link rel="preload"> für wichtige Schriftarten, Bilder und CSS.

CLS und Shoporama

Shoporama-Themen wurden mit Blick auf die Leistung entwickelt. Um die beste CLS-Bewertung zu erzielen, sollten Sie sicherstellen, dass alle Produktbilder die richtigen Abmessungen haben und dass externe Inhalte (Chatbots, Tracking-Skripte) geladen werden, ohne das Layout zu beeinträchtigen.

Tools zur Messung

• Google PageSpeed Insights: Zeigt CLS sowohl für Mobilgeräte als auch für Desktops mit spezifischen Elementen, die zur Verschiebung beitragen.
• Chrome DevTools (Lighthouse): Führen Sie ein Lighthouse-Audit durch, um CLS und andere Core Web Vitals anzuzeigen.
• Google Search Console: Der Bericht "Core Web Vitals" zeigt die CLS-Leistung für Ihre gesamte Website auf der Grundlage echter Nutzerdaten (CrUX).
• Web Vitals Chrome Extension: Zeigt CLS und andere Core Web Vitals in Echtzeit während des Browsens.