Skip to main content
Che cos'è l'effetto flicker?

A/B testing: in che modo la nostra tecnologia elimina l'effetto flicker

Reading time
5 minuti
Autore
Lauréline Kameleoon
Lauréline Saux
Laureline is Content Manager and is in charge of Kameleoon's content. She writes on best practice within A/B testing and personalization, based on in-depth analysis of the latest digital trends and conversations with Kameleoon's customers and consultants.

Durante un A/B test si parla l’effetto flicker quando la pagina originale compare per un istante prima che la variazione venga mostrata - è anche chiamato Flash of Original Content (FOOC). Ha impatto sull’esperienza dei visitatori: può portarli ad abbandonare un sito, danneggiando i risultati del test e, in generale, l’engagement con i clienti. Sebbene il flicker possa apparire solo per una frazione di secondo, ridurlo è un obiettivo importante per i brand che cercano di migliorare la performance dei test. 

1 Qual è la causa dell’effetto flicker?

Effet flicker

In linea di massima, ci sono due tipi di cause che innescano l’effetto flicker: 

CAUSA n.1: L’INSTALLAZIONE DELLO SCRIPT

L’effetto può essere causato dal caricamento del testing script, che appare l’istante prima che lo script sia disponibile e pronto a eseguire i cambiamenti necessari per caricare il tuo A/B test

I vendor di tool per A/B testing dovrebbero offrire consigli per aiutare a rimuovere il problema.

Best practice per installare il tuo script di A/B testing

Essenzialmente, prima il tuo script di A/B testing è pronto, migliore sarà la performance. Di seguito ecco i fattori che causano ritardi (i primi due sono i più importanti, siccome sono collegati al metodo di integrazione dello script con il codice del tuo sito). 

  • Lo script è hard-coded nell’header del sito invece che integrato attraverso un tag manager,
  • La posizione dello script all'interno della pagina, comparata alla posizione di altri tag (è all’inizio o alla fine della pagina?),
  • Il peso dello script e la performance dell’hosting server. Più lo script è leggero e il server potente, più velocemente lo script verrà caricato dal browser del visitatore,
  • Le capacità di caching del browser. 

SCRIPT SINCRONO O ASINCRONO: HA UN IMPATTO SULL’EFFETTO FLICKER?

Si parla molto di script sincroni e asincroni e della relativa influenza sui tempi di caricamento di una pagina. Ecco le nostre considerazioni, basate sulla nostra esperienza.

Pro e contro di script sincroni

Con uno script sincrono il browser blocca l’esecuzione e l'apparizione del resto della pagina fino al completo caricamento dello script. Tratta le istruzioni dello script come prioritarie, nel senso che vanno eseguite prima di qualsiasi altra azione. Di conseguenza, niente viene eseguito mentre lo script sta caricando. 

Per tutto il tempo di caricamento dello script ai visitatori verrà mostrata una pagina vuota. Se il server che ospita lo script non risponde, la pagina rimane bianca: ai visitatori sembrerà che il sito non sia più disponibile. Ovviamente, nessuno vuole che ciò accada al proprio sito. 

Nonostante ciò l’uso di script sincroni è consigliato da alcuni vendor per l’ottimizzazione, portando i propri clienti a mostrare pagine bianche ai loro visitatori. 

Pro e contro di script asincroni

Come suggerisce il nome, uno script asincrono viene caricato contemporaneamente alle altre risorse. Non c’è alcun blocco o rischio di mostrare pagine vuote. Non c’è però neanche la garanzia che lo script sia disponibile prima che gli altri elementi della tua pagina appaiano. Ciò significa che c’è un potenziale rischio di effetto flicker, dato che gli elementi che dovrebbero cambiare all’interno del tuo A/B test potrebbero apparire prima che lo script sia caricato e poi essere velocemente rimpiazzati dalle varianti del test. 

sfruttare i benefici degli approcci sincroni e asincroni

Per fornire il miglior compromesso possibile tra script sincroni e asincroni, abbiamo sviluppato un metodo chiamato “asynchronous blocking integration”: lo script è caricato in modo asincrono, ma la pagina rimane bianca fino a che non è disponibile, o per un certo periodo di tempo (un secondo, per esempio) prima di caricare gli altri elementi. 

Questo metodo offre i vantaggi di uno script sincrono (la pagina vuota), ma con un margine superiore di sicurezza - se il server di Content Delivery Network (CDN) di Kameleoon non risponde, la pagina si carica da sola dopo un secondo. 

synchronous and asynchronous approaches

 

Il risultato è una performance simile a uno script sincrono per quanto riguarda la rimozione dell’effetto flicker, ma con più sicurezza. 

CAUSA N.2: LA SOLUZIONE DI A/B TESTING

La seconda causa dell’effetto flicker è il modo in cui la soluzione di A/B testing interagisce con la pagina web per apportare le modifiche. Potresti pensare che una volta caricata la pagina il rischio dell’effetto flicker scompaia - ma non è così. 

Per ridurre il rischio di effetto flicker, concentrati su: 

  • La qualità del codice all’intento del tuo test,
  • Le tecnologie che usi - la soluzione di A/B testing deve usare la minor quantità possibile di CPU e RAM, offrendo l’interazione più veloce con gli elementi della pagina. 

2 Checklist: le best practice per eliminare l’effetto flicker

