Bästa sätten att undvika flickering (ett av de vanligaste A/B-testmisstagen)

Det finns redan ett blogginlägg om detta ämne publicerat av Alhan Keser på Widerfunnel från 2015. Webben utvecklas dock snabbt, och mycket har hänt sedan dess. Exempelvis har Google Optimize och Optimizely X släppts, responsiv design blir allt viktigare och antalet användare som surfar via mobilen är högre än någonsin förut.

Så, därför kommer här en uppdaterad lista gällande hur du löser flickeringproblem i dina A/B-test samt att vi också länkar till relaterade ”best practices” och checklistor för A/B-testare och implementerare.

Först – Vad är flickering?

Flickering eller Flash of original Content (FOOC), innebär att användaren ser originalversionen av din sida innan hen ser variationen, alltså version B.

Exempel på hur flickering kan se ut vid ett A/B-test

(Disclaimer: Det kan också vara ett exempel på ett medvetet vågat experiment)

Varför uppstår flickering?

Eftersom de flesta A/B-testningsverktyg körs på klientens sida (alltså i användarens webbläsare) är detta ett väldigt vanligt problem. Men det går att förebygga.

Såhär fungerar de flesta A/B-testningsverktygen:

Detta är ett diagram som visar hur Optimizely Classic-koden fungerar (Källa: Optimizely)

Diagrammet visar att de ändringar vi gjort i vårt testverktyg läggs in på webbsidan medan besökarens webbläsare laddar sidan. Den nya koden arrangerar elementen allteftersom under själva laddningen så att den ska representera de ändringar vi gjort med verktyget.

Det finns ingen officiell information tillgänglig som beskriver hur Google Optimize exekveras, men det finns ett sätt att förebygga flickering med några rader kod som döljer element på sidan medan de laddas. Se mer info nedan.

Vad spelar det för roll att du får en snabb glimt av originalversionen?

En studie vid Carleton Universitetet i Ottawa visar att intryck uppstår under de första 50 millisekunderna när en besökare ser en webbsida¹. Det betyder att hjärnan kan göra en bedömning nästan lika snabbt som ögat tar in informationen. Studien visar också att första intrycket varar, ett fenomen som kallas för gloriaeffekten.

I en annan studie som gjordes 2015 på MIT upptäckte en grupp hjärnforskare att hjärnan kan bearbeta hela bilder trots att dom endast visas under 13 millisekunder ².

Detta betyder att:

1. En användare behöver bara se en glimt av variationen (en flicker), medveten eller omedveten, för att skapa ett första intryck. Det är fullt möjligt att användaren tar beslut baserat på detta första intryck.
2. Användarbeteende kan därför inte spåras till någon av versionerna, varken originalet eller variationen.

Korta versionen:

Alla resultat som påverkats av flickering är opålitliga. Eftersom vi inte vet vad för sorts experiment vi egentligen gjort bör vi därför inte dra några slutsatser.

¹Lindgaard G., Fernandes G. J., Dudek C. & Brown J. Behav. Inf. Technol., 25. 115 – 126 (2006)
²Anne Trafton, MIT News Office

8 säkra sätt att förebygga flickering

1Lägg koden på rätt ställe

Det allra viktigaste när du A/B-testar är att placera koden på rätt plats, alltså där det står att den ska vara. Oftast är detta högst upp i head-elementet. Kolla dokumentationen för det verktyg du använder för mer information. Vi har även skrivit instruktioner baserade på de senaste rekommendationerna kring hur du bör implementera Google Optimize. Du får access till full dokumentation här:

2Gör koden för ditt A/B-testningsverktyg mindre

Många verktyg laddar alla pausade utkast och experiment automatiskt. Detta för att minska antalet förfrågningar mot servern. I ditt verktyg finns det säkert inställningar för att stänga av detta. Du kan också gå in och arkivera alla dina tidigare experiment för att minska storleken på din kod.

Det är också många verktyg som använder jQuery för att manipulera DOM:en. Om din webbsida redan använder jQuery, flytta den taggen så att det laddas in innan testverktygets kod laddar och exkludera sedan jQuery från verktyget. Läs mer om detta i den här jQuery bilagan.

(Inget i denna punkt gäller om du använder Google Optimize, som hanterar inladdningen på ett annat sätt.)

Skicka artikeln till rätt kollega

3Gör dina bilder mindre

