Anti-Flicker
A common concern with A/B testing is the "flicker effect" — when a visitor briefly sees the original page before the test variation loads, causing a visible flash or jump. This page explains how Elevate prevents flicker and ensures a seamless experience for your visitors.
What Is Flicker?
Flicker happens when the original page content renders before the testing script has a chance to apply the variation. The visitor sees the original for a split second, then it switches to the test version. This is jarring, can bias visitor behavior, and makes the store feel broken.
Common causes of flicker in other A/B testing tools:
Testing scripts that load too late in the page lifecycle
Scripts that wait for the full page to load before making changes
Client-side rendering delays
Network latency loading external scripts
How Elevate Prevents Flicker
Elevate's architecture is designed specifically to eliminate flicker. Here's how:
1. Script Placement in the <head> Tag
<head> TagThe Elevate Liquid Snippet is placed at the very top of your <head> section — before any other scripts, stylesheets, or content. This means the Elevate script executes before the page body renders.
<head>
{% render 'elevateab' %} ← Executes first
<!-- Everything else loads after -->
</head>This positioning is critical. By the time the browser starts rendering visible content, Elevate has already:
Read the experiment configuration from metafields
Checked the visitor's variation assignment
Determined what action to take (redirect, apply changes, or do nothing)
2. Synchronous Execution
The Elevate script runs synchronously — it doesn't wait for the page to finish loading or for other scripts to execute. Variation assignments and redirects happen immediately when the script encounters them, before the visitor sees any content.
For redirect-based experiments (price tests with duplicates, split URL tests, page tests), the visitor is redirected to the correct variation URL before the original page ever renders.
3. Inline Configuration
Experiment data is loaded from Shopify metafields directly in the Liquid snippet — there's no network request to an external server to fetch the configuration. The data is already embedded in the page HTML when it arrives at the visitor's browser.
This eliminates the network latency that causes flicker in tools that need to call an external API before deciding what to show.
4. Cookie-Based Assignment Persistence
Returning visitors already have their variation assignment stored in a cookie (ABTL). The script reads this instantly — no database lookup, no API call — and applies the correct experience immediately.
How Different Experiment Types Handle Flicker
Price Testing (Duplicates)
Visitor is redirected to the duplicate product URL before the original page renders
Price Testing (Native)
Theme extension applies the correct price as the page elements render
Split URL Testing
Visitor is redirected to the variation URL before the original page renders
Page Testing
The correct template is loaded via the ?view= parameter before content renders
Theme Testing
Visitor is redirected to the variation theme via preview_theme_id before the page renders
Visual Editor / Custom Code
Theme extension applies changes as DOM elements render — for most changes, this happens before the element is visible to the visitor
Checkout Testing
Checkout extensions render natively within Shopify's checkout — no flicker possible
Product Image Testing
Theme extension swaps images as they load
Performance Impact
The Elevate script is intentionally lightweight and minified. Performance testing typically shows a 1–2 point impact on page speed scores — a marginal tradeoff for flicker-free experiment delivery and accurate tracking.
The script's position in the <head> does mean it's render-blocking (it executes before the page body loads). This is by design — a non-blocking script would load too late and cause flicker. The script executes in milliseconds, so the impact on actual page load time is negligible.
Troubleshooting
I'm seeing a brief flash when pages load This is rare, but can happen if:
The Elevate snippet is not at the top of the
<head>section — check yourtheme.liquidfileAnother script or app is interfering with the page load order
The visitor is on a very slow connection and the redirect takes slightly longer than usual
If you're experiencing this, contact our support team for investigation.
Visual Editor changes flash briefly Visual Editor and Custom Code changes are applied by the theme extension after the DOM elements exist. In most cases this is imperceptible, but on very slow connections or complex pages, there can be a brief moment where the original element is visible before the change is applied. This is the nature of client-side DOM manipulation and affects all visual A/B testing tools.
Page speed score dropped after installing Elevate A 1–2 point drop is normal and expected. The Elevate script is render-blocking by design to prevent flicker. If you see a larger drop, check that only one copy of the snippet is installed and that there are no duplicate or legacy Elevate scripts in your theme.
Last updated