Het flickering-effect is, tijdens een test, het snel zien van de oorspronkelijke pagina voordat de alternatieve pagina erop komt, omdat de browser tijd nodig heeft om de wijzigingen toe te passen. Er is geen wondermiddel om dit probleem te voorkomen, al zijn er wel revoluties aangekondigd als het gaat om het beperken ervan. Echter, er zijn veel goede praktijken om te volgen om het beslissingsproces te versnellen die rekening houden met je wijzigingen en dat effect waarneembaar maken.

Wat is het flickering-effect?

Als je nog nooit van het flickering-effect hebt gehoord, heb je het waarschijnlijk al ervaren zonder dat je ervan af wist: de testpagina wordt geladen en na een paar milliseconden worden de wijzigingen pas zichtbaar. Het resultaat: je ziet wat knipperen, namelijk twee versies van je pagina: de originele en het aangepaste. Het resultaat is dat het een betreurenswaardig effect heeft op de gebruikerservaring, en wellicht hetzelfde op de relevantie van de test. De gebruiker kan namelijk beseffen dat er wordt getest.

Deze consequentie is gerelateerd aan het principe hoe de meeste A/B testoplossingen werken, doordat er een laag van JavaScript over je pagina heen komt om de wijzigingen te laten toepassen. In de meeste gevallen hoef je niet direct het effect te zien, maar als je site lang bezig is met laden of gebruik maakt van zware externe middelen, dan kan het zo zijn dat de uitgevoerde wijzigingen veel tijd in beslag nemen. Het flickering-effect, dat tot heden onopgemerkt was, wordt dan zichtbaar.

Is er een snelle manier om het flickering-effect te verwijderen?

Sommige providers maken aanspraak op technische innovaties, dit om het flickering-effect te elimineren. Let op, dit is niets minder dan een bekende techniek, die beperkingen heeft en die niet implementeerbaar is naar alle oplossingen. Door het analyseren van de documentatie van de belangrijkste spelers op de markt, kan men constateren dat deze methode alleen gebruikt moet worden als laatste redmiddel en als alle alternatieven niet hebben gewerkt, omdat het flickering-effect verschilt voor elke site en veel afhangt van hun oorspronkelijke prestaties.

Dus hoe werkt deze methode? Om te beginnen, de zichtbare content wordt tijdelijk gemaskeerd door CSS-eigenschappen te gebruiken als visibility: hidden of display: none bij het body element. Deze eigenschap heeft het effect dat het zo snel mogelijk de inhoud van de pagina maskeert (zolang de oplossingstag in de <head> van de pagina wordt geplaatst), voordat het weer zichtbaar wordt wanneer de wijzigingen de benodigde tijd gehad hebben om het toe te passen. Dit zorgt ervoor dat het “before/after” effect weggaat en wordt vervangen met het “blank page/after” effect.

Het risico met zo’n werkwijze is dat wanneer de geladen pagina problemen ondervindt of de methode slecht geïmplementeerd is, dat de gebruiker voor enkele seconden een lege pagina ziet of dat de gebruiker vast blijft zitten op de lege pagina en geen actie kan ondernemen. Een ander nadeel is dat het de indruk geeft dat de site erg traag is. Daarom is het belangrijk om ervoor te zorgen dat de weergave niet te lang vertraagd wordt (een paar milliseconden als maximum), maar dat er wel genoeg tijd is om de wijzigingen te laten toepassen. En natuurlijk, voor geldige resultaten, is het goed om deze vertraagde weergave te laten toepassen aan een controlegroep om te voorkomen dat er vertekeningen plaatsvinden in je analysegedrag die gelinkt is aan meerdere weergavesnelheden.

Je zult begrijpen dat wanneer je de wijzigingen langzaam wil gaan toepassen, je niet wil dat er te lang een lege pagina weergegeven wordt. Op het einde moet je altijd een beroep doen op de goede praktijken, die je hieronder gepresenteerd krijgt, met als doel het versnellen van de implementatie van de wijzigingen.

Dat is waarom we, bij AB Tasty, deze methode niet voor de meerderheid van onze gebruikers aanraden. Het is geen standaard methode die we aanbieden. Het blijft eenvoudig uitvoerbaar met behulp van enkele JavaScript-codes.

