FOOC or Flash of Original Content is a situation in Javascript based A/B testing where the experiment is causing an element on the page to flicker when changing from original to the variation.
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
As Javascript based A/B testing is in many ways similar to front-end web development, we recommend knowing the at least the basics before starting your next experiment. If not, ask an expert to help you!
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.
Conclusion
FOOC and other loading-time-related issues will not leave Javascript-based A/B testing anytime soon. There are ways to lower the chance of letting it skew your results but to be 100% sure you should consider moving to one of the server-side A/B testing solutions.
Nevertheless, if you are able to reduce the flicker of your Javascript-based solution using the tips listed above, you shouldn’t be too worried. Just keep in mind that noticable FOOC might lower the performance of your variation and the results might be even better when the change is finally implemented.
34 thoughts on “What Is FOOC and How to Get Rid of It?”