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).
By default, all of the most popular A/B testing tools have some sort of FOOC when they apply the changes on your website, but there are some workarounds that could make the effect less noticeable.
How to reduce FOOC?
Luckily, there are ways you can make the effect of FOOC less noticeable. Here’s an overview of the most popular ones that almost anyone could apply:
- Install you A/B testing tool as recommended
- Hide content before the changes have been applied
- Follow the general front-end development best practices
- Consider back-end A/B testing solutions
Want to know more? Take a look at this article.