Rich-text Reply

How do you eliminate the Flicker or Flash of Original Content (FOOC)?

Alhan 10-21-15

How do you eliminate the Flicker or Flash of Original Content (FOOC)?

We've all been there. You preview a test variation, and for a split-second, you see the original version of your page flash before your eyes. 

 

It's called FOOC (Flash of Original Content). Some call it FOUC (Flash of Unstyled Content), but I believe it's a misuse of the term. 

 

If you don't think it's affecting your A/B test results, you're being delusional. According to MIT neuroscientists, it only takes 13 milliseconds for humans to identify an image. FOOC is usually slower than that. If you notice it, your visitors notice it. And that means, whether good or bad, it's affecting your test results. 

 

Luckily, there are many ways to avoid FOOC. While most of us know the basics of how to do this (put your snippet where it should go, trim your jQuery, and hide the <body>, etc.) there are also more advanced tricks that may require a developer's help. 

 

For instance: 

  • Using CSS as much as possible rather than jQuery
  • Using raw JavaScript rather than jQuery
  • Caching selectors
  • etc...  

Question to the Optiverse: how do you eliminate FOOC?

 

Thanks! 

Alhan Keser, Optimization Strategist @ WiderFunnel

Product Manager of Liftmap - Plan, track and share your Optimizely experiments with anyone.

Optimizely Platform Certified
Level 2

MartijnSch 10-22-15
 

Re: How do you eliminate the Flicker or Flash of Original Content (FOOC)?

Hi Alhan,

Interesting question, the ideas we had once. But I must admit that we never tested it is to hide the original variant as well so that one will also have a flickering effect so that the issues you'll have between variants are the same. I'm not sure how well it would work or not but would bring the original + variants at least closer together in it's experience.

Re: How do you eliminate the Flicker or Flash of Original Content (FOOC)?

Hi Alhan,

 

Thanks for the post - removing FOOC is something I've been thinking for a while and after sharing that article i finally made the first steps towards that.

 

I've covered almost every recommendation besides hiding the body practice, so I have a question.

I tested

 

placing this in the experiment JS:

/* _optimizely_evaluate=force */
$('head').append('<style type='text/css'>body{visibility:hidden;}</style>');
/* _optimizely_evaluate=safe */

 

...and placing this in the variation code:

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 3000);

// code goes here

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 500);

...but then I realized that the original variation A would always have the body hidden as there's no functino there which sets removing that attribution.

 

My question is shouldn't all of this be placed altogether in the variation code - I tried that and works perfectly fine for me.

 

best,

Ivo

Performance Marketing Manager @ Blacklane
Founder @ Stereofox

Alhan 10-28-15
 

Re: How do you eliminate the Flicker or Flash of Original Content (FOOC)?

Hi Ivo, 

 

You could certainly put everything in your variation code, but it's a lot easier to manage via the Experiment JS when you have a lot of variations. Also, it runs before your variation code does. Earlier the better, but yes, not a problem if your snippet is well placed. As long as the body gets hidden in time, then all good. 

 

As for the Control or Original variation showing the body again: yes you need to tell Optimizely to show the body again in that variation or else you'll end up with an empty page. 

 

Here's a demo I set up to demonstrate on this page http://www.widerfunnel.com/case_study-categories/e-commerce/ 

 

Experiment 1 has this in the Variation Code (note the big image to emphasize the flicker): 

 

$('.page-banner').css({"background-image":"url(http://www.widerfunnel.com/wp-content/uploads/2007/06/webinar-bg-updated.png)"});
$(".hide-on-large").css({"display":"none"});
$(".entry-content").css({"display":"none"});
$("h1.entry-title").html("E-commerce Case Studies");

Preview: http://www.widerfunnel.com/case_study-categories/e-commerce/?optimizely_x3699031996=1 (Note the intended flicker)

 

 

Experiment 2 has this in the Variation Code (note the really long time outs, just to emphasize the difference): 

 

$('head').append('<style type="text/css">body{visibility:hidden;}</style>');

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 2000);

$('.page-banner').css({"background-image":"url(http://www.widerfunnel.com/wp-content/uploads/2007/06/webinar-bg-updated.png)"});
$(".hide-on-large").css({"display":"none"});
$(".entry-content").css({"display":"none"});
$("h1.entry-title").html("E-commerce Case Studies");

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 1000);

Preview: http://www.widerfunnel.com/case_study-categories/e-commerce/?optimizely_x3695092739=1 (Note there is no flicker, but of course I set a long timeout before displaying the body, so a slower load time overall.)

 

 

 

Experiment 3 has this in the Experiment JS: 

 

/* _optimizely_evaluate=force */
$('head').append('<style type="text/css">body{visibility:hidden;}</style>');
/* _optimizely_evaluate=safe */

 

And this in the Variation code : 

 

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 2000);

$('.page-banner').css({"background-image":"url(http://www.widerfunnel.com/wp-content/uploads/2007/06/webinar-bg-updated.png)"});
$(".hide-on-large").css({"display":"none"});
$(".entry-content").css({"display":"none"});
$("h1.entry-title").html("E-commerce Case Studies");

setTimeout(function(){ document.getElementsByTagName('body')[0].setAttribute('style','visibility:visible'); }, 1000);

Preview: http://www.widerfunnel.com/case_study-categories/e-commerce/?optimizely_x3716655185=1 (Same as above)

 

 

 

Conclusion: Feel free to hide the body via the Variation code rather than in the Experiment JS, however, test to make sure that the body is getting hidden immediately. If not, try in Experiment JS to see if that works better, but be sure to then re-show the body in the Control/Original. 

Alhan Keser, Optimization Strategist @ WiderFunnel

Product Manager of Liftmap - Plan, track and share your Optimizely experiments with anyone.

Optimizely Platform Certified
Level 2