> For the complete documentation index, see [llms.txt](https://docs.elevateab.com/elevate-helpcenter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elevateab.com/elevate-helpcenter/analyze/tracking/anti-flicker.md). # Anti-Flicker How Elevate A/B Testing stops the original Shopify page flashing before a variation loads, and what the script costs in page speed. 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 A/B Testing keeps flicker to a minimum for your visitors, and where a brief flash can still happen. *** ### 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 A/B Testing Prevents Flicker Elevate A/B Testing does not hide your page while a variation loads. Instead, its script runs early enough that most changes happen before or as the page is first drawn. Here's how: #### 1. Script Placement in the `` Tag The Elevate A/B Testing Liquid Snippet is placed at the very top of your `` section, before any other scripts, stylesheets, or content. This means the Elevate A/B Testing 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 A/B Testing 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 A/B Testing 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 (Product, Page, Split URL, and Theme experiments), the redirect starts before any visible content is drawn. #### 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, with no database lookup and no API call, and applies the correct experience immediately. *** ### How Different Experiment Types Handle Flicker | Experiment Type | How Flicker Is Prevented | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Product Testing** | Visitor is redirected to the variation's copy of the product before the original page renders. In a grouped experiment, this happens on any product in the group. | | **Page Testing** | Visitor stays on the same page address, opened with the variation's page template, before content renders | | **Split URL Testing** | Visitor is redirected to the variation URL before the original page renders. Depending on the redirect setting, this happens on every visit, only from the control URL, or once per visitor. | | **Theme Testing** | Visitor sees the same page with the variation's theme, as a Shopify theme preview, before the page renders. Shopify's preview bar is removed for visitors. | | **Price Testing** | No redirect. The prices for each variation are built into the page, and the theme extension changes each price as the price element appears, including prices that load later such as after a variant change, in a quick view, or in a cart drawer | | **Product Image Testing** | No redirect. The theme extension swaps images as each element renders | | **Content Testing** | No redirect. The theme extension applies text, style, image, and layout changes as each element renders | | **Custom Code Testing** | The variation's CSS is added before anything is drawn, so CSS-only changes don't flicker. JavaScript runs just as early, so visual changes made with JavaScript can flash depending on how your code waits for the elements it changes | | **Shipping Testing** | Nothing on the storefront changes. Only the shipping rates at checkout differ, so there is no flicker | | **Checkout Testing** | Checkout extensions render natively within Shopify's checkout, so there is no flicker | The price a customer is charged in the cart and at checkout is set by Shopify from the visitor's variation. It does not depend on what the page displayed. *** ### Performance Impact The Elevate A/B Testing 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. No request to Elevate A/B Testing's servers is needed to decide which variation a visitor sees. *** ### Troubleshooting **I'm seeing a brief flash when pages load** This is rare, but can happen if: * The Elevate A/B Testing 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. **The original price flashes briefly** On a slow device or connection, the original price can show for an instant before it changes. A price that stays at the original value usually sits in an element Elevate A/B Testing isn't set up to update yet, such as a collection grid, cart drawer, quick view, or another app's widget like a bundle or upsell. Contact support with the page and element, and the team will add it. A price also stays at the original if the variation has no price set for the visitor's currency. **Content or Custom Code changes flash briefly** Content and Product Image changes are applied by the theme extension as each element renders. In most cases this is imperceptible, but on slow devices or connections there can be a brief moment where the original element is visible before the change is applied. For Custom Code, make the change with CSS where you can, since CSS is applied before the page is drawn. **Page speed score dropped after installing Elevate A/B Testing** A 1–2 point drop is normal and expected. The Elevate A/B Testing 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 A/B Testing scripts in your theme.