What Is FOOC and How to Get Rid of It?

FOOC

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.

FOOC in A/B Testing
FOOC in A/B Testing

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.

32 thoughts on “What Is FOOC and How to Get Rid of It?

  1. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Optimate Consulting NZ
  2. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | Marketers Valley
  3. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - 125 Steps Biz Formula Success System
  4. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Creative Media Imaging
  5. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | News Logged
  6. Pingback: Cómo evitar que las pruebas A / B ralenticen su sitio – test1 site – authorithy
  7. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Crazy About Startups
  8. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | Next Tier Marketing
  9. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – Web Pro Help 425-761-8263
  10. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | Sally B Johnson Blog
  11. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Craftly Media
  12. Pingback: Important Post - Denise Welliver
  13. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - PocketMac
  14. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – Amrit Sparsha
  15. Pingback: Como Prevenir Teste A/B de Slowing Down Your Site | comoatrairclientes.com
  16. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | onlinemarketingconcerns
  17. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – rankmysite1st.com
  18. Pingback: How to Prevent A/B Testing from Slowing Down Your Site
  19. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – THE MIRROR OF MEDIA
  20. Pingback: How to prevent A / B testing from slowing down your site - My Blog
  21. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | Ads Spider
  22. Pingback: How one can Forestall A/B Testing from Slowing Down Your Website - AskAbout.Online
  23. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – Open Centers
  24. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – BuySeoServices©
  25. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Blog.Seotoolsall.com
  26. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - GM Affiliates
  27. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Instant Bulk Mailer Blog
  28. Pingback: How to Prevent A/B Testing from Slowing Down Your Site | altReboot
  29. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Chimpy
  30. Pingback: How to Prevent A/B Testing from Slowing Down Your Site – Advertising and Marketing Plant
  31. Pingback: How to Prevent A/B Testing from Slowing Down Your Site - Wescon Consulting
  32. Pingback: Simple Way To Measure A/B Test Flicker Impact - Weslly Silva

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for Reflective Data

5,000 sessions / month ×

Please enter your email

Submit

After submitting your email, we will send you the registration form.