Hoe kan ik het flickering-effect beperken?

Als je niet van de bovenstaande gepresenteerde methodes gebruik wil maken, welke oplossingen zijn er dan voor je beschikbaar? Hieronder zijn de beste manieren om dit effect te verminderen en vaak beëindigt dit het helemaal:

  1. Optimaliseer je website laadtijd met behulp van alle beschikbare technieken: caching pagina’s, compressie, optimalisatie van de afbeeldingen met behulp van een CDN, parallellisatie van het aanvragen met het protocol HTTP-2.
  2. Plaats de tag van de oplossing van A/B testen zo hoog mogelijk in de broncode, binnen de <head>, voordat de oproep om externe bronnen komt (bijvoorbeeld web vormen, verschillende JavaScript-codes of andere varianten).
  3. Gebruik de synchrone versie van het script van AB Tasty, de asynchrone versie vergroot de kans op flickering.
  4. Gebruik geen tag-beheer voor het benoemen van een tag voor je oplossing (bijvoorbeeld Google Tag Manager). Het is minder handig, maar je kunt eenvoudig de prioriteit van de tag controleren.
  5. Insert niet de jQuery-bibliotheek in de tag van je provider als je de provider er al een gebruikt. De meerderheid van de A/B testen maakt oplossingen op basis van jQuery. AB Tasty staat niettemin toe dat je het beroemde framework van JavaScript niet moet gebruiken als je het al ergens anders gebruikt. Het zal veel van de Ko niet laden.
  6. Verminder de grootte van je geladen script als oplossing voor het verwijderen van je inactieve testen. Sommige oplossingen bevatten al dat script in hun testen, zodat ze kunnen worden gepauzeerd en ontworpen. Bij AB Tasty worden standaard alleen de actieve testen meegenomen, maar als er teveel aanpassingen aan de gang zijn, kan het zinvol zijn voor de productie om alles uit te schakelen afgezien het middel van AB Tasty.
  7. Besteed aandacht aan de aard van de wijzigingen. Het plaatsen van enkele honderden regels code om de wijzigingen op te bouwen zal onvermijdelijk meer een flickering-effect veroorzaken dan een makkelijke wijziging met CSS.
  8. Berust je op het maximum van de opmaakmodellen. Het is vaak mogelijk om hetzelfde visuele resultaat te bereiken met het gebruik van opmaakmodellen. Bijvoorbeeld, zo kan je een JavaScript-instructie die CSS bevat toevoegen aan een element, waarbij de CSS verantwoordelijk is voor het wijzigen van het uiterlijk, in plaats van de meerdere regels script die de stijl van dit element manipuleren.
  9. Optimaliseer de code van je wijzigingen. Manipuleer in de uitvoeringen van de wijzigingen via de WYSIWYG-editor die je kan toevoegen, zonder meer van JavaScript-instructies te weten die niet noodzakelijk zijn. Analyseer snel de gegenereerde code in de ‘Edit Code’ en optimaliseer het door het opnieuw te organiseren en door het verwijderen van overbodige delen.
  10. Zorg ervoor dat de oplossing gebruik maakt van een (of meerdere) CDN om zo snel mogelijk het script te laden met je wijzigingen, ongeacht waar je gebruiker zich bevindt.
  11. Voor gevorderde gebruikers: voeg de jQuery selectors toe aan je cache als objecten. Dit omdat ze dan niet hoeven te worden gereorganiseerd door DOM in meerdere gevallen. Je kan ook wijzigingen maken in JavaScript, zelfs beter dan in jQuery. Helemaal wanneer je te maken hebt met elementen als klasse of ID.
  12. Gebruik redirect tests zover mogelijk, indien het nog relevant is na de wijzigingen in de aard en het tijd van de implementatie van een dergelijke test.

Als je na het implementeren van deze optimalisaties nog steeds een flickering-effect hebt, kan je zelf de bovenstaande techniek gebruiken om de inhoud van de pagina te maskeren, zodat niet alle elementen worden geladen. Als je niet zeker weet hoe je dit moet doen, kan je altijd contact opnemen met ons support-team.