A/B Testing & Flickering : retour sur le clash Kameleoon / ABTasty A/B Testing & Flickering : retour sur le clash Kameleoon / ABTasty

A/B Testing & Flickering : retour sur le clash Kameleoon / ABTasty

par ,
le 24 février 2017

0
0

Cette semaine, l’effet flicker dans les tests AB / MVT n’est plus selon Kameleoon mais finalement si selon ABTasty.

Le flickering c’est quoi ?
L’effet flicker / le flickering est un terme relatif au test A/B à savoir quand l’internaute perçoit les changements s’effectuer dans la page entre la version originale et la version de test.

La disparition du « flickering » ?
C’est l’annonce de « Kameleoon», l’éditeur de solution d’A/B testing, sur son blog le 16 janvier dernier.
Se proclamant comme « première solution d’optimisation » sans équivalent qui garantit un anti-flickering en « toutes circonstances » quel que soit le site concerné.

L’innovation de Kameleoon, ça marche vraiment ?
L’explication sur les cycles de rafraichissement des navigateurs est assez évasive et le fonctionnement de leur nouveau script qui n’interroge plus la page mais attend un retour du navigateur me parait peu compatible avec tous les navigateurs anciens comme récents. Par ailleurs, tout cela semble contradictoire avec les bonnes pratiques recommandées par les équipes Kameleoon elles même dans le facteur 7 des menaces de l’AB test où notre code doit être compatible avec tous les navigateurs et terminaux donc aurions nous toujours du flickering sur les anciens navigateurs ou non compatibles ?

Le retour de bâton de ABTasty
ABTasty, autre éditeur de solution d’A/B testing, publie hier une « contre offensive » sur le sujet de l’effet flicker.
Selon ABTasty il ne s’agit ni plus ni moins que d’une solution technique déjà connue qui présente des limites et qui est implémentable par n’importe quelle solution d’A/B testing.
Dans son article ABTasty ne met en avant aucune solution miracle contre l’effet flicker mais plutôt des bonnes pratiques pour en limiter les effets qui au passage sont très bien expliquées.

Et chez les autres éditeurs ?
Prenons ce qu’évoque Visual Website Optimizer sur le sujet du flickering.
Une seule préconisation : charger en synchrone le script le plus haut possible dans le Head de page.
Ensuite de cacher/afficher le contenu de la page le temps que les modifications s’effectuent et de « jouer » avec des « setInterval » pour modifier le plus rapidement possible les éléments ciblés.

Mon retour d’expérience sur l’effet flicker
Après avoir pratiqué du testing (AB/MVT) sur les solutions d’A/B Testing les plus répandues du marché (Kameleoon, ABTasty, VWO, Optimizely & Google Optimize)
Il n’existe, à mon sens et à l’heure d’aujourd’hui, aucune solution magique contre cet effet mais plus la mise en place de certaines bonnes pratiques bien listées par AB Tasty ici, que vous retrouverez également ci-dessous :

  • Optimiser le temps de chargement de votre site en utilisant toutes les techniques disponibles : mise en cache des pages, compression, optimisation des images, utilisation d’un CDN, parallélisation des requêtes avec le protocole HTTP 2 …
  • Placer le tag de la solution d’A/B testing le plus haut possible dans le code source, à l’intérieur de la balise <head> et avant l’appel à des ressources externes gourmandes (ex : web font, librairies JavaScript diverses et variées…).
  • Utiliser la version synchrone du script AB Tasty, la version asynchrone augmentant les chances de flicker
  • Ne pas utiliser un gestionnaire de tags pour appeler le tag de votre solution (ex : Google Tag Manager). Certes, c’est moins pratique mais vous pouvez facilement contrôler la priorité de déclenchement de votre tag.
  • Ne pas insérer la librairie jQuery dans le tag de votre fournisseur si votre site y fait déjà appel. La majorité des solutions d’A/B testing côté navigateur repose sur jQuery. AB Tasty vous permet néanmoins de ne pas charger ce célèbre framework JavaScript si vous l’utilisez déjà par ailleurs. Ce sera autant de Ko à ne pas charger.
  • Réduire la taille du script chargé par votre solution en supprimant les tests non actifs. Certaines solutions incluent dans leur script l’intégralité de vos tests, qu’ils soient en pause ou en draft. Chez AB Tasty, par défaut, seuls les tests actifs sont inclus, néanmoins, si vous avez de nombreuses personnalisations en cours, il peut être opportun de les passer en production de manière définitive et de les désactiver côté AB Tasty.
  • Prêter attention à la nature des modifications apportées. Insérer plusieurs centaines de lignes de codes pour construire votre modification causera inévitablement plus d’effet flicker qu’une simple modification de style CSS ou de wording.
  • Se reposer au maximum sur les feuilles de style. Il est souvent possible d’arriver à un même résultat visuel en utilisant des feuilles de styles. Par exemple, vous pouvez vous contenter d’une instruction JavaScript qui ajoute une classe CSS à un élément, cette dernière se chargeant de modifier son aspect, plutôt que plusieurs lignes de script qui manipulent le style de cet élément.
  • Optimiser le code de vos modifications. En tâtonnant lors de la mise en place de vos modifications via l’éditeur WYSIWYG, vous pouvez ajouter sans le savoir plusieurs instructions JavaScript qui ne sont pas nécessaires. Analysez rapidement le code généré dans l’onglet “Edit Code” et optimisez-le en ré agençant ou en supprimant les parties inutiles.
  • S’assurer que la solution utilisée fait appel à un (ou plusieurs) CDN pour charger le plus rapidement possible le script contenant vos modifications, quel que soit l’endroit où se trouve votre internaute.
  • Pour les utilisateurs avancés : mettre en cache les sélecteurs jQuery en tant qu’objets pour ne pas avoir à retraverser le DOM à plusieurs reprises et/ou coder les modifications en JavaScript plutôt qu’en jQuery, notamment pour cibler les éléments par class ou id.
  • Utiliser des tests par redirection dans la mesure du possible et si cela reste pertinent après avoir mis en relation la nature de la modification et le temps de mis en œuvre d’un tel test.

Si après avoir mis en place ces optimisations, vous constatez encore un effet flicker, vous pouvez vous résoudre à utiliser la technique consistant à masquer le contenu de la page tant que tous les éléments ne sont pas chargés.

 

– – – – – – – – – – – –    UPDATE, nouvel article de Kameleoon ici    – – – – – – – – – – – –

mots-clés :

, , ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

A/B Testing & Flickering : retour sur le clash Kameleoon / ABTasty