# 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 `` Tag The Elevate Liquid Snippet is placed at the very top of your `` section — before any other scripts, stylesheets, or content. This means the Elevate script executes **before the page body renders**. ```html {% render 'elevateab' %} ← Executes first ``` 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 | Experiment Type | How Flicker Is Prevented | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **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 `` 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 `` section — check your `theme.liquid` file * Another 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.