You've set up your A/B test. You refresh the page. For a split second, you see the original headline — then it flashes to your variant. That's flicker, and it's ruining your experiments.
What Is Flicker?
Flicker (also called FOOC — Flash of Original Content) happens when users briefly see the original page before your A/B testing tool applies the variant. It typically lasts 100-500ms, but it's enough to notice — and it contaminates your test results.
Why Flicker Matters
Contaminates Results
Users who see both versions are no longer a clean test group. Their behavior is influenced by seeing the original first.
Hurts User Experience
Content jumping around feels broken. It erodes trust in your site.
Invalidates Tests
If users notice the change, they're no longer experiencing the variant naturally.
Why Flicker Happens
Most A/B testing tools work like this:
Page HTML loads
Browser renders original
Testing script loads
Variant applied
The problem is step 2. By the time the testing script loads (step 3), the user has already seen the original content.
How Tools Try to Fix It
The Hide-Everything Approach
Some tools hide the entire page until the variant is ready:
<!-- Anti-flicker snippet -->
<style>.async-hide { opacity: 0 !important }</style>
<script>
document.documentElement.className += ' async-hide';
setTimeout(function() {
document.documentElement.className =
document.documentElement.className.replace(' async-hide', '');
}, 4000);
</script>The Synchronous Script Approach
Some tools load synchronously in the <head>:
<script src="testing-tool.js"></script>
<!-- No async = blocks rendering -->The Right Way to Prevent Flicker
The best approach combines several techniques:
Minimal, inline snippet
A tiny inline script that immediately hides only the elements being tested.
Fast async loading
The main script loads asynchronously but executes quickly.
Smart timeouts
If the script doesn't load in 50-100ms, show the original. Better than a blank page.
Targeted hiding
Only hide elements being tested, not the whole page.
How ExperimentHQ Handles Flicker
We spent months optimizing our anti-flicker approach. Here's what we do:
Under 5KB total script size
Loads in ~20ms on average connections.
Inline critical code
The assignment logic runs before any network request.
50ms timeout
If anything fails, we show the original. No blank pages.
CSS-based hiding
We use CSS to hide tested elements, not JavaScript opacity hacks.
Flicker Performance Comparison
| Tool | Anti-Flicker Method | Flicker Risk |
|---|---|---|
| ExperimentHQ | Inline + fast async | Very Low |
| VWO | Hide-all snippet | Medium |
| Optimizely | Synchronous script | Medium |
| DIY JavaScript | Usually none | High |
The Bottom Line
Flicker isn't just an annoyance — it invalidates your test results. If users see the original before the variant, they're not experiencing a clean test. The best A/B testing tools solve this with smart engineering, not hacky workarounds.
When evaluating tools, ask: "How do you prevent flicker?" If the answer involves hiding the entire page or blocking rendering, keep looking.