It has been a known problem for as long as front-end A/B testing solutions have been around. In this article, we take a look at why you should care and if it’s somehow possible to solve it.
In the example above, you can see the FOOC effect of a very simple A/B test that is changing the hero copy of the services page.
Why FOOC is a problem?
First of all, it is annoying for the visitors. No one likes when the look of the website is flickering too much while the page loads.
Second, and the most important reason is that it could easily skew the results of your A/B tests (and not in your favor).
Imagine this: You run a nice experiment on the checkout page of your website. Users actually like the change itself and would be willing to buy more but as there’s some flicker going on, they are not sure if that page is secure – flicker is often thought to be related to some suspicious activities such as stealing users credit card information.
And just like this, your test may loose just because of the flicker, even though the change itself would’ve worked!
By default, all of the most popular A/B testing tools have some sort of FOOC when they apply the changes on your website. Fortunately, there are some workarounds that could make the effect less noticeable. Let’s take a closer look at some of them!
How to get rid of FOOC?
If your A/B testing runs entirely on the client-side of the web, there will always we some downsides performance-wise. It could be the FOOC effect, slower load times, or both. Luckily, there are still some ways you can reduce the possible negative causes of A/B testing.
Install you A/B testing tool as recommended
Take a look at the guide for installing the A/B testing tool you are using. The most common recommendations are:
- Have the snippet as high in the
<head>tag as possible
- Put it straight in the code, don’t use tag managers
- When using a tag manager, switch it from async to sync mode
Hide content before the changes have been applied
Many A/B testing tools have this feature built in. Some of them hide the entire page, some of them only the content. Contact your tool provider details.
When trying to achieve something similar on your own, here’s what to keep in mind:
- Hide the element as soon as possible (before the variation code runs)
- Have a fallback of ~2 seconds to show the content if something goes wrong
- Show the content immediately when the changes are done
Follow the general front-end development best practices
Some of the practices to get you started:
- When possible, use CSS over jQuery
- Cache your DOM elements in JS variables
- Prefer vanilla JS whenever possible
- Write your code in the order of DOM
Consider back-end A/B testing solutions
If you want to take the absolute maximum from your testing program, take a look at some of the server-side A/B testing tools.
These days, most of the popular A/B testing tools that are best known for their JS based solutions also offer a server-side version.
There’s also a popular open-source A/B testing tool called Wasabi, although setting it up requires a rather experienced developer.