Have you ever heard of the flicker effect or “FOOC” (Flash of Original Content)? A phenomenon where the original version of a web page is briefly visible before being replaced by the alternative version.
Understanding the flicker effect when doing an a/b test
The flicker effect can occur because of the way a/b testing tools work on your site. Suppose a test is carried out on an alternative color for a banner, it's possible that the visitor will distinguish the original color for a fraction of a second before it is substituted by the new hue being tested.
This time lapse during which the browser refreshes may seem insignificant, but it may be enough to be noticed by visitors. This subtle appearance and disappearance of changes can lead to more or less conscious discomfort or questioning on the part of users, and potentially distort test results.
Why is it a problem
For your website
As a result, testing can slow down your page loading times, increase your bounce rate, and even reduce your conversions, all of which can have a negative impact on your website's ranking.
For the user experience
This effect can annoy or confuse visitors, leading them to question the fact that a test is in progress. This can distort test results by altering users' natural behavior. In fact, 80% of them leave the site after just one page.
The impact of the flicker effect goes beyond simple disruption. It compromises the reliability of a/b test results, reduces the accuracy of the data collected and negatively influences the user experience, which can have a lasting effect on the perception of your brand.
What is at the origin of this phenomenon?
In A/B testing, test modifications are applied via an embedded script on each page where the test is active. This script, usually written in JavaScript, is loaded by the browser and allows specific actions to be executed when the page loads or when a user interacts with the site. However, if the loading of these scripts is delayed or if they are not correctly placed, this can lead to the appearance of the flicker effect.
Good mitigation practices
First of all, it's essential to identify and correct various problems such as asynchronous loading of resources, use of custom fonts, loading of scripts (advertising, social networks, image carousels, etc.), as well as other factors that can impact site performance.
This approach will enable you to significantly reduce the appearance of the flicker effect, thus ensuring an optimal user experience. Optimizing the loading of scripts, by prioritizing their execution or deferring them as required, helps to ensure a smooth, uninterrupted user experience.
Act now to reduce the “flickering” effect in your tests
Install correctly your a/b testing tool
To ensure a smooth transition during your a/b tests, place the snippet from your test tool at the very top of your page, ideally in the
tag. This helps your page load the right version from the start.Hide changes until they're ready
If your a/b testing tool allows it, configure it to hide the sections under test until changes are ready to be displayed. This prevents your visitors from seeing the changes taking place in real time, creating a more professional and less disruptive experience.
Use simple techniques to make modifications
For A/B tests involving visual modifications, use CSS rather than complex scripts. This can help reduce the flickering effect and make tests more discreet.
Consider server-side a/b testing
For a more robust solution, consider using server-side a/b testing tools. These tools apply changes before the page is sent to the browser, thus eliminating the flickering effect.
Reduce flickering with Webyn
At Webyn, we're well aware of the challenges posed by flickering in A/B and multivariate testing. The negative impact can be significant on user experience and test results. That's why our solution has developed native plugins on the main CMS, specifically designed to minimize this phenomenon. By choosing Webyn for your e-commerce strategy, you not only benefit from a significant increase in your conversion rates, but also ensure a user experience free from the undesirable effect of flickering.