​
What is Flickering?

Flickering, or the flicker effect, occurs when the original version of a webpage is visible for a brief moment before the A/B test variation loads. This issue is common with JavaScript-based A/B testing tools. The flicker effect can confuse visitors or distort the results of your experiment by briefly showing the control version before applying the variation.

Flickering can happen for two main reasons:

  1. Script load timing: The A/B testing script loads too late, causing the browser to display the original content before applying the variations. This is usually due to the way the A/B testing script is implemented on your page.

  2. Slow script execution: The engine processing the variations takes too long to apply the changes, resulting in a delay between the initial page load and the variation display.

Gleef incorporates built-in mechanisms to minimize and prevent flickering.

​
How to Avoid Flickering

​
1. Check for Flickering in Gleef

Before making any changes, test your implementation to see if flickering is an issue. The default implementation provided in Quickstart should be sufficient for most cases and designed to avoid flickering.

​
2. Script Placement

Ensure that the Gleef script is placed correctly in your website’s code. The script should be:

  • Placed in the <head> section: This ensures the script runs early, before the webpage renders, preventing flicker.
  • Not using a tag manager: Tag managers can delay script execution, which might increase flickering risk.

If your script is placed incorrectly or loaded via a tag manager, adjust it to load in the <head> section to prevent flickering.

​
3. Load Script Asynchronously with Fallback

To completely eliminate flickering, implement the script to load asynchronously and add a pre-loader to prevent the page from displaying until the variations are ready.

Here’s how you can do it:

  • Asynchronous Script Loading: Load the A/B testing script asynchronously to ensure it doesn’t block other content from loading.

  • Pre-loader Implementation: Add a snippet that keeps the page hidden until the variations are applied. This avoids any content flashing between the original and the variation.

  • Timeout Fallback: In cases where Gleef’s services are unavailable, the page should load after a brief delay. This is a built-in feature of Gleef’s pre-loader, and we recommend keeping the default delay to avoid unnecessary load time.

​
Best Practices to Prevent Flickering

​
Why is script placement crucial?

Placing the Gleef script in the <head> section ensures that it loads before any content is rendered on the page. This helps in applying the variation early and prevents visitors from seeing the original version of the page, thereby avoiding flicker.

​
Can I use a tag manager for Gleef scripts?

It is not recommended to use a tag manager for loading the Gleef script. Tag managers can introduce a delay in script execution, increasing the likelihood of flickering. For best results, directly place the script in the <head> of your webpage.

​
What is the pre-loader and how does it work?

A pre-loader prevents the page from rendering until the variations are ready. This is done by keeping the webpage content hidden momentarily until the A/B test variation has been applied. This method avoids any visible flickering.

​
Troubleshooting Flickering

​
1. Flickering Still Occurs—What Now?

If flickering persists despite following the recommendations:

  • Double-check script placement: Ensure the Gleef script is within the <head> section and loaded correctly.
  • Check for delays in execution: Use developer tools to monitor the script loading time and ensure it’s being executed before the page displays.

​
2. What if Gleef’s services are temporarily down?

If Gleef’s services are unavailable for any reason, the fallback mechanism ensures that your page loads after a set timeout. This prevents users from being stuck on a blank or partially loaded page.

By default, Gleef sets a reasonable delay for the timeout, but you can customize this delay if needed. However, we recommend sticking to the default setting for optimal performance.

<script>
    var scriptLoadingTimeout = 1000;
    window.mainScriptStartLoadTime = new Date().getTime();
    if (!document.getElementById("loadingStyleSheet") && !window.displayPageTimeOut) {
      var s = document.getElementsByTagName("script")[0];
      var cc = "* { visibility: hidden !important; background-image: none !important; }";
      var stn = document.createElement("style");
      stn.type = "text/css";
      stn.id = "loadingStyleSheet";
      if (stn.styleSheet) {
        stn.styleSheet.cssText = cc;
      } else {
        stn.appendChild(document.createTextNode(cc));
      }
      s.parentNode.insertBefore(stn, s);
      window.displayPage = function(fromEngine) {
        if (!fromEngine) {
          window.timeout = true;
        }
        if (stn.parentNode) {
          stn.parentNode.removeChild(stn);
        }
      };
      window.displayPageTimeOut = window.setTimeout(window.displayPage, scriptLoadingTimeout);
    }
</script>
<script src="https://d234kfawt0op6y.cloudfront.net/script.js" fetchpriority="high" async></script>

If you followed all the recommendations but are still experiencing flickering, you can contact us at support@gleef.eu.

Was this page helpful?