/Docs

Anti-Flicker

Flicker (also called FOOC — flash of original content) is when a visitor briefly sees the original, un-modified version of a page for a split second before the experiment variation is applied. A vs B includes a built-in mechanism to prevent this.

What is flicker?

Here is the sequence of events that causes flicker, without anti-flicker protection:

  1. Visitor requests your page.
  2. Browser renders the HTML and CSS — the visitor sees the original page.
  3. The A vs B snippet finishes downloading.
  4. The snippet injects the variant's CSS or JS changes.
  5. The page visually updates to show the variation.

Steps 2 and 4 create a visible flash: the visitor sees the original page, then sees it change. This is jarring and also contaminates your experiment data, since visitors in the variant group saw the control briefly.

How A vs B prevents flicker

When the A vs B snippet loads, it immediately sets the page to invisible by applying opacity: 0 to the <html> element. The page is hidden while the snippet:

  1. Fetches the experiment configuration from the CDN.
  2. Evaluates which experiments the visitor qualifies for.
  3. Assigns the visitor to a variation.
  4. Injects the variation's CSS and JavaScript.

Once all of that is done, the snippet removes the opacity: 0 style and the page becomes visible. By the time the visitor actually sees the page, the correct variation is already applied. There is no flash.

The 3-second safety timeout

If something goes wrong — the CDN is slow, there is a network error, the snippet throws an exception — the page would stay invisible forever without a safety timeout. This would be catastrophic for your visitors.

A vs B includes a 3-second safety timeout. If the snippet has not finished initializing within 3 seconds, it forces the page to become visible regardless. This means in the worst case your visitors might briefly see the original page before a variation is applied, but they will never be stuck on an invisible page.

Info
The 3-second timeout is a safety net, not a performance budget. In normal conditions, the snippet completes initialization in well under 100 milliseconds because the experiment configuration is served from a globally distributed CDN.

When anti-flicker matters

Anti-flicker matters most when your experiment changes something that is visible above the fold — the part of the page the visitor sees immediately without scrolling. Examples:

  • Hero section headline or image
  • Navigation bar elements
  • Call-to-action buttons near the top of the page
  • Page background color

Anti-flicker is less critical for changes that are below the fold, because the snippet will almost certainly have finished by the time the visitor scrolls to those elements.

When it does not matter

Anti-flicker does not matter at all for experiments that change behaviour rather than appearance — for example, experiments that redirect visitors to a different page, or experiments that change what happens when a user submits a form.

Enabling or disabling anti-flicker

Anti-flicker is enabled by default for every new project. You can toggle it off in Project Settings > Configuration > Advanced settings.

When disabled, the snippet skips page hiding entirely. Experiments still run and variations are still applied, but visitors may see a brief flash of the original content before the variation appears. This is useful if all your experiments are behavioural (no visual changes), below the fold, or server-side only.

Info
Disabling anti-flicker does not affect experiment evaluation or tracking — it only controls whether the page is hidden while the snippet initializes.

How to test anti-flicker

To confirm anti-flicker is working, open your browser's DevTools, go to the Network tab, and set network throttling to Slow 3G. Then reload your page. You should see the page stay blank (white or your background color) for a moment while the snippet loads, then appear fully formed with the correct variation applied — never a flash of the original.

What A vs B injects internally
css
1/* Applied immediately when snippet starts loading */
2html { opacity: 0 !important; }
3

4/* Removed after experiments are evaluated and variations applied */
5/* (or after the 3-second safety timeout) */
Keep the snippet early in the head
The earlier the snippet loads, the less time the page is invisible and the less likely any flicker can occur. Always place the snippet tag as the first or one of the first elements inside your <head> tag. See Quick Install for placement guidance.