CLS A/B-Testung

CLS (Cumulative Layout Shift) ist einer der drei von Google definierten Core Web Vitals und misst die visuelle Stabilität einer Webseite, d. h. wie sich Elemente beim Laden unerwartet verschieben.
Im Rahmen vonA/B-Tests ist CLS eine häufige Falle, die die Testergebnisse verfälschen oder die Benutzererfahrung beeinträchtigen kann, selbst wenn die getestete Variante inhaltlich besser erscheint.

🎯 Warum dies beim A/B-Testing entscheidend ist

Ein A/B-Test zielt darauf ab, die Auswirkungen einer bestimmten Änderung auf das Nutzerverhalten (Klick, Konversion usw.) zu isolieren. Wenn die Änderung jedoch zu einer visuellen Verschiebung führt (z. B. eine Schaltfläche, die springt, oder ein Bild, das den Inhalt nach unten verschiebt), dann:

Die Benutzerinteraktion wird gestört: Fehlklick, falscher Eindruck, abgelenkte Aufmerksamkeit,
Das Testergebnis wird verfälscht: Der Leistungsabfall ist nicht auf den getesteten Inhalt zurückzuführen, sondern auf die Qualität der technischen Ausführung.

💡 Ein zu hoher CLS wird in den klassischen KPIs nicht sichtbar sein, aber er wird den CVR beeinflussen, ohne dass man versteht, warum.

🧪 Wie ein A/B-Test CLS verursachen kann

Hier sind einige häufige Szenarien, in denen eine Abweichung unbeabsichtigt den CLS auslöst:

Hinzufügen eines Bildes oder eines HTML-Blocks ohne Platzreservierung: Der Inhalt „drückt“ nach dem Laden den Rest der Seite nach unten.
Laden von A/B-Test-Skripten über einen langsamen Tag-Manager (anstelle einer direkten Integration in das <head>),
Dynamisches Einfügen einer Nachricht oder eines Werbebanners über dem Inhalt ohne reservierten Platz,
Änderung der Schriftart oder Schriftstärke ohne Preload, was zu „Sprüngen” im Text führt.
Verwendung von nicht kontrollierten CSS-Animationen (z. B. Slide- oder Fade-in-Effekt, der die Seite neu zeichnet).

📌 Direkte Risiken bei A/B-Tests:

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

✅ Bewährte CRO-Praktiken, um Auswirkungen auf den CLS zu vermeiden:

Den reservierten Platz einplanen für jeden Block, der in einer Variation hinzugefügt wird (z. B.: Höhe eines Bildes mit CSS reservieren Seitenverhältnis oder Platzhalterklassen),
Vermeiden Sie die verspätete Einbindung von Inhalten mit JavaScript (bevorzugen Sie serverseitige Einbindungen oder möglichst frühzeitige clientseitige Einbindungen).
Testen Sie alle Varianten vor der Bereitstellung mit Lighthouse oder PageSpeed Insights, um den CLS-Wert zu überprüfen.
Integrieren Sie die A/B-Test-Skripte direkt in den Code (Head), um Flackern zu vermeiden.
Messen Sie die Core Web Vitals live für jede Variante mit einem Tool wie Web Vitals Extension, SpeedCurve, Datadog RUM oder BigQuery + GA4.