Flicker Effect

The flicker effect is the brief flash of the original page content that users see before client-side A/B testing JavaScript applies a variant, causing a visible jump in the page layout.

The flicker effect (also called FOOC — Flash of Original Content) is a visible artifact of client-side A/B testing. When the page loads, the browser renders the original HTML first. Then, milliseconds later, the testing tool's JavaScript fires and modifies the DOM to show the variant. Users see a brief flash of the original layout before the variant snaps into place.

For tests that change large visual elements — hero images, headlines, entire sections — flicker is jarring and can:

  • Signal to users that something unusual is happening on the page
  • Undermine trust in the brand
  • Skew test results if some users abandon due to the layout jump
  • Fail quality checks for high-stakes pages (e.g., checkout, pricing)

Why Flicker Happens

  1. Browser requests HTML from server
  2. Server returns original page
  3. Browser begins rendering
  4. A/B testing script loads and executes
  5. Script modifies DOM → visible jump

The gap between steps 3 and 4 is where flicker occurs. Faster connections and devices narrow this window; slower connections widen it.

Common Mitigations

ApproachHow it worksTrade-off
Anti-flicker snippetHides <body> until JS runs, then revealsCan hurt Core Web Vitals (LCP, FCP)
Async variant applicationApplies changes during blank loading stateRequires careful timing; still visible on slow connections
CSS-only testsStyle changes apply before paintLimited to styling; doesn't help structural changes
Server-side testingVariant rendered before HTML deliveryRequires engineering; no flicker possible
Edge-side testingAssignment at CDN, page delivered pre-modifiedLow latency, no flicker; requires edge infrastructure

The Best Solution: Move to the Server

The only reliable way to eliminate flicker is to move variant assignment and rendering to the server or edge. Client-side tools can reduce flicker but can't eliminate it entirely without impacting perceived performance.

For high-value pages (checkout, pricing, landing pages) where trust is paramount, server-side or edge testing is strongly preferred.