Wie man Flickering bei A/B-Tests reduziert

Cedric Nauwelaerts
Cedric Nauwelaerts

Von Flickering spricht man, wenn bei A/B-Tests der Originalinhalt vor einer experimentellen Version erscheint. Dieses ‚Aufblitzen‘ der Seite ist auch als Flash Of Original Content (FOOC) bekannt. Dieses unglückliche Phänomen kann Ihre Benutzer beeinflussen und das Ergebnis des Tests beeinträchtigen. Glücklicherweise gibt es verschiedene Anti-Flickering-Techniken, die die Auswirkungen von FOOC minimieren und die Durchführung von A/B-Tests ohne Flickering ermöglichen.

Wir werden uns darauf konzentrieren, wie man die Auswirkungen des Flickerings bei A/B-Tests reduzieren kann.

A/B-Tests ohne Flickering

Flickering wird traditionell mit Client-seitigen Tests durchgeführt, die Instrumente wie Google Optimize, VMO Testing oder Optimizely verwenden. Sie können die Auswirkungen von Flickering weiter reduzieren, indem Sie Server-seitige Tests durchführen. Beim Client-seitigen Testen können Sie den Originalinhalt auch mit CSS und Anti-Flickering-Snippets ausblenden.

Das Problem ausblenden

Sie können Flickering vermeiden, indem Sie den ursprünglichen Inhalt mit CSS unterdrücken. Durch die Verwendung des CSS-Elements ‚display:none‘ wird die ursprüngliche Seite einfach ausgeblendet, bis die geänderte Version geladen ist. Es kann jedoch sein, dass Ihr Benutzer einen leeren Bildschirm sieht, bis die neue Version geladen ist. Studien legen nahe, dass Nutzer innerhalb von 1/20 einer Sekunde einen ersten Eindruck von einer Website gewinnen, so dass jede Millisekunde zählt.

Anti-Flickering-Snippets

Es gibt Anti-Flickering-Snippets mit A/B-Test-Instrumenten wie Google Optimize, die die ‚Ausblendzeiten‘ mit der CSS-Cloaking-Funktion minimieren können. Diese funktionieren nur auf Ihrer Webseite und sind nicht kompatibel mit Google Tag Manager oder asynchronen Skripten (Skripte, die ausgeführt werden, sobald der Browser Zeit hat, sie auszuführen). Verschiedene Web-Testing-Instrumente haben unterschiedliche Ausblendzeiten, so dass Sie Test-instrumente evaluieren können, um zu sehen, welche die Ausfallzeit minimieren können.

Moderation ist der Schlüssel

Lieber die Flickering-Zeiten verkürzen, als Flickering auszublenden, kann dazu beitragen, das Engagement des Nutzenden für den Test zu erhöhen. Es gibt mehrere einfache Möglichkeiten, dies zu tun, nämlich:

  • Ladezeiten Ihrer Seiten verkürzen – prüfen Sie Ihre Caching-Zeiten, Komprimierungsmöglichkeiten und optimieren Sie Ihre Bilder
  • Ihren Code vereinfachen – deaktivieren Sie überflüssige Tests, bewerten Sie Änderungen, um zu sehen, ob sie über CSS-Modifikationen anstelle von mehreren Codezeilen durchgeführt werden können
  • Fügen Sie die A/B-Testlösung in den -Teil des Quellcodes ein
  • Verwenden Sie so viele CDNs (Content Delivery Networks) wie möglich, um Verzögerungszeiten zu reduzieren

Es gibt noch eine Reihe anderer, detaillierterer Methoden, um Flickering zu reduzieren.

Asynchrone Skripte vermeiden

Instrumente wie Google Optimize verwenden asynchrone Skripte, weshalb das Tool das Flickering ausblenden muss, bevor der neue Inhalt gerendert wird. Asynchrone Skripte führen das ursprüngliche Rendering der Seite durch und wenden dann die Testaktualisierungen in dem verfügbaren Zeitfenster an, so dass die Seite (und der Nutzende) warten müssen, bis das neue Material verfügbar ist. Google Tag Manager verwendet auch asynchrone Skripte, die die Flickering-Zeiten erhöhen können.

Verwenden Sie JQuery zu Ihrem Vorteil

Da viele Client-seitige Lösungen jQuery verwenden, müssen Sie möglicherweise keine jQuery-Bibliothek in das Tag einfügen. Wenn Sie sich nicht sicher sind, können Sie überprüfen, ob Ihr Website-Provider jQuery verwendet, um die zusätzliche Übertragungsgröße zu verringern und die Ladezeiten für Ihre Seite zu verkürzen. Der Versuch, Änderungen in JavaScript über jQuery vorzunehmen, vermeidet auch längere Zeiten, in denen das DOM (Document Object Model) flackert.

Testen Sie Ihre Flickering-Zeiten

Das Testen der Flickering-Zeiten hilft bei der Bewertung und Reduzierung von Flickering-Effekten, bevor Sie den Test absenden. Simo Ahava hat einige gute Ratschläge, wie man dies tun kann. Im Grunde müssen Sie den Zeitunterschied zwischen dem Erscheinen der Originalseite und dem Erscheinen des Testinhalts ermitteln. Sobald Sie versucht haben, einige Ihrer Verzögerungen mit den oben genannten einfachen Schritten zu beheben, können Sie einige Flickering-Tests durchführen, um deren Erfolg zu bewerten.

Je schneller das Flickering, desto besser der Test

Flickering einfach auszublenden, scheint zwar die beste Lösung zu sein, aber die Auswirkungen auf den Nutzer in Bezug auf die Zugänglichkeit der Seite und den ersten Eindruck könnten die Ergebnisse Ihrer A/B-Tests beeinflussen. Sie müssen die Vorteile abwägen:

  • Der Vorteil von Client-seitigen Tests gegenüber Server-seitigen Tests
  • Ob es sich lohnt, Flickering vollständig auszublenden, um die Benutzerfreundlichkeit zu beeinträchtigen

Wir bei Upthrust glauben, dass die Optimierung des Testprozesses der beste Weg ist, um aufschlussreiche Analysen für unsere Kunden zu nutzen. Erfahren Sie mehr darüber, wie wir Sie bei Ihrer digitalen Analyse unterstützen können. Kontaktieren Sie uns, wenn Sie mehr über unsere A/B-Testing-Dienstleistungen erfahren möchten.

Blog