Komprimera bilderna innan du laddar upp dem (till ett CDN eller ditt A/B-testningsverktyg) med verktyg som ImageOptim. ImageOptim är ett gratisverktyg som komprimerar bilder utan att påverka kvalitén.

Minska även antalet bilder som laddas. Hemsidan kanske inte behöver en karusell med nio olika bilder, en annan karusell för rekommenderade produkter och ännu en för utvalda produkter samt massor av annan grafik/bling.

Implementera “lat laddning” när det kommer till bilder. Alltså att endast de bilder som syns på skärmen laddas in. Bilder som ännu inte syns börjar laddas in när användaren scrollar. Detta är nyttigt att göra när det kommer till bildkaruseller och väldigt långa sidor. Det finns flera plugins/verktyg som hjälper dig med detta.

Om du har en responsiv webbsida, utgå ifrån de senaste rekommendationerna för att anpassa bilder efter olika typer av enheter (dator, surfplatta, mobil etc) Spana in responsiveimages.org och css-tricks.com för ytterligare exempel.

Mobil full storlek, 640 x 270, okomprimerad, 201 KB

Mobil optimerad, 320 x 135, komprimerad, 45 KB, 78% mindre storlek

Dator full storlek, 1968 × 706, okomprimerad, 1,3 MB

Dator optimerad, 984 × 353, komprimerad, 246 KB, 81% mindre storlek

4Länka din experimentkod (jQuery)

För varje selector $(‘.class’) behöver webbläsaren gå igenom hela webbsidan.

Så, istället för att skriva ändringar i din kod såhär:

$('div').css('color', 'red');
$('div').css('font-size', '2em');
$('div').text('Hello World!');

Skriv såhär:

$('div').css({'color', 'red', 'font-size', '2em'}).text('Hello World!');

5Använd CSS istället för JS/jQuery

Oftast går det mycket fortare för webbläsaren att applicera CSS jämfört med JavaScript/jQuery, så försök använda CSS istället när du skapar experiment.

Men, gör inte detta i Google Optimize. Läs mer om varför i ett separat blogginlägg som vi kommer att publicera senare.

6Spara selectors i cache

Att cacha selectors betyder att du sparar ett element som en variabel för att senare återanvända det elementet utan att din jQuery behöver leta i DOM:en varenda gång du vill ändra koden i det elementet. Alltså, planerar du att använda ett visst jQuery element flera gånger, cacha det!

var container = $('.container');
container.css('color', 'red');

Är samma som:

$('.container').css('color', 'red');

jQuery selectors letar i hela DOM:en om du inte medvetet ändrar detta. Du kan förebygga detta genom att ge kontext till jQuery selectorn, vilket gör att jQuery endast söker igenom de relevanta delarna av DOM:en. Läs mer om hur du optimerar jQuery selectors för bättre prestation i detta fantastiska blogginlägg.

var $container = $("#container");
var $child = $(".child", $container);

När $child blir kallad söker den endast i kontexten för #container och inte i hela DOM:en.

7Organisera din kod efter hur sidan laddas

Eftersom många verktyg, t.ex. Optimizely, kör kod från toppen till botten av sidan bör du arrangera din kod så att den matchar din sajt.

Denna bild visar hur Optimizely Classic går igenom varje kodrad. (Källa: Optimizely)

I fallet ovan så kommer experimentkoden att stanna och vänta tills det element som koden försöker ändra på dyker upp. Ifall din första rad kod försöker ändra på det sista elementet som laddas in så kommer ditt experiment att köras efter att hela sidan laddats in. Anpassa istället koden efter den ordning som elementen laddas in på sidan.

8Använd page/element hiding kod när det behövs

Du kan och vi rekommenderar att du ALLTID skriver en egen version av Google Optimize page-hiding-kod som temporärt gömmer ett <element> under en viss tid. Hur du går tillväga framgår i implementations-dokumentationen vi länkade till ovan.

Det var våra 8 rekommendationer och sätt att förebygga just flickering. Om du har frågor eller behöver hjälp:

1. Skriv jättegärna en kommentar här nedanför (fler kan vara intresserade av samma frågor/svar).
2. Eller, kontakta Andreas Gref, ansvarig för A/B-testning på Conversionista.
   Maila A/B-testhjälten Andreas

Lycka till med dina A/B-tester!

Källa för omslagsbild: Optimizely