Flicker

Flicker — also called "flash of original content" or FOOC — is when a visitor briefly sees the original, unmodified version of your page before the experiment variation loads and applies its changes. It looks like a momentary flash of the wrong content, which can be jarring for visitors and can invalidate your experiment results if everyone notices the change happening.

Why flicker happens

Flicker occurs because of a timing gap between when the browser first renders the page and when the A vs B snippet has finished loading the experiment configuration and applying the variation. If the snippet loads slowly — due to network latency, a large datafile, or the snippet being placed too late in the HTML — the browser may paint the original page content before the variation code runs.

Built-in anti-flicker mechanism

A vs B has anti-flicker protection built into the snippet. When the snippet begins to load, it immediately injects a small inline CSS rule that hides the page body:

1body { opacity: 0 !important; }

The page stays hidden while the snippet fetches the datafile, evaluates targeting rules, buckets the visitor, and injects the variation code. Once this is complete, the snippet removes the CSS and the page becomes visible — already showing the correct variation with no flash.

If the snippet fails to complete initialization within the safety timeout (3 seconds by default), the CSS is removed anyway so visitors are not left looking at a blank page indefinitely.

Causes and fixes

Anti-flicker protection is disabled

If you are seeing flicker, the first thing to check is whether anti-flicker protection is turned on. Go to Project Settings > Configuration > Advanced settings and make sure the Anti-flicker protection toggle is enabled. When disabled, the snippet does not hide the page during initialization, which means flicker is expected.

Snippet placed in the body, not the head

This is the most common cause. If the snippet is in the <body>, the browser renders the page content before executing the snippet, which means the anti-flicker CSS is injected too late.

Fix: Move the snippet tag to the <head> element, as early as possible — ideally right after the opening <head> tag.

Correct snippet placement

1<head>
2  <!-- Snippet should be HERE, before other scripts -->
3  <script
4    id="avsb"
5    src="https://cdn.avsb.cloud/snippet.js?id=YOUR_KEY"
6  ></script>
7  <title>My Website</title>
8  <!-- other head content -->
9</head>

Slow network or large datafile

On slow connections, the snippet or its datafile may take several seconds to load. The anti-flicker CSS keeps the page hidden during this time, but there is still a delay before visitors see anything. This is preferable to flicker, but can feel slow.

Fix: Reduce the number of running experiments (each adds to the datafile size), and ensure the snippet loads from the CDN without being intercepted by a service worker or proxy that introduces latency.

Safety timeout causing late reveal

If your page takes longer than 3 seconds to reach the point where the snippet can finish initialization, the safety timeout may release the anti-flicker CSS before the variation is applied, causing a brief flash.

Fix: Ensure the snippet is not blocked by other render-blocking scripts that run before it. Check the Network tab in DevTools for requests that delay the snippet. You can also use avsb.waitUntil() inside your variation code if it depends on elements that load asynchronously — this prevents the variation code from failing silently when the element is not ready.

The anti-flicker mechanism only applies on the initial page load, not on subsequent navigations in a single-page application. When a visitor navigates to a new route in an SPA, the experiment re-evaluates and applies the variation code — but without hiding the page first.

Fix:For above-the-fold variation changes on SPA routes, structure your variation code to apply changes before the new route's components finish rendering, if possible. Alternatively, accept that some SPA navigation flicker is expected and ensure the variation change is not jarring — subtle changes (color, text) flicker less noticeably than large layout changes.

To see whether anti-flicker is working correctly, use Chrome DevTools Network throttling. Set the network to "Slow 3G" and reload your page. The page should remain invisible (white or blank) while the snippet loads, then reveal the correct variation without flicker. If you see the original content momentarily, the snippet is loading too late.

The safety timeout ensures that if the A vs B snippet fails to load (for example, due to a CDN outage or a network error), your visitors are not left staring at a blank page. After 3 seconds, the anti-flicker CSS is removed regardless of whether the snippet has finished, and your original page is shown. This means a snippet failure degrades gracefully — visitors see your unmodified site, not a broken page.