Kennst du das? Du willst auf einer Webseite gerade einen Button klicken – sagen wir "Bestellung abschließen" – und plötzlich ruckelt der Inhalt nach unten. Dein Finger landet im Leeren oder schlimmer noch: Du klickst versehentlich auf ein Werbebanner, das gerade nachgeladen wurde.
Das ist nicht nur super nervig, sondern auch pures Gift für deine SEO-Performance. Google nennt dieses Phänomen Cumulative Layout Shift (CLS). Als Teil der Core Web Vitals ist der CLS seit 2021 ein offizieller Rankingfaktor.
In diesem Artikel zeige ich dir, wie du diese Layout-Verschiebungen identifizierst, misst und effektiv behebst.
Das Wichtigste in Kürze
- Rankingfaktor: Der CLS ist Teil der Core Web Vitals und beeinflusst dein Google-Ranking (besonders mobil).
- Der Zielwert: Ein guter CLS-Score liegt unter 0,1. Alles über 0,25 gilt als schlecht.
- Hauptursachen: Meist sind Bilder ohne feste Größenangaben, nachladende Werbung oder Webfonts schuld.
- Die Lösung: Reserviere dem Browser immer vorab den Platz für Elemente (z.B. via CSS
min-heightoder HTML-Attributen).
Was ist der Cumulative Layout Shift eigentlich?
Der CLS misst die visuelle Stabilität einer Seite. Er berechnet, wie stark sich sichtbare Elemente im Viewport während des Ladevorgangs verschieben.
Google bewertet den CLS auf einer Skala:
- Gut: unter 0,1
- Optimierungsbedarf: 0,1 bis 0,25
- Schlecht: über 0,25
Ein hoher CLS-Wert signalisiert Google: "Diese Seite ist instabil und frustriert den Nutzer." Das Resultat sind schlechtere Rankings.
Die häufigsten Ursachen für CLS (und wie du sie behebst)
Aus meiner Erfahrung bei zahlreichen Audits kristallisieren sich fast immer die gleichen drei Hauptverursacher heraus.
1. Bilder und Videos ohne Maßangaben
Der Klassiker. Wenn du ein Bild einbindest, ohne dem Browser mitzuteilen, wie breit und hoch es ist, weiß der Browser nicht, wie viel Platz er reservieren muss. Er zeigt erst den Text an, und sobald das Bild geladen ist, schiebt er den Text beiseite.
Die Lösung:
Gib immer width und height Attribute im HTML an oder nutze CSS Aspect Ratio Boxes.
<!-- Richtig -->
<img src="foto.jpg" width="800" height="600" alt="Beispielbild">So reserviert der Browser sofort den nötigen Platz, noch bevor das Bild geladen ist.
2. Dynamisch nachgeladene Anzeigen (Ads) und iFrames
Werbebanner sind oft die größten Sünder. Sie laden asynchron nach und drücken den Content nach unten.
Die Lösung:
Reserviere statischen Platz für den Ad-Slot. Wenn der Banner 300x250 Pixel groß sein wird, muss der
umschließende Container per CSS eine Mindesthöhe von 250px haben.
Experten-Tipp: Google selbst bietet hierzu exzellente Dokumentationen für Publisher an. In den Google Publisher Tag Guides wird detailliert erklärt, wie man Layout-Verschiebungen durch asynchrone Renderings minimiert. Das ist quasi die Pflichtlektüre, wenn du Ads einbindest.
3. Webfonts (FOIT/FOUT)
Wenn dein Webfont langsam lädt, zeigt der Browser oft erst gar keinen Text (FOIT) oder eine Systemschrift (FOUT). Wenn der Webfont dann "einspringt", kann sich die Zeilenhöhe oder Laufweite ändern – das Layout verschiebt sich.
Die Lösung:
Nutze link rel="preload" für wichtige Fonts und die CSS-Eigenschaft
font-display: swap oder optional, um das Verhalten beim Laden zu steuern.
Werkzeugkasten: So misst du den CLS richtig
Du kannst nicht optimieren, was du nicht messen kannst. Hier sind die Tools, die ich in meiner täglichen Arbeit nutze und die ich dir empfehle.
-
Google PageSpeed Insights (PSI):
Der Standard für den schnellen Check. PSI liefert dir sowohl Lab-Daten als auch Felddaten.
Einsatz: Schnelle Analyse einzelner URLs. -
Google Search Console:
Als SEO-Consultant ist dies mein erster Anlaufpunkt. Die Search Console zeigt dir gruppiert, welche URL-Cluster Probleme mit dem CLS haben.
Einsatz: Monitoring der gesamten Website. -
Chrome DevTools (Performance Tab):
DrückeF12, gehe auf "Performance" und setze einen Haken bei "Web Vitals". Chrome markiert genau das Element, das den Shift verursacht.
Einsatz: Debugging und Fehlersuche.
Häufige Fragen zum Cumulative Layout Shift
Was ist der Cumulative Layout Shift (CLS)?
Der CLS ist eine Metrik der Google Core Web Vitals, die die visuelle Stabilität einer Webseite misst. Er bewertet, wie stark sich sichtbare Elemente während des Ladevorgangs verschieben. Ein guter Wert liegt unter 0,1.
Was sind die häufigsten Ursachen für einen schlechten CLS?
Die häufigsten Ursachen sind Bilder und Videos ohne definierte Breiten- und Höhenangaben im HTML, nachladende Werbebanner (Ads) ohne reservierten Platz sowie Webfonts, die Textsprünge (FOIT/FOUT) verursachen.
Mit welchen Tools kann man den CLS messen?
Zu den besten Tools gehören Google PageSpeed Insights (für Lab- und Felddaten), die Google Search Console (für Berichte über die ganze Domain) und die Chrome DevTools für detaillierte technische Analysen.
Fazit: Stabilität schafft Vertrauen
Die Optimierung des Cumulative Layout Shifts ist weit mehr als eine technische Fleißaufgabe. Es ist eine Investition in die User Experience. Eine Seite, die ruhig und stabil lädt, wirkt professioneller.
Starte am besten heute noch mit einer Analyse in der Google Search Console und prüfe, ob deine Bilder feste Dimensionen besitzen.