Skip to main content

Remove A/B test anti-flicker snippets when no tests are running

Disable A/B testing anti-flicker snippets when no tests are running, and close completed tests immediately to prevent the performance cost. The anti-flicker snippet is typically synchronous JavaScript that blocks rendering by hiding content until the testing script loads.

Anchor to WhyWhy

The anti-flicker snippet creates an artificial delay in the critical rendering path. By design, it blocks rendering to prevent the original page from appearing before the test variant loads, which means users experience a significant delay in seeing any content. This performance cost is often over 2 seconds on First Contentful Paint (FCP) and directly hurts Largest Contentful Paint (LCP).

FOOC and FOUC: FOOC (Flash of Original Content) is when the original page appears briefly before the A/B test script replaces it with the variant. This differs from FOUC (Flash of Unstyled Content), which is when CSS hasn't loaded yet.

The trade-off: performance cost (2 or more seconds of FCP is common) against test accuracy (anti-flicker prevents FOOC) against the business value of insights.

Anchor to HowHow

Anchor to Disable when not testingDisable when not testing

Use a theme setting to completely remove the code when no active tests are running:

config/settings_schema.json

{
"name": "Third parties",
"settings": [
{
"type": "checkbox",
"id": "enable_vwo",
"label": "Enable VWO Async SmartCode (for A/B testing)",
"default": false
}
]
}
{% if settings.enable_vwo %}
<script>
// VWO Async SmartCode
</script>
{% endif %}

Anchor to Close completed testsClose completed tests

After a test concludes:

  • Close the test in the testing platform.
  • The platform should disable the anti-flicker automatically.
  • Verify that it's disabled.

Anchor to Consider server-side testingConsider server-side testing

Server-side A/B testing has no anti-flicker performance cost. Content arrives pre-rendered with the correct variant.

Anchor to ExamplesExamples

Identifying anti-flicker impact in the Chrome DevTools Network panel:

  1. HTML and CSS download quickly (lines 1 and 2).
  2. Long gap before FCP.
  3. Look for testing tool domains, such as googleoptimize.com or visualwebsiteoptimizer.com.

In this scenario, FCP should occur shortly after CSS loads. A large gap indicates that the anti-flicker snippet is active.

Anchor to TestingTesting

  • Use the Chrome DevTools Performance panel to measure the FCP delay. Record a page load and check the timing.
  • Temporarily disable the snippet in your theme settings to measure the performance improvement.
  • Compare performance with A/B tests enabled against performance with them disabled.
  • Verify the cost to real users by checking your RUM data. See the Lab vs. field data guide for more on RUM.

Anchor to ReferencesReferences

Was this page helpful?