How to Run A/B Tests Without Flicker
A technical deep-dive into eliminating flicker in client-side A/B testing. Includes benchmarks and implementation details.
Definition: Flicker
Flicker (also called "flash of original content" or FOOC) occurs when users briefly see the original page content before the A/B testing variant is applied. This creates a jarring visual experience and can bias experiment results.
Why Flicker Happens
In practice, flicker occurs due to the timing of when different parts of a page load:
- 1Browser starts rendering the HTML (original content appears)
- 2A/B testing script loads (often async, after page render)
- 3Script determines which variant to show
- 4DOM changes are applied (variant content replaces original)
The gap between steps 1 and 4 is where flicker occurs. The larger the script and the more processing required, the worse the flicker.
Problems Flicker Causes
- Hurts user experience: Jarring visual changes erode trust and professionalism.
- Biases experiment results: Users who see the flicker may behave differently.
- Signals poor performance: Search engines and users penalize slow, glitchy experiences.
- Increases bounce rate: Users may leave before the variant even loads.
How to Prevent Flicker
1. Load the script synchronously in <head>
The A/B testing script must execute before the page renders. Place it as early as possible in the <head> tag.
<head>
<!-- Load A/B testing script FIRST -->
<script src="https://cdn.experimenthq.io/snippet.min.js"></script>
<!-- Other scripts after -->
</head>2. Use a lightweight script
Smaller scripts load faster. ExperimentHQ's snippet is under 5KB — compared to 80-100KB for competitors.
3. Hide page until variants are applied
An anti-flicker snippet hides the page briefly (typically 50-100ms) while variants are applied.
<style>
.experimenthq-loading { opacity: 0 !important; }
</style>
<script>
document.documentElement.classList.add('experimenthq-loading');
</script>4. Use a tool that handles this automatically
ExperimentHQ handles anti-flicker automatically. No configuration required.
Script Size Benchmarks
| Tool | Script Size | Flicker Risk |
|---|---|---|
| ExperimentHQ | <5 KB | Low |
| Google Optimize (was) | ~50 KB | Medium |
| Optimizely | ~80 KB | High |
| VWO | ~100 KB | High |
How ExperimentHQ Avoids Flicker
Under 5KB, loads in milliseconds
Variants applied before render
Minimal processing overhead
Self-contained, no external calls
In practice, most teams report zero visible flicker with ExperimentHQ — without additional configuration.
Key Takeaway
"Flicker is a solved problem — but most A/B testing tools don't solve it by default. Choose a tool with a lightweight script that handles anti-flicker automatically. Your users and your experiment results will thank you."