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 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.
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?