CLS optimieren: Der umfassende Leitfaden für Unternehmen

Stellen Sie sich vor, ein Besucher möchte auf Ihrer Website gerade auf den Button „Angebot anfordern“ tippen, und die Seite springt plötzlich nach unten. Ein nachgeladenes Bild oder ein Kampagnenbereich verschiebt die Position des Buttons. Der Nutzer klickt auf den falschen Link oder muss die Aktion wiederholen.

Die CLS-Optimierung ist eine Performance-Optimierung, die die Ursachen solcher unerwarteten Layout-Verschiebungen ermittelt und dafür sorgt, dass die Seite visuell stabiler funktioniert.

Für Unternehmen ist das Thema nicht nur ein technischer Messwert. Es geht darum, dass wichtige Schritte wie das Ansehen von Produkten, das Ausfüllen von Formularen und der Kauf ohne Unterbrechung abgeschlossen werden können. In diesem Leitfaden erfahren Sie, wie CLS gemessen wird, welche Probleme es verursachen und wie man in einem Beispielszenario für ein Unternehmen vorgehen kann.

Was ist CLS?

CLS steht für „Cumulative Layout Shift“. Auf Deutsch spricht man meist von „kumulativer Layout-Verschiebung“. Die Metrik misst im Rahmen der Core Web Vitals die visuelle Stabilität.

Wenn sich sichtbare Elemente auf der Seite unerwartet verschieben, spiegelt sich das in dieser Metrik wider. Die Berechnung berücksichtigt die betroffene Fläche und die Distanz der Bewegung. CLS ist keine Geschwindigkeitsmessung in Sekunden, sondern ein einheitenloser Wert.

Die Messung beschränkt sich nicht nur auf das erste Laden der Seite. Auch unerwartete Verschiebungen während der Nutzung können in die Bewertung einfließen. CLS basiert dabei nicht auf der einfachen Summe aller Verschiebungen im gesamten Lebenszyklus der Seite, sondern auf der höchsten Summe von Verschiebungen, die in bestimmten Zeitfenstern gruppiert werden. 

Welcher CLS-Wert ist gut?

Ziel ist es, dass bei mindestens 75 % der Besuche ein Wert von 0,1 oder darunter erreicht wird, wobei Mobilgeräte und Desktop getrennt bewertet werden. Ein einzelner erfolgreicher Test bedeutet nicht, dass alle Besucher dieselbe Erfahrung machen. 

Warum ist die CLS-Optimierung für Unternehmen wichtig?

Wenn Sie ein Performance-Problem priorisieren, sollten Sie darauf achten, welche Nutzeraktion es beeinträchtigt.

Springt beispielsweise das Angebotsformular auf einer Leistungsseite ständig, kann dies die Gewinnung potenzieller Kunden direkt erschweren. In einem Onlineshop können sich verschiebende Produktoptionen zu Fehlauswahlen führen.

Die CLS-Optimierung kann folgende Geschäftsziele unterstützen:

• Komfortablere Nutzung: Besucher können den gelesenen Text und den Bereich, in dem sie interagieren, leichter im Blick behalten.
• Konsistentere mobile Nutzererfahrung: Auf kleinen Bildschirmen bleibt die Position wichtiger Buttons erhalten.
• Reibungsloserer Conversion-Ablauf: Nutzungshürden beim Ausfüllen von Formularen und beim Kaufabschluss werden reduziert.
• Kontrollierteres Website-Management: Die Performance-Auswirkungen neuer Kampagnen und Designänderungen lassen sich überwachen.

Um die Auswirkung auf die Conversion-Rate zu erkennen, muss die technische Verbesserung anhand der eigenen Daten des Unternehmens bewertet werden. Eine pauschale prozentuale Umsatzsteigerung für jede Website anzugeben, wäre nicht seriös.

Wie wirkt sich CLS auf die SEO aus?

Google verwendet die Core-Web-Vitals-Metriken in seinen Ranking-Systemen. Dennoch garantieren gute Performance-Werte keine Spitzenplätze in den Suchergebnissen. Auch die Nützlichkeit des Inhalts, die Übereinstimmung mit der Suchintention und andere Ranking-Signale spielen eine Rolle. 

Daher sollte die CLS-Optimierung als Investition betrachtet werden, die Maßnahmen in den Bereichen Content, technische SEO und Nutzererfahrung ergänzt.

Wie wird CLS gemessen?

