Rich-text Reply

FOUC (Flashing Of Unstyled Content)

seanemmel_ba 12-30-14
Accepted Solution

FOUC (Flashing Of Unstyled Content)

[ Edited ]

Hey everyone. I'm new to Optimizely and the Optiverse but have been a developer for a number of years. I'm finding that on some clients' websites, no matter how much I condense the code, I'm still seeing a flash of unstyled content (FOUC) before the variation's changes take effect. With a particular client, we have no access to their site's code, so I cannot modify any aspect of their site whatsoever outside of Optimizely. Unforutnately, their site is littered with HTML tables and a major lack of identifying DOM selectors (hardly any IDs, classes, etc., and lots and lots of tables nested in tables nested in tables). This means that for even basic CSS changes, I'm having to use jQuery/vanilla JS, as the DOM can change, and I'm often having to climb up the DOM tree to grab specific elements. In any case, I can't seem to solve the FOUC and it is most definitely a pretty big problem. I've wrapped vanilla JS methods within the /* optimizely_evaluate... */ statements, but this doesn't really solve the issue for most cases with this particular client. I can't access their CSS to hide the <body> on their end and then show it via Optimizely JS, and I certainly don't want to use experiment CSS to hide the <body> (as it will affect all pages) if I'm making a couple small changes to one or two pages. I've tried other methods, including things listed here: https://growthhackers.com/questions/ask-gh-how-do-you-deal-with-flickering-when-ab-testing/

I've tried creating a white <div> that sits on top of the <body> and disappears when the variation changes have been made. I've even done this using pure vanilla JS. I've done this in the variation JS because, again, I wouldn't want to build this overlay for every page on the site, but rather just the pages I have variation code running. This has still all been to no avail, as even the vanilla method gives a split-second flash before the overlay kicks in. This is of course due to the fact that one cannot append/prepend something to the document.body via JavaScript before it is loaded. I'm posting here because I'm wondering if anyone has a workable and reliable solution to this problem? How can we prevent FOUC on sites where we cannot directly modify the actual site's code and wherein most CSS changes must be made using JavaScript? 

 

Edit: Code Example

I meant to attach an example of some basic variation code. The DOM for this changes, and as such, the jQuery .parent() method must be used to grab the correct element for CSS manipulation. As you can see, nothing too crazy or intense going on here, and I've cached all elems in variables for efficiency and speed:

http://cl.ly/image/2F001V2V0708

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
JDahlinANF 12-30-14
 

Re: FOUC (Flashing Of Unstyled Content)

"I've tried creating a white div that sits on top of theand disappears when the variation changes have been made. I've even done this using pure vanilla JS."

If you use jQuery instead of JavaScript, it will run sooner on your pages.

e.g., this will load almost immediately after the optimizely snippet - presuming the snippet is near the top of the page, this would be well ahead of any "DOM ready" events.

$('body').prepend('<style>.someclass {display:none !important;}</style>');

 

Hope this helps!

Brian_Abad 01-02-15
 

Re: FOUC (Flashing Of Unstyled Content)

Hey @seanemmel_ba ,

 

Happy New Years to everybody!

 

What you can do is utilize the following code at the top of your variation code:

 

/* _optimizely_evaluate=force */
$('head').append('<style id = "hideBody"> body { display: none } </style>');
/* _optimizely_evaluate=safe */

 

This code will hide the body of your webpage at the earliest possible time of Optimizely's execution path.

 

Then, at the end of your variation code, we can remove this style tag by using the following:

 

$('#hideBody').remove();

 

This will bring your body back from being removed. 

 

I hope this helps!

---
Brian Abad
Manager, Technical Support
Customer Success
Optimizely

Re: FOUC (Flashing Of Unstyled Content)

Thanks Brian. I took your advice and was able to improve the situation somewhat. Is there any advantage to removing the stylesheet vs. simply **bleep** again?

$('body').css('display', 'block');
-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
Brian_Abad 01-07-15
 

Re: FOUC (Flashing Of Unstyled Content)

I'm glad it was helpful! It's just a fail-safe to ensure the webpage is brought back.
---
Brian Abad
Manager, Technical Support
Customer Success
Optimizely