ABTasty Antiflickering

Problema

Gli A/B test che richiedono trasformazioni pesanti e il caricamento di nuove immagini, per esempio il cambio di immagini nelle pagine di listing o in home, spesso provocano flickering quando le modifiche vengono iniettate direttamente via ABTasty. Succede perché il JavaScript di ABTasty parte dopo che la pagina ha iniziato a caricare: per un attimo l'utente vede il contenuto originale, poi arriva la variante. Per esperimenti complessi, che normalmente richiederebbero test lato server, l'approccio client-side rovina l'esperienza.

Soluzione

Ho sviluppato un workaround basato sui cookie che elimina del tutto il flickering. Invece di iniettare le modifiche direttamente da ABTasty, uso ABTasty per iniettare un cookie con il nome del test. Lato sito resto in ascolto del tag di ABTasty e, se la sessione ha un esperimento attivo, leggo i cookie e applico le modifiche dal frontend prima che la pagina venga renderizzata. Così le modifiche entrano in modo sincrono durante il caricamento, senza nessuno sfarfallio o salto di contenuto.

Risultato

Il workaround ha azzerato il flickering, anche sugli A/B test più complessi, quelli che di solito richiederebbero un'implementazione lato server. La soluzione permette di far girare senza artefatti visivi esperimenti pesanti: sostituzione di immagini, modifiche di layout, trasformazioni importanti del DOM. In pratica dà i vantaggi del test lato server, cioè nessun flickering e un'esperienza pulita, mantenendo la flessibilità degli strumenti client-side.