CLS A/B-Testing

CLS (Cumulative Layout Shift) ist einer der drei Core Web Vitals von Google und misst die visuelle Stabilität einer Webseite: also die Art und Weise, wie sich Elemente während des Ladevorgangs unerwartet verschieben.
Im Rahmen von A/B testing ist CLS eine häufige Falle, die die Ergebnisse eines Tests verfälschen oder der Nutzererfahrung schaden kann, selbst wenn die getestete Variante inhaltlich besser erscheint.

🎯 Warum das beim A/B testing kritisch ist

Ein A/B test zielt darauf ab, die Auswirkung einer bestimmten Änderung auf das Nutzerverhalten zu isolieren (Klick, Conversion…). Doch wenn die Variante eine visuelle Verschiebung verursacht (z. B. ein Button, der springt, oder ein Bild, das den Inhalt nach unten schiebt), dann:

• wird die Nutzerinteraktion gestört: Fehlklicks, schlechter Eindruck, Ablenkung der Aufmerksamkeit,
• wird das Testergebnis verzerrt: Der Leistungsrückgang liegt nicht am getesteten Inhalt, sondern an der Qualität der technischen Umsetzung.

💡 Ein zu hoher CLS-Wert ist in den klassischen KPIs nicht sichtbar, wirkt sich aber auf den CVR aus, ohne dass man den Grund dafür versteht.

🧪 Wie ein A/B test CLS verursachen kann

Hier sind die häufigsten Szenarien, bei denen eine Variante unbeabsichtigt CLS auslöst:

• Hinzufügen eines Bildes oder HTML-Blocks ohne reservierten Platz: Der Inhalt „schiebt“ den Rest der Seite, sobald er geladen ist,
• Laden von A/B test-Skripten über einen langsamen Tag-Manager (anstelle einer direkten Integration im <head>),
• Dynamisches Einfügen einer Nachricht oder eines Werbebanners oberhalb des Inhalts ohne reservierten Platz,
• Änderung der Schriftart oder des Schriftgewichts ohne Preload, was zu „Sprüngen“ im Text führt,
• Verwendung unkontrollierter CSS-Animationen (z. B. ein Slide- oder Fade-in-Effekt, der die Seite neu zeichnet).

📌 Direkte Risiken beim A/B test:

• Verlust von Conversions auf Mobilgeräten (wo visuelle Sprünge verstärkt wahrgenommen werden),
• Statistisch signifikante, aber falsche Ergebnisse,
• Rückgang des CVR ohne erkennbaren Grund,
• Ablehnung der Variante aus falschen Gründen.

✅ CRO-Best-Practices, um Auswirkungen auf den CLS zu vermeiden:

1. Platzhalter für jeden hinzugefügten Block in einer Variante vorsehen (z. B. Höhe eines Bildes mit CSS aspect-ratio oder Platzhalter-Klassen reservieren),
2. Verspätetes Nachladen von Inhalten mit JavaScript vermeiden (serverseitige Einbindung oder möglichst frühe clientseitige Einbindung bevorzugen),
3. Alle Varianten vor der Bereitstellung mit Lighthouse oder PageSpeed Insights testen, um den CLS-Wert zu überprüfen,
4. A/B-Test-Skripte direkt im Code (head) einbinden, um Flickering zu vermeiden,
5. Core Web Vitals live messen für jede Variante mit einem Tool wie Web Vitals Extension, SpeedCurve, Datadog RUM oder BigQuery + GA4.