Kameleoon è in grado di rimuovere al 100% l’effetto flicker. Per tutti quelli che utilizzano tool diversi, seguire queste best practice potrà aiutare a ridurre l’effetto flicker. 

INSTALLA LO SCRIPT DI KAMELEOON CORRETTAMENTE

  • Installa lo script della tua soluzione di A/B testing quanto più in alto possibile nell’header del tuo sito,
  • Installa lo script usando l’asynchronous blocking integration. Se la tua soluzione non lo permette, raccomandiamo l’uso di uno script sincrono. Sebbene non sia potente quanto l’integrazione asincrona del bocco, è più probabile che prevenga l’effetto flicker rispetto a uno script asincrono. C’è comunque il (piccolo) rischio di un crash dell’intero sito,
  • Non usare tag manager così da poter mantenere il controllo sull’ordine in cui i tuo script vengono caricati,
  • Riduci le dimensioni dello script. Kameleoon ha sviluppato un pre-processing che accelera lo script caricando solo ciò che è strettamente necessario. Se, per esempio, il tuo A/B test non ha bisogno di targeting avanzato, non c’è bisogno di caricare i criteri corrispondenti. 

OTTIMIZZA IL TEMPO DI CARICAMENTO DELLE PAGINE TESTATE

  • Ottimizza il tempo di caricamento del tuo sito e di tutti gli elementi,
  • Usa un CDN per accelerare il caricamento dello script,
  • Non usare reindirizzamenti per i tuoi test. Purtroppo, il reindirizzamento degli A/B test può essere fatto solo tramite JavaScript. A differenza di un reindirizzamento “reale” di un server, (HTTP 302 ad esempio) che è molto leggero, quello tramite JavaScript è pesante e rallenta il caricamento della pagina in maniera significativa. Per eseguire un reindirizzamento JavaScript con una soluzione di A/B testing, la prima pagina e tutte le sue risorse (immagini, script, etc.) devono caricare prima della seconda pagina. Sicuramente non ci sarà nessun effetto flicker, ma il caricamento della pagina sarà estremamente lungo. In realtà dovresti limitare i reindirizzamenti solo a quando non c’è alternativa. Un buon esempio sarebbe quello di testare una completa revisione del tuo sito, ospitato su un server diverso. In questo caso i reindirizzamenti sono quasi obbligatori. In tutti gli altri casi è meglio evitarli. 

USA UNO STYLE SHEET QUANDO POSSIBILE

Ciò fa una differenza minima se usi Kameleoon, dove sei libero di scegliere le implementazioni che meglio ti si addicono senza preoccuparti della performance, siccome è preso automaticamente in considerazione. 

NON USARE JQUERY CON KAMELEOON

Kameleoon non usa librerie esterne, riducendo ulteriormente le dimensioni dello script. I nuovi siti sono basati su framework come Angular o React, che rendono JQuery un fardello inutile. Inoltre, dovresti essere cauto: se il tuo sito usa già JQuery, potrebbe non essere sufficiente ritirarlo dai tuoi A/B test. Se lo script di JQuery si carica dopo, potresti comunque avere un effetto flicker.

OTTIMIZZA IL TUO CODICE

Il codice dovrebbe essere ottimizzato così da non aggiungere istruzioni JavaScript non necessarie. L'editor grafico di Kameleoon non genera istruzioni JavaScript e usa un motore per applicare le modifiche fatte dall’utente. Perciò questo non è un problema dei nostri utenti. 

MODIFICA IL SETINTERVAL SULLA PAGINA

Il setInterval è usato per modificare gli elementi selezionati il prima possibile. L’idea è testare valori diversi per trovare il parametro ideale che faccia scomparire l’effetto flicker senza aumentare il tempo di CPU che la tua soluzione di A/B testing usa. Kameleoon elimina il bisogno di setInterval, poiché le modifiche sono applicate a un elemento prescelto appena viene iniettato nel DOM della pagina.

3 In che modo Kameleoon elimina l’effetto flicker al 100%

L’effetto flicker è causato dall’A/B testing. Noi di Kameleoon abbiamo deciso di risolvere definitivamente il problema. Così:

COME FUNZIONA A UN LIVELLO TECNICO

La nostra innovazione tecnologica ha un impatto su come Kameleoon interagisce con gli elementi sulla pagina una volta che lo script è disponibile, prendendo in considerazione tutte le difficoltà relative al ciclo di refreshment del browser. Le modifiche sono applicate direttamente agli elementi non appena questi compaiono sulla pagina, senza il bisogno di una pagina vuota e senza il rischio di un crash del sito. 

Per chi è interessato al lato tecnico, la nostra tecnologia si basa sugli standard MutationObserver del DOM. È uno standard implementato su tutti i browser (mobile e desktop) supportati da Kameleoon. 

Ciò vuol dire che la nostra tecnologia flicker-free è compatibile con il 97% di tutti browser esistenti. Non c’è bisogno di cambiare codice: se il browser non è compatibile, la tecnologia semplicemente non verrà installata e i tuoi test continueranno normalmente. 

Per saperne di più sulla nostra tecnologia flicker-free, guarda la sezione documenti sviluppatore.

Lauréline Kameleoon
Lauréline Saux
Laureline is Content Manager and is in charge of Kameleoon's content. She writes on best practice within A/B testing and personalization, based on in-depth analysis of the latest digital trends and conversations with Kameleoon's customers and consultants.