How To Reduce Flickering While A/B Testing
Flickering is when original content appears to a user before an experimental version does during A/B testing. This page ‘flash’ also leads it to be known as Flash Of Original Content (FOOC). The unfortunate phenomenon can influence your users and affect the outcome of the test. Luckily, there are several anti flicker techniques available to minimize the impact of FOOC, and help conduct A/B testing without flickering.
We’re going to focus on how to reduce the impact of flickering while A/B testing.
A/B Testing Without Flickering
Flickering traditionally happens with client-side testing, using tools like Google Optimize, VMO Testing or Optimizely. You can reduce the impact of flicker further by using server-side testing. You can also hide the original content using CSS and anti-flicker snippets when client-side testing.
Hide The Problem
You can omit flickering by suppressing the original content using CSS. Taking advantage of the CSS display:none body element will simply hide the initial page until the modified version has time to load. However, your user may see an empty screen until the new version has time to load. Studies suggest that users make instant first impressions of a website within 1/20 of a second, so every millisecond counts.
Anti-Flicker Snippets
There are anti-flicker snippets with A/B testing tools like Google Optimize, which can minimize the ‘hide times’ using the CSS cloaking feature. These only work on your web page and don’t play nicely with Google Tag Manager or any asynchronous scripts (script that runs once the browser has time available to execute it). Different web testing tools will have different hide times, so you can evaluate testing tools to see which ones might minimize the downtime.
Moderation Is Key
Reducing flicker times over hiding the flicker can help boost the user’s engagement with the test. There are several simple ways to do this, namely:
- Reduce your page loading times – look at your caching times, compression capabilities and optimize your images (alternatively try this tool)
- Simplify your code – deactivate surplus tests, evaluate modifications to see if they can be carried out via CSS modifications instead of multiple lines of code
- Put the A/B testing solution in the <head> part of the source code
- Use as many CDNs as you can to reduce lag times
There are also a couple of other, more detailed methods to reduce the flicker.
Avoid Asynchronous Scripts
Tools like Google Optimize use asynchronous scripts, which is why the tool has to hide the flicker before the new content is rendered. Asynchronous scripts run the original page rendering and then will apply the test updates in the available time slot, so the page (and the user) have to wait until the new material is available. Google Tag Manager also uses asynchronous scripts which may increase flicker times.
Use JQuery To Your Advantage
As many client-side solutions use jQuery, you might not have to insert a jQuery library in the tag. If you’re not sure, there are ways to check if your site provider uses jQuery, reducing the additional transfer size and reducing load times for your page. Attempting modifications in JavaScript over jQuery will also avoid longer times causing DOM flickering.
Test Your Flicker Times
Testing your flicker times will help assess and reduce flickering effects before you send the test. Simo Ahava has some great advice on how to do this, and you’ll basically need to assess the time difference between the time the original page appears and the time the test content appears. Once you have tried resolving some of your lag times using the simpler steps above, you can run some flicker tests to evaluate their success.
The Quicker The Flicker, The Better The Test
While simply hiding the flicker might seem like the best solution, the impact on the user in terms of page accessibility and first impressions might impact the results of your A/B testing. You have to weigh up the benefits of:
- The convenience of using client-side testing over server-side testing
- Whether hiding your flicker completely is worth jeopardizing the user experience
At Upthrust, we believe that optimizing the testing process is the best way to leverage insightful analytics for our clients. Find out more about how we can help you with your Digital analytics. Contact us for more advice on our A/B testing services.