Rich-text Reply

Page flashing

HB 02-03-15

Page flashing

Hi Optimizers! Heart

 

I'm running an experiment where I change the hero image above the fold on the startpage of a site, but I noticed there's pageflashing! I found this on the subject: https://growthhackers.com/questions/ask-gh-how-do-you-deal-with-flickering-when-ab-testing/ where Peep Laja suggests to prevent page flashing by hiding the body of the page until all of the changes have been made.

 

Like this:

 

$(“body”).css({“visibility”:”hidden”});
//VARIATION_CODE_TO_SWAP_IMAGES_HERE
$(“body”).css({“visibility”:”visible”});

 

So my variation code loooks like this:

 

$("body").css({"visibility":"hidden"});
$(".owl-item:eq(1) .gallery-link > img:eq(0), .owl-item:eq(5) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});
$(".owl-item:eq(2) .gallery-link > img:eq(0), .owl-item:eq(6) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/8acb738b9570444d8ba3fb06dfdb5c19.jpg"});
$("body").css({"visibility":"visible"});

 

I'm running 5 separate Simple match experiments on .com/se .com/dk .com/de .com/uk .com/nl while also running a Substring match experiment on all countries at the same time. And I even paused the "all countries experiment in case they are intervening with the 5 other simple match experiments.

 

But the pageflashing is still there.

 

Another guy in the GH forum says one should do like this?

 

/*_optimizely_evaluate=force*/
$(“body”).css({“visibility”:”hidden”});
$(‘document’).ready(function(){
//VARIATION_CODE_TO_SWAP_IMAGES_HERE
$(“body”).css({“visibility”:”visible”});
});
/*_optimizely_evaluate=safe*/

 

But I only get errors when trying. Please help.

 

HB
Level 2

HB 02-03-15
 

Re: Page flashing

I got the code (mentioned last) to work but there's still lagg/page flashing. And it's very noticeable, like 0.5-1 second. I'm considering to cancel the experiment because of this. What's previous experiences in the community regarding this?

My latest variation code:

/*_optimizely_evaluate=force*/
$("body").css({"visibility":"hidden"});
$('document').ready(function(){
$(".owl-item:eq(1) .gallery-link > img:eq(0), .owl-item:eq(5) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});
$(".owl-item:eq(2) .gallery-link > img:eq(0), .owl-item:eq(6) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/8acb738b9570444d8ba3fb06dfdb5c19.jpg"});
$("body").css({"visibility":"visible"});
});
/*_optimizely_evaluate=safe*/

All the best,
Henrik
HB
Level 2
greg 02-04-15
 

Re: Page flashing

[ Edited ]

Hey Henrik,

 

There are two things I can think of:

 

  1. Instead of this:

    $("body").css({"visibility":"hidden"});

    Try this:

    $("head").append("<style>body{visibility:hidden}</style>");

  2. Compress the image more. It's at 235 KB which is rather large for such a simple image. In Photoshop, changing the JPEG quality from 100 to 70 drops the size by more than half (to 106 KB) without noticeable loss in quality.
Level 2
JDahlinANF 02-05-15
 

Re: Page flashing

I have noticed this as well and wonder if it is related to any recent changes in the Optimizely library that is inadvertantly causing a delay in variation code execution.

 

Not too long ago, we vetted the following approach and found it works 99% of the time with no flicker:

window.$('body').prepend('<style>.cat-hero-wrapper {display:none !important;}</style>');

 However, we now see the flicker 100% of the time.

 

Since this is a jQuery only solution, we ought not need to wrap it inside of /* _optimizely_evaluate=force */ like this:

/* _optimizely_evaluate=force */
window.$('body').prepend('<style>.cat-hero-wrapper {display:none !important;}</style>');
/* _optimizely_evaluate=safe */

 Also... wrapping it like this actually causes it to stop working (I also tried prepending to 'head' which also fails)

JDahlinANF 02-17-15
 

Re: Page flashing

Thanks to @Junan the problem I referenced above is resolved.

 

I've gotten into the habit of prefixing everything with "window." which works great for workign with JavaScript variables that exist in the DOM, but not so good for the execution of timing.

 

By using window., Optimizely treats the statement as JavaScript rather than pure jQuery, so it has to wait before it can run.  Hence, the page flicker.

 

Using "force" on JavaScript made it fail because "window" is not yet defined when Optimizely exeecutes pure jQuery.

 

The solution is to use:

$('body').prepend('<style>.cat-hero-wrapper {display:none !important;}</style>');