Rich-text Reply

Why is "Experiment CSS" being added in the <body> and not in the <head>

spirosdimopulos 02-09-17

Why is "Experiment CSS" being added in the <body> and not in the <head>

In an experiment with

  • immediate activation
  • no other running experiments
  • empty Experiment JS
  • empty variation code

the "Experiment CSS" is being added in the <body> tag. Not right after openning <body>. Somewhere in the middle. This leads into FLOC (Flash of Original Content) of elements rendered before the <style> of Optimizely and changed by the "Experiment CSS". That could easily be avoided just by adding the "Experiment CSS" in the <head>.

 

So the question is why is this happening? Why is not the "Experiment CSS" being added in the <head>? How is the DOM position that the <style> will be added being chosen?

 

Thanks!

Dyel 02-13-17
 

Re: Why is "Experiment CSS" being added in the <body> and not in the <head>

Hi,

Thanks for reaching out to the Optimizely community. In the case your experiment css is set to synchronous timing and you have placed your optimizely snippet high enough in the <head> your experiment css should also be injected in the <head>.

Could it be that you are not loading the Optimizely snippet in the <head> or that you are injecting it via google tag manager?

I hope this helps.

Kind regards,
Dyel
Optimizely

Re: Why is "Experiment CSS" being added in the <body> and not in the <head>

Thanks for the answer.

 

The optimizely snippet is not loaded through GTM. It is placed in the head and loaded synchronously. Actually it is placed close to the head closing tag. Should it be placed higher? Does this make any difference? 

 

I also do not understand what do you mean by "experiment css is set to synchronous timing". Can I adjust the way the experiment css is set? From where?

 

Thanks!

Re: Why is "Experiment CSS" being added in the <body> and not in the <head>

Hallo! Any update on this? We are working with Optimizely a lot and we still have the same issue. That the experiment CSS is added in the body instead of the head. We currently use a workaround to add styles in the head through js. But it should not be that complicated.