Rich-text Reply
Highlighted

Flashing

Missases 04-20-17

Flashing

Hi all, new here. Question regarding flashing, on a site which the snippet is not implemented correctly within the header thus it displays the original version for a second and immediately afterwards loads the variation. If the traffic is moved 100% to the new variation, would the site continue loading the original version "flashing"?Or this should not happen again once the user falls repeatedly on the new variation even if the snippet location is not fixed? Thanks in advance

Level 1

JasonDahlin 04-21-17
 

Re: Flashing

The flashing will still happen because the page is still loading before Optimizely has a chance to redirect.
--Jason Dahlin
Analytics and Testing Guru Smiley Happy
pbs 04-21-17
 

Re: Flashing

Hi @Missases,

 

@JasonDahlin is correct.

 

 

 
Setting the traffic allocation to 100% will not lead to any significant improvement in the flashing issue.
 
Flashing occurs because elements are rendered on the page before the variation code can be executed. The most common reason for this (and as you mention) is the incorrect implementation of the snippet. See this article on troubleshooting flashing issues. 
 
Elements in <head> load as the page renders. This means that placing the Optimizely snippet lower in the head tag will cause Optimizely to run later in the process - regardless of the traffic allocation. This is why it is important to place the snippet as high as possible in the head tag - see this article
If this answer solved your issue, please accept as a solution.
pbs
Optimizely
robertchan 04-26-17
 

Re: Flashing

Agree with everyone else's comments. I would add that if you are seeing the flashing as a result of CSS changes, you likely want to use the following evaluation to modify CSS on a particular variant:

 

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

After you've written up the actual actions, then use something like the following to display what was hidden:

 

setTimeout(()=>{$('.products.products-grid').attr('style','visibility:visible');},1000);
Robert Chan