Bei der Messung gilt es, zwei unterschiedliche Fragen zu beantworten: Was erleben echte Besucher, und was ist die technische Ursache dieser Erfahrung?

Erstanalyse mit PageSpeed Insights

PageSpeed Insights zeigt, sofern verfügbar, echte Nutzerdaten und zusätzlich einen Labortest an.

Die echten Nutzerdaten basieren auf den Messungen der Chrome-Nutzer aus den letzten 28 Tagen. Der Labortest ist dagegen ein Versuch unter bestimmten Bedingungen. Deshalb können in den beiden Bereichen unterschiedliche CLS-Werte angezeigt werden.

Im Bericht sollte geprüft werden, ob sich die Daten auf die untersuchte URL oder auf die gesamte Website auf Origin-Ebene beziehen. Fehlende Daten bedeuten nicht, dass die Seite keine Probleme hat. 

Nutzerabläufe untersuchen

Es reicht möglicherweise nicht aus, nur das Laden der Startseite zu testen. Auch Abläufe wie die Produktauswahl, das Scrollen und das Anzeigen von verzögert geladenen Inhalten sollten geprüft werden.

Mit den Chrome DevTools lässt sich untersuchen, wann Verschiebungen auftreten. Das im Bericht als bewegt angezeigte Element ist nicht immer die Ursache des Problems; es kann auch von einem darüber eingefügten Bereich verschoben worden sein. 

Wie lässt sich CLS verbessern?

Die Lösung sollte sich nach der Komponente richten, die die Verschiebung verursacht. Häufige Probleme und Maßnahmen sind:

Lazy Loading von Bildern allein ist keine Lösung; der Platz, den sie vor dem Laden einnehmen, muss reserviert werden. Ebenso kann es sein, dass allein die Verwendung von font-display: swap bei Schriftarten die Verschiebungen nicht beseitigt.

Für das Unternehmen ist entscheidend, ob das Problem nur auf einer einzelnen Seite oder in einem gemeinsamen Template liegt. Wenn ein Fehler in einer gemeinsamen Produktkarte Hunderte Seiten betrifft, kann eine Lösung auf Komponentenebene einen größeren Nutzen bringen.

Praxisbeispiel: Springender Kaufbereich auf der Produktseite

Das folgende Szenario dient der Erläuterung des Vorgehens; es enthält keine realen Kundenergebnisse und keine Erfolgsbehauptungen.

Nehmen wir an, ein E-Commerce-Unternehmen erhält von mobilen Besuchern die Rückmeldung, dass sich der Kaufbereich auf der Produktseite verschiebt. Das Unternehmen leitet über Anzeigen Traffic auf diese Seiten, kennt aber das Ausmaß des Problems der Besucher nicht.

1. Umfang des Problems bestimmen

Der erste Schritt besteht darin, Beispiele aus verschiedenen Produkt-Templates auszuwählen. Untersucht werden nicht nur die meistverkauften Produkte, sondern auch reduzierte Produkte, Produkte mit mehreren Varianten und Produkte mit umfangreichem Bewertungsbereich.

Ziel ist es herauszufinden, ob das Problem bei allen Produkten auftritt.

2. Beobachtung mit technischem Befund verknüpfen

Nehmen wir an, dass sich der Kaufbereich in den Tests in dem Moment bewegt, in dem die Kampagnenkomponente erscheint.

Für diesen Befund genügt nicht der Vermerk „CLS hoch“. Dokumentiert werden der betroffene Seitentyp, die Bildschirmgröße, die Schritte zur Reproduktion und das Ereignis, das die Verschiebung auslöst. So erhält das Entwicklungsteam eine umsetzbare Aufgabenbeschreibung.

3. Maßnahmen priorisieren

Bei der Priorisierung werden drei Punkte gemeinsam betrachtet:

• Auf wie vielen Seiten und wie häufig tritt das Problem auf?
• Beeinträchtigt es einen kritischen Vorgang wie den Kauf?
• Wie viel Aufwand erfordern Umsetzung und Verifizierung der Lösung?

In diesem Szenario kann die gemeinsame Komponente, die den Kaufbereich beeinflusst, vor einer kleinen Verschiebung auf einer Informationsseite mit geringem Traffic behandelt werden.

4. Ergebnis verifizieren

Nach der Änderung werden dieselben Nutzerabläufe erneut getestet. Die Fälle mit und ohne eingeblendete Kampagne werden getrennt geprüft.

