Beim Flicker-Effekt im A/B Testing sieht man für einen winzigen Moment die ursprüngliche Version einer Webseite, bevor diese durch die Inhalte der Testvariante ersetzt wird. Für das Flickering gibt es kein Allheilmittel und auch vermeintlich schnelle und innovative Lösungen des Problems sind nur begrenzt effektiv. Die gute Nachricht ist jedoch, dass es verschiedene Tipps und Tricks gibt, um das Einblenden einer Testvariante zu beschleunigen und das Flickering somit erfolgreich zu vermeiden.
Was bedeutet Flickering im Detail?
Sollte Ihnen der sogenannte Flicker-Effekt kein Begriff sein, sind Sie ihm dennoch mit hoher Wahrscheinlichkeit schon einmal begegnet: Eine Webseite wird geladen und nach wenigen Millisekunden werden für den Nutzer sichtbar die Änderungen einer Testvariante eingeblendet. Im Bruchteil einer Sekunde sieht man also erst die Original- und dann die Testvariante. Das Flickering wird als schlechte Nutzererfahrung gefürchtet, da es dem Besucher verrät, dass er sich gerade in einem A/B Test befindet.
Flickering kann bei der Anwendung von A/B Testing-Lösungen auftreten. Insbesondere dann, wenn während des Ladevorgangs einer Seite über ein JavaScript-Overlay Modifikationen eingeblendet werden. In den meisten Fällen bemerken die Besucher den Flicker-Effekt überhaupt nicht. Wenn eine Webseite jedoch eine längere Ladezeit benötigt oder auf umfangreichen, externen Ressourcen basiert, kann es dauern, bis Änderungen eingeblendet werden. Es kommt zu einem kaum bemerkbaren Flackern: dem Flicker-Effekt.
Gibt es ein Geheimrezept, um Flickering zu vermeiden?
Einige Anbieter versprechen, innovative Techniken zu nutzen, um gänzlich „flickerfrei“ zu sein. Hierbei handelt es sich jedoch nicht um eine neuartige Produkteigenschaft. Stattdessen werden gängige Vorgehensweisen beim A/B Testing genutzt, die auch den Anwendern aller anderen Testing-Tools zur Verfügung stehen.
Jede Methode zur Vermeidung des Flicker-Effekts stößt hierbei früher oder später an ihre technischen Grenzen. Wenn man sich unter den Marktführern umsieht, wird deutlich, dass die sogenannten „Wundermethoden“ mit jedem Tool nutzbar sind. Aus gutem Grund werden Sie allerdings nur als letzte Maßnahme eingesetzt, wenn zuvor keine andere Methode zur Vermeidung des Flickerings Erfolg hatte. Jede Webseite weist eine unterschiedlich starke Ausprägung des Flickering-Effekts auf, die stark von der individuellen Performance und der Einbindung des Javascript-Tags abhängt.
Doch wie funktioniert die angeblich so innovative Vermeidung des Flickerings überhaupt? Es handelt sich dabei um eine Content-Masking Methode. Der eingeblendete Inhalt einer Seite wird kurzzeitig versteckt, indem CSS-Properties, wie visibility: hidden oder display: none, für das Body Element eingesetzt werden. Diese CSS-Property versteckt den Content so schnell wie möglich (denn das Tag befindet sich im <head> Element der Seite). Bevor es wieder eingeblendet wird, bestand ausreichend Zeit, um alle Modifikationen der Testvariante anzuwenden. Dies verhindert den charakteristischen “vorher/nachher” Flicker-Effekt und ersetzt ihn mit einem “leere Seite/nachher” Effekt.
Wenn eine Seite Probleme beim Laden aufweist, birgt diese Methode jedoch das Risiko, dass der Nutzer für mehrere Sekunden (oder sogar komplett) auf einer leeren Seite verweilt. Ein weiterer Nachteil dieser Lösung des Flickerings besteht darin, dass der Eindruck erzeugt wird, die Seite sei nicht performant. Daher sollte die Wiedergabe des Inhalts nicht länger als maximal wenige Millisekunden dauern. Um im A/B Testing valide Ergebnisse zu erhalten, ist es ebenso wichtig, die verzögerte Wiedergabe des Inhalts an einer Kontrollgruppe zu testen. Dies vermeidet Verzerrungen durch die verschiedenen Ladegeschwindigkeiten in der Testauswertung.
Insgesamt ist das Content Masking nicht als Standardmethode zur Flickering-Vermeidung ratsam. Es ist zwar sehr schnell und einfach mit wenigen JavaScript Lines zu implementieren, doch wenn Ihre Modifikationen zu viel Ladezeit in Anspruch nehmen und Sie vermeiden wollen, dass Ihre Besucher von einer leeren Webseite begrüßt werden, gibt es noch alternative Anwendungsempfehlungen, um einen eventuell auftretenden Flickering-Effekt zu verringern.
Die folgenden Handlungstipps können dazu beitragen, Modifikationen schneller einzublenden und die Auswirkung des Flickerings so gering wie möglich zu halten.
Wie kann das Flickering begrenzt werden?
- Optimieren Sie die Ladezeit Ihrer Seite mit allen verfügbaren Mitteln: Seitencaching, Kompressionen, Bildoptimierung, CDNs, parallele Abfragebearbeitung mit dem HTTP/2 Protokoll etc.
- Platzieren Sie den Tag der Testinglösung so weit oben wie möglich im <head> Element des Quellcodes und vor umfangreichen externen Ressourcen (wie z. B. Web-Schriftarten, JavaScript Bibliotheken etc.)
- Nutzen Sie die synchrone Version des AB Tasty Skripts, nicht die asynchrone.
- Nutzen Sie keinen Tag Manager, um die Tags Ihrer Lösung aufzurufen (z. B. Google Tag Manager). Diese Lösung erscheint im ersten Schritt aufwändiger, doch erlaubt dies eine bessere Kontrolle über die Tags und das Flickering.
- Verzichten Sie auf die jQuery Bibliothek im Tag, wenn Ihr Seitenprovider bereits eine eigene verwendet. Die meisten A/B Testinglösungen nutzen jQuery bereits. AB Tasty setzt die Technologie ebenfalls ein, sodass unsere Anwender den Transfer bereits um einige Kilobyte verringern können.
- Reduzieren Sie die Skriptgröße Ihrer Lösung, indem Sie inaktive Tests entfernen. Manche Lösungen laden alle Tests im Skript – unabhängig davon, ob diese aktiv sind oder nur als Entwürfe gespeichert sind. AB Tasty integriert nur aktive Tests im Skript. Wenn Sie dennoch eine hohe Anzahl aktiver Personalisierungen haben, empfiehlt es sich, diese permanent auf Ihrer Seite zu implementieren und sie in AB Tasty zu deaktivieren.
- Achten Sie auf die Art der Modifikationen. Das Hinzufügen umfangreicher Skripte oder Programmierungen erhöht den Flicker-Effekt.
- Nutzen Sie verstärkt Stylesheets. In der Regel ist es möglich, einen erwünschten visuellen Effekt mit Hilfe von Stylesheets zu erzielen. Sie können z. B. eine JavaScript Anweisung implementieren, die einem Element eine CSS-Klasse hinzufügt, wodurch die Klasse seine Komponente selbst modifiziert, anstatt über Skriptzeilen den Style zu ändern.
- Optimieren Sie Ihren modifizierten Code. Während sich Anwender in dem Versuch, Änderungen zu implementieren, durch den WYSIWYG-Editor klicken, fügen sie oft überflüssige JavaScript Anweisungen hinzu. Analysieren Sie den generierten Code im „Edit Code“ Tab und optimieren Sie diesen, indem Sie nicht notwendige Stellen entfernen.
- Stellen Sie sicher, dass die gewählte Lösung einen (oder mehrere) CDNs nutzt, damit das Skript mit Ihren Modifikationen so schnell wie möglich geladen werden kann – unabhängig davon, wo ein Besucher sich befindet.
- Für fortgeschrittene Nutzer: Fügen Sie jQuery Selektoren dem Cache als Objekte hinzu, damit diese nicht mehrfach im DOM reorganisiert werden müssen. Sie können Änderungen auch im JavaScript durchführen, insbesondere dann, wenn es um Elemente einer Klasse oder ID geht.
- Nutzen Sie Weiterleitungstests, jedoch nur, wenn diese sich nach einer Auswertung der Beziehung zwischen Modifikation und der Dauer der Testaufsetzung als sinnvoll erweisen.
Mit diesen Maßnahmen sollte das Flickering auf Ihrer Webseite nicht mehr bemerkbar sein. Wenn Sie zu einem der genannten Schritte Fragen haben, hilft unser Support-Team Ihnen gerne weiter.
