Qu'est-ce que l'effet flicker lors d'un A/B test ?

L’effet flicker, aussi appelé FOOC (Flash of Original Content) peut être visible lorsqu’un visiteur se rend sur un site où un test A/B est en cours. Il ne dure que quelques secondes mais peut avoir des conséquences sur le comportement des visiteurs et sur les résultats de vos tests A/B.1. Qu’est-ce que l’effet flicker dans le domaine de l’A/B testing ?Imaginons qu’il existe deux versions d’un même magasin et que chaque client soit réparti dans l’une ou l’autre version de manière aléatoire. L’effet flicker, c’est comme si la vendeuse vous faisait entrer dans le magasin A, puis vous demandait subitement de vous rendre dans le magasin B : vous refuseriez certainement, surtout si ce que vous avez pu apercevoir du premier magasin vous intéressait. C’est ce qu’il peut se produire sur internet lorsqu’un internaute se rend sur un site avec un A/B test en cours. Au lieu de voir directement la variante à laquelle il aurait dû être exposé, le visiteur voit pendant quelques secondes la version originale de votre site.

L’effet flicker peut durer de 100 millisecondes jusqu’à quelques secondes (temps de rafraîchissement du navigateur) alors que les visiteurs de votre site mettent en moyenne 13 millisecondes pour comprendre une image. Il s’agit d’une très courte période de temps mais cette apparition peut avoir des conséquences sur l’expérience des visiteurs et sur les résultats de vos tests A/B.

1. Quelles sont les conséquences de l’effet flicker ?

L’expérience utilisateur est dégradée

Si l’un des visiteurs de votre site à l’œil suffisamment vif pour apercevoir un effet flicker, il risque de se rendre compte qu’il est testé et peut perdre confiance en votre marque.

Les résultats du test A/B sont faussés

Avec l’effet flicker, les visiteurs qui s’aperçoivent qu’un test est mené sur votre page risquent de changer de comportement. Or, tout A/B test doit pouvoir permettre d’étudier le comportement et les réactions des visiteurs dans leur contexte habituel. Si ce n’est pas le cas, alors les résultats du test A/B ne seront pas représentatifs des réelles habitudes et préférences des visiteurs et vous risquez de prendre de mauvaises décisions.

2. D’où vient l’effet flicker ?

Avec une solution d’A/B testing « client-side », les modifications du test sont appliquées via un script sur chaque page où un test est en cours. Un script est un programme (ou un bout de programme) qui permet d’exécuter des actions prédéfinies lorsque la page se charge ou lorsqu’un visiteur interagit avec un site. Côté client, on utilise principalement des scripts JavaScripts que le navigateur exécute. Lors d’un A/B test, c’est un script chargé par le navigateur qui permet d’appliquer les modifications à votre site pour que les visiteurs soient exposés à des variantes différentes. L’effet flicker est susceptible d’apparaître si le chargement de ces éléments est trop long ou si le script n’est pas placé au bon endroit. À savoir : si votre solution d’A/B testing propose une prise en main « server-side », alors pas besoin de vous soucier de l’effet flicker : il n’existe tout simplement pas. Plusieurs éléments peuvent ralentir le chargement de votre site et vous pouvez y remédier en procédant à quelques optimisations.

- Le temps de chargement du site

Plus votre site est long à charger et plus il y a de risque que l’effet flicker apparaisse. En effet, c’est le script qui permet d’appliquer les modifications au site et s’il n’est pas chargé, c’est la version originale de votre site qui apparait. En optimisant tous les éléments qui ralentissent votre site, vous pouvez considérablement réduire le risque d’effet flicker.

- L’emplacement du script

Votre script doit être placé le plus haut possible dans votre page car il doit être chargé le plus tôt possible. Si vous le placez tout en bas, alors tous les autres éléments devront être chargés avant que votre script ne le soit.

- La taille du script est trop importante

Votre script d’A/B testing peut comporter plusieurs tests, et certains sont peut-être obsolètes ou n’ont pas d’utilité pour le test que vous menez à l’instant T. En supprimant les tests inutiles, votre script sera allégé et chargera plus vite.

- Script synchrone ou asynchrone

Avec des scripts asynchrones, le script est téléchargé en même temps que les autres ressources ce qui empêche tout blocage. Toutefois, cela peut favoriser l’effet flicker car les éléments à modifier peuvent apparaître avant que le script ne soit téléchargé. Avec des scripts synchrones, le navigateur bloque l’affichage de la page si le script n’est pas téléchargé. Le risque est donc d’avoir un temps de chargement très long et de se retrouver avec une page blanche rendant le site inaccessible. Kameleoon a développé un compromis entre les deux approches : le script asynchrone bloquant.

- L’utilisation d’un gestionnaire de tag

Les gestionnaires de tag permettent de gérer plus facilement vos tags (implémentation, sécurisation des données, attribution…). Toutefois, il est préférable d’intégrer le script en dur dans le code HTML car dans certains cas, cela pourrait vous empêcher d’agir sur l’ordre de chargement des scripts chargés par le tag manager.

- Utiliser une librairie on-site plutôt qu’une version intégrée dans le code de la plateforme.

La librairie jQuery est une bibliothèque Javascript utilisée pour faciliter l’écriture des scripts. Il est néanmoins préférable d’utiliser une librairie intégrée dans le code de la plateforme car elle sera chargée avant le script ce qui permet de réduire sa taille et d’améliorer les performances de chargement.

- Utiliser un CDN (Content Delivery Network)

Un CDN est un ensemble de serveur situé à différents endroits qui permet d’accélérer la vitesse de chargement du site. En utilisant un CDN, vous optimisez vos chances d’atténuer l’effet flicker car votre site sera chargé plus rapidement. Enfin, l’effet flicker dépend également de la qualité du code du logiciel et des technologies que la solution d’A/B testing utilise.

Par exemple, Kameleoon a mis en place des améliorations pour faire disparaitre l’effet flicker : - Seules les données nécessaires sont chargées. Par exemple, si votre A/B test ne nécessite pas de ciblage avancé, pas besoin de charger tous les critères de ciblage. - Kameleoon ne fait appel à aucune librairie externe (jQuery), ce qui permet de réduire encore la taille du script. - L’éditeur visuel de Kameleoon permet d’optimiser le code de vos modifications afin de ne pas générer d’instructions JavaScript inutiles. Il se repose sur un moteur appliquant les modifications faites par l’utilisateur, ce qui évite totalement ce problème. - Le nouveau script anti-flickering permet au navigateur de notifier la présence de tous les éléments sur la page en temps réel. Les algorithmes de Kameleoon sont donc capables de modifier immédiatement les éléments qui viennent d’apparaître dans le code HTML et de garantir l’affichage de vos tests A/B et de personnalisation à vos visiteurs sans effet flicker. Découvrez les solutions mises en place par Kameleoon pour faire disparaître l’effet flicker.