Was ist CLS (Cumulative Layout Shift)? (Visuelle Stabilität für SEO)
Kennen Sie das? Sie wollen auf einen Button klicken, doch plötzlich verschiebt sich die Seite und Sie klicken versehentlich auf eine Anzeige? Das ist ein Layout Shift – und der Cumulative Layout Shift (CLS) misst genau diese ärgerliche Instabilität einer Webseite.
Die schnelle Definition
Der CLS (Cumulative Layout Shift) ist einer der drei Core Web Vitals von Google. Er misst die Summe aller unerwarteten Layoutverschiebungen, die während der gesamten Lebensdauer einer Seite auftreten. Ein niedriger CLS-Wert bedeutet, dass die Seite visuell stabil ist, während sie geladen wird und danach.
Der wahre Mehrwert: Warum ein niedriger CLS wichtig ist
Unerwartete Layoutverschiebungen sind nicht nur nervig, sie können auch echte Probleme verursachen und sich negativ auf Ihr SEO auswirken:
- Verbesserte Nutzererfahrung (UX): Eine stabile Seite ist angenehmer zu bedienen. Nutzer klicken nicht versehentlich auf falsche Elemente, verlieren nicht ihre Leseposition und fühlen sich nicht frustriert.
- Direkter Rankingfaktor: Als Teil der Core Web Vitals fließt der CLS direkt in das Ranking bei Google ein. Seiten mit einem guten CLS-Wert (niedrig) können einen Rankingvorteil gegenüber Seiten mit hohem CLS (instabil) haben.
- Höhere Conversion Rates: Wenn Nutzer nicht versehentlich falsch klicken oder durch Verschiebungen abgelenkt werden, ist die Wahrscheinlichkeit höher, dass sie die gewünschte Aktion (z.B. Klick auf “Kaufen” oder “Anfragen”) ausführen.
- Professioneller Eindruck: Eine visuell stabile Seite wirkt professioneller und vertrauenswürdiger.
Was verursacht hohe CLS-Werte? (Häufige Übeltäter)
Unerwartete Layoutverschiebungen treten meist auf, weil Elemente auf der Seite nachträglich geladen werden und Platz beanspruchen, der vorher nicht reserviert war:
- Bilder ohne definierte Abmessungen: Wenn Sie die Breite und Höhe eines Bildes im Code nicht angeben, weiß der Browser nicht, wie viel Platz er dafür reservieren soll. Sobald das Bild geladen ist, “springt” der restliche Inhalt nach unten.
- Werbeanzeigen, Einbettungen (Embeds) und Iframes ohne feste Größe: Ähnlich wie bei Bildern können dynamisch geladene Anzeigen oder eingebettete Inhalte (z.B. Videos, Social Media Feeds) den Layoutfluss stören, wenn kein Platz für sie reserviert wurde.
- Dynamisch eingefügte Inhalte: Inhalte, die erst nach dem initialen Laden der Seite per JavaScript hinzugefügt werden (z.B. Cookie-Banner, Newsletter-Pop-ups), können ebenfalls Verschiebungen verursachen, wenn sie nicht korrekt implementiert sind.
- Web Fonts, die spät laden (FOIT/FOUT): Wenn Schriftarten erst spät geladen werden, kann es zu einem kurzen Aufblitzen einer Standardschrift und dann zu einer Verschiebung kommen, wenn die eigentliche Schriftart angewendet wird (Flash Of Unstyled Text/Flash Of Invisible Text).
Wie misst man den CLS?
Sie können den CLS-Wert Ihrer Seite mit verschiedenen Tools messen:
- Google PageSpeed Insights: Gibt Labor- und Felddaten (aus echten Nutzerbesuchen) für den CLS an.
- Google Search Console: Der Bericht “Core Web Vitals” zeigt, welche URLs Probleme mit dem CLS haben (basierend auf Felddaten).
- Chrome DevTools (Entwicklertools): Im “Performance”-Tab oder mit dem “Layout Shift Regions”-Overlay können Sie Layoutverschiebungen während des Ladens live beobachten.
- WebPageTest.org: Bietet detaillierte Wasserfalldiagramme und CLS-Messungen.
Google bewertet den CLS wie folgt:
- Gut: CLS ≤ 0.1
- Verbesserungswürdig: 0.1 < CLS ≤ 0.25
- Schlecht: CLS > 0.25
Profi-Tipp: Dimensionen sind König!
Die häufigste Ursache für hohe CLS-Werte sind Bilder und Werbeelemente ohne definierte Größe. Stellen Sie sicher, dass Sie für alle Bilder `width`- und `height`-Attribute im HTML angeben oder via CSS ein festes Seitenverhältnis (aspect-ratio) definieren. Reservieren Sie auch für Werbebanner oder eingebettete Elemente feste Platzhalter, damit der Inhalt nicht springt, wenn sie geladen werden.
Zusammenfassung: Der Cumulative Layout Shift (CLS) misst die unerwartete Verschiebung von Seitenelementen während des Ladens. Ein niedriger CLS ist wichtig für eine gute User Experience und ein positiver Rankingfaktor als Teil der Core Web Vitals. Hauptursachen sind oft Bilder oder Anzeigen ohne feste Größenangaben. Achten Sie auf visuelle Stabilität, um Nutzer nicht zu frustrieren und Ihr SEO zu verbessern.
