Understanding Anti-Flicker

The anti-flicker option is designed to provide a smoother user experience during A/B tests by preventing visitors from briefly seeing the original page before experiment changes are applied. However, it comes with important tradeoffs depending on how you install Stellar.

What is Flicker?

Flicker (also known as "page flash" or "FOOC" - Flash of Original Content) occurs when a visitor sees the original version of your page for a split second before your experiment variant loads. This happens because:

  • The browser renders the original page HTML immediately
  • The Stellar script needs time to load, check for active experiments, and apply changes
  • During this brief window, visitors see the unmodified page before it transforms into the variant

Example: If you're testing a red button vs. a blue button, visitors might briefly see the original blue button before it changes to red. This flash can be jarring and may impact the integrity of your experiment.

How Anti-Flicker Works

Stellar's anti-flicker option prevents this by temporarily hiding your page's content until all potential experiments are fully mounted and applied. Here's the sequence:

  1. The anti-flicker script runs immediately when the page starts loading
  2. It hides the page content by making it invisible
  3. The Stellar script loads and checks for active experiments
  4. Any experiment changes are applied while the page is hidden
  5. Once everything is ready, the page becomes visible with changes in place
  6. Your visitor never sees the original content flash

Timing: This entire process typically takes 100-300 milliseconds, which is barely noticeable to most visitors but completely eliminates the visible flicker.

Installation Method Matters

The effectiveness of the anti-flicker option heavily depends on where and how you install the Stellar snippet:

Direct Installation (Recommended)

When you add the Stellar snippet directly to your website's <head> tag:

  • ✓ Anti-flicker works perfectly: The script runs immediately as the page loads, before any content is rendered
  • ✓ Minimal delay: There's no intermediate step - the browser executes the anti-flicker code right away
  • ✓ Clean experience: Visitors see either a brief blank screen or the correct variant immediately

Best practice: For optimal anti-flicker performance, always install the snippet directly in your HTML <head> tag, as high up as possible.

Google Tag Manager Installation (Not Recommended for Anti-Flicker)

When you install the snippet through Google Tag Manager (GTM), the anti-flicker option can actually cause more visible flicker instead of preventing it:

The Problem: GTM itself needs to load before it can run the Stellar snippet. By the time GTM triggers the anti-flicker script, the page has often already rendered. The anti-flicker script then hides an already-visible page, creating a noticeable "double-load" or flickering effect.

Here's what happens with GTM and anti-flicker enabled:

  1. The page loads and renders with original content (visible to user)
  2. GTM container loads
  3. GTM triggers the Stellar snippet with anti-flicker
  4. Anti-flicker script hides the already visible page (user sees content disappear)
  5. Experiment changes are applied
  6. Page becomes visible again (user sees content reappear)

This creates a visible "blink" or "reload" effect that's worse than having no anti-flicker at all, as demonstrated in the video feedback we received from users.

Should You Use Anti-Flicker?

The decision depends entirely on your installation method:

Use Anti-Flicker When:

  • ✓ Installing directly in your HTML: This is where it shines and provides the best user experience
  • ✓ Running visual experiments: Any test that changes visible elements benefits from flicker prevention
  • ✓ Testing above-the-fold content: Changes to headers, hero sections, or navigation are especially prone to noticeable flicker
  • ✓ You have fast server response times: The anti-flicker delay is less noticeable when your page loads quickly

Skip Anti-Flicker When:

  • ✗ Using Google Tag Manager: The delayed execution causes worse flickering than leaving it off
  • ✗ Page speed is critical: The anti-flicker script adds a small delay (typically under 300ms) to visible content
  • ✗ Testing below-the-fold elements: Changes that users don't immediately see don't need flicker prevention
  • ✗ Running tracking-only experiments: If you're just tracking events without visual changes, anti-flicker isn't needed

Our Recommendation: If you're using Google Tag Manager, we strongly recommend keeping the anti-flicker option OFF. The tradeoff isn't worth it, and you'll actually provide a better experience without it.

The Tradeoff

Even when installed correctly (directly in HTML), the anti-flicker option represents a tradeoff:

AspectAnti-Flicker ONAnti-Flicker OFF
FlickerNo visible flickerBrief flash of original content possible
Load TimePage hidden for 100-300msImmediate rendering
User ExperienceSlightly delayed but consistentFaster but may see brief change
Experiment IntegrityBetter - users never see originalSlight risk of original exposure

Testing Your Setup

To determine if anti-flicker is working correctly for your installation:

  1. Create a test experiment with an obvious visual change (like changing a button color)
  2. Enable anti-flicker and publish the experiment
  3. Load your page in an incognito window with browser dev tools open
  4. Look for these signs:
    • Good: You briefly see a blank/hidden page, then the variant appears correctly
    • Bad: You see the original content, then it disappears, then the variant appears (indicates GTM or delayed loading)
  5. Check the Network tab to see when stellar.js loads relative to page rendering

Pro tip: Use Chrome DevTools' Network throttling (set to "Fast 3G") to simulate slower connections and see flicker more clearly.

Alternative Solutions

If you need to use GTM but want to minimize flicker, consider these approaches:

1. Hybrid Approach

Install a minimal anti-flicker script directly in your HTML <head>, then load the main Stellar script via GTM:

<!-- Add directly to <head> -->
<script>
  // Minimal inline anti-flicker
  document.documentElement.style.opacity = '0';
  setTimeout(() => {
    document.documentElement.style.opacity = '1';
  }, 3000); // Failsafe timeout
</script>

<!-- Load via GTM -->
<!-- Your full Stellar snippet -->

Note: This approach requires technical implementation and isn't officially supported. Use at your own discretion.

2. Test Non-Critical Elements

Focus your experiments on below-the-fold elements or less prominent areas where brief flicker is less noticeable or impactful.

3. Switch to Direct Installation

The best solution is to install the Stellar snippet directly in your HTML. If you're using GTM primarily for convenience, consider whether the improved performance and anti-flicker capability is worth the small effort of direct installation.

Frequently Asked Questions

Does anti-flicker slow down my website?

When installed directly in HTML, anti-flicker adds approximately 100-300ms of delay before content becomes visible. This is usually imperceptible to users and is a worthwhile tradeoff for preventing visible flicker. The page is still loading during this time - content just isn't visible yet.

Can I use anti-flicker with Google Tag Manager?

Technically yes, but we strongly advise against it. The delayed execution through GTM causes the anti-flicker script to hide already-visible content, creating worse flicker than having it off. Keep anti-flicker OFF if using GTM.

What happens if the Stellar script fails to load?

The anti-flicker script includes a failsafe timeout (typically 3 seconds). If the main Stellar script doesn't load in time, the page will automatically become visible with the original content. This prevents users from seeing a blank page indefinitely.

Should I use anti-flicker for redirect tests?

No. Redirect tests don't modify the current page - they navigate users to a different URL. Anti-flicker is only relevant for experiments that visually modify the current page.

Related Documentation