Der Monitoring-Plan umfasst technische und kaufmännische Kennzahlen:

Bei der Interpretation möglicher Umsatzveränderungen werden auch Änderungen bei Preisen, Kampagnen und Traffic-Quellen berücksichtigt. So wird nicht die gesamte Verbesserung fälschlicherweise einer einzelnen technischen Maßnahme zugeschrieben.

Wie geht SEO Performans bei der CLS-Optimierung vor?

Bei SEO Performans liegt der Schwerpunkt der CLS-Arbeit darauf, technische Befunde mit den Prioritäten des Unternehmens zu verknüpfen. Es muss klar sein, warum welche Seite Probleme hat, welche Maßnahme zuerst umgesetzt werden sollte und wie das Ergebnis verifiziert wird.

In diesem Rahmen kann der Prozess der Performance-Optimierung in vier Phasen gegliedert werden:

1. Analyse: Untersuchung der priorisierten Seiten und der mobilen Nutzererfahrung.
2. Priorisierung: Einordnung der Befunde nach Auswirkung, Verbreitung und Umsetzungsaufwand.
3. Maßnahmenplan: Erstellung konkreter Empfehlungen, die das Entwicklungsteam umsetzen kann.
4. Verifizierung: Wiederholung der Tests nach den Anpassungen und Monitoring der echten Nutzerdaten.

Dieser Ansatz sorgt dafür, dass die technische SEO-Arbeit in einen konkreten Umsetzungsplan mündet. Das Unternehmen sieht nicht nur einen Messwert, sondern auch die Nutzererfahrung, die verbessert werden muss.

Häufige Fehler bei der CLS-Optimierung

Der häufigste Fehler ist, ein einzelnes Testergebnis auf die gesamte Website zu verallgemeinern. Dass die Startseite gut aussieht, bedeutet nicht, dass auch Produkt- und Leistungsseiten problemlos sind.

Ein weiterer Fehler ist der Versuch, das gesamte Problem mit einem allgemeinen Speed-Plugin zu lösen. Zunächst sollte die Ursache der Verschiebung ermittelt und verifiziert werden, ob das eingesetzte Tool diese Ursache überhaupt behebt.

Schließlich kann es dazu führen, dass Probleme bei späteren Design- und Kampagnenänderungen wiederkehren, wenn die Performance-Kontrolle als einmalige Aufgabe verstanden wird. Nach wichtigen Veröffentlichungen sollten kritische Seiten erneut geprüft werden.

Häufig gestellte Fragen

Sind CLS und Seitengeschwindigkeit dasselbe?

Nein. CLS misst die visuelle Stabilität. Eine Seite kann schnell laden, und ihre Inhalte können sich danach trotzdem verschieben. Geschwindigkeit und Layout-Stabilität sollten daher getrennt bewertet werden.

Wie lange dauert die CLS-Optimierung?

Die Dauer hängt von der Ursache des Problems und der Struktur der Website ab. Probleme, die sich durch die Anpassung einer einzelnen Komponente lösen lassen, erfordern nicht denselben Aufwand wie Probleme, die sich über verschiedene Templates erstrecken. Für einen belastbaren Plan sollte zunächst eine Analyse durchgeführt werden.

Warum zeigt sich die Verbesserung nicht sofort im Bericht?

Im Labortest ist die Änderung sofort sichtbar. Im 28-Tage-Datenfenster des Bereichs mit echten Nutzerdaten in PageSpeed Insights wirken frühere Besuche dagegen noch eine Zeit lang nach.

Reicht es für die SEO aus, CLS zu beheben?

Nein. CLS ist Teil einer umfassenderen Arbeit in den Bereichen technische SEO und Nutzererfahrung. Auch Themen wie Indexierbarkeit, Content-Qualität und Suchintention müssen berücksichtigt werden.

Finden Sie die Ursache der Verschiebungen auf Ihrer Website

Ihre Besucher begegnen möglicherweise sich verschiebenden Bereichen, während sie Produkte ansehen, Formulare ausfüllen oder ein Angebot anfragen. Der erste Schritt, um zu erkennen, welches Problem Sie zuerst angehen sollten, ist eine korrekte Messung und eine Untersuchung auf Seitenebene.

Um die Performance Ihrer Website und den Bedarf an CLS-Optimierung zu bewerten, nehmen Sie Kontakt mit SEO Performans auf.

Kostenlose SEO-Analyse anfordern