See also: https://blog.johnkarahalis.com/using-the-optimizely-api-to-avoid-flashes-of-unstyled-content-in-a-b-tests

avoiding-fouc-with-optimizely.html

{# Randomly determine if the new heading should be shown #}
{% set show_new_heading = random_boolean() %}

{% if show_new_heading %}
    <h1>The Best Documentation Around</h1>
{% endif %}

<script>
    window['optimizely'] = window['optimizely'] || [];

    {% if show_new_heading %}
        // Bucket visitor into the "New Heading" Optimizely variation for reporting
        //
        // NOTE: The bucketVisitor API was changed after this Gist was
        // published. Please see this blog post for more information:
        //
        // https://blog.johnkarahalis.com/using-the-optimizely-api-to-avoid-flashes-of-unstyled-content-in-a-b-tests
        window['optimizely'].push(['bucketVisitor', 555555, 123456]);
    {% else %}
        // Bucket visitor into the baseline Optimizely variation for reporting
        //
        // NOTE: The bucketVisitor API was changed after this Gist was
        // published. Please see this blog post for more information:
        //
        // https://blog.johnkarahalis.com/using-the-optimizely-api-to-avoid-flashes-of-unstyled-content-in-a-b-tests
        window['optimizely'].push(['bucketVisitor', 555555, 654321]);
    {% endif %}
</script>