⚠️ Warning: Improper use of Anti-Flicker can lead to issues that may negatively impact conversions and user experience, especially for non-technical users. Always test thoroughly.
It’s a good idea to investigate other potential causes and solutions first, especially since anti-flicker scripts can introduce performance delays or affect SEO.
When might I benefit from Anti-Flicker?
What should I be Cautious of before enabling Anti-Flicker?
🔍 What Is Anti-Flicker in A/B Testing?
Anti-flicker is a snippet or setting used to prevent users from seeing the original version of a page before the variant loads. This flicker (also called "Flash of Original Content" or FOOC) happens when:
-
The original version of the webpage briefly displays,
-
Then it’s swapped out by the A/B testing script with the test variant.
This visual flash can:
-
Skew test results (users may react differently if they see the original first),
-
Look unprofessional or glitchy to users,
-
Cause layout shift, impacting UX and Core Web Vitals.
when you can benefit from Anti-Flicker
⚠️ Please make sure to read 'What to be cautious of' before enabling anti-flicker and feel free to reach out to our support team with any questions!
You could enable Anti-Flicker when:
-
You're running A/B or multivariate tests that visually modifies content on above-the-fold elements.
-
You're testing UI or layout changes and want clean, unbiased test results.
How to know if you need it:
-
Do users briefly see the default content before your test version loads and is this impacting experience? Is the flicker visually jarring?
Before enabling anti-flicker, it’s worth checking if the flickering is caused by something else which can be fixed without the performance trade-offs of anti-flicker.
⚠️ What to Be Cautious Of
Anti-Flicker is not recommended as a permanent configuration for your site. Using it unnecessarily on all pages or tests can affect page load performance and SEO (Core Web Vitals), so it should be used only when needed.
-
Performance impact: Anti-flicker hides content until the variant is ready, which might delay initial render.
-
Google PageSpeed scores may be affected since content is visually delayed (can hurt SEO if not configured properly).
-
Poorly configured anti-flicker can result in a blank screen or flashing elements if scripts fail or are slow.
🛠️ How TO Enable anti-flicker
- Log into your Visually account.
- Go to your account settings.
- Look for an option labeled "Anti-flicker" and click to enable
- Choose the appropriate settings for your store and click save
What to Check After Enabling Anti-Flicker:
- Test on Different Devices: Make sure it works across desktop and mobile.
- Check Performance: Use tools like Google Lighthouse to check how Anti-flicker impacts page load times.
- Look for Flicker Issues: Ensure that no visual flickering or content shifts are noticeable to the user.
Unsure whether Anti-Flicker is the right move for you? Reach out to our support team and we'll be happy to help!