Skip to main content
Flickering typically has two main causes:
  • The browser has already displayed the page or parts of it before the script loads and executes. This timing issue relates directly to how you implement Kameleoon on your website. If Kameleoon loads too late or you integrate it within a Tag Management System, you can’t avoid flickering.
  • The engine processing the experiment’s variations is too slow and doesn’t execute the modifications quickly enough.
Kameleoon’s script includes a unique anti-flickering engine that ensures A/B tests run smoothly, allowing test variations to display without delays which leads to an improved user experience and more reliable test results.

​
Key advantages of the technology

Here are some reasons why Kameleoon’s anti-flicker technology is unique and powerful:
  • Asynchronous Snippet: Kameleoon loads its script asynchronously from a reliable CDN (Cloudflare) to ensure a non-blocking first page load and utilizes browser caching for faster subsequent page loads. Kameleoon upholds a Service Level Agreement (SLA) of over 99.99%.
  • Low Script Size: The application file, created using TypeScript, has a size of just 29 kB (compressed with Brotli), which minimizes loading time on the first page.
  • Preprocessing Approach: Kameleoon generates the script only from the components necessary for your specific setup, based on the features and options you use.
  • Unique Anti-Flickering Engine: The engine captures DOM events in real-time and alters the display of components involved in an experiment variation before they’re fully rendered.
  • Reduced Network Calls: The script groups multiple tracking events into a single beacon call, significantly decreasing the total number of network calls required.
  • Single Script Load: Unlike other platforms that require multiple files, Kameleoon loads a single consolidated script. This reduces the number of HTTP requests.
  • Deferred Experiment Loading: Kameleoon allows you to select which experiments to include in the application file, engine.js (previously named kameleoon.js) at the time of the initial page load, on a case-by-case basis, and defer non-essential experiments until after the first load.
  • Real time update: To provide more frequent updates without browser caching getting in the way, the Live Update Experiments feature refreshes any experiment labeled “LIVE-UPDATE” within a minute.

​
How to prevent flicker in your experiments

To eliminate flickering that occurs when loading the application file, use the asynchronous tag with anti-flicker prevention. The snippet includes a “blocking CSS rule” that initially hides all the content on the page while the browser downloads the script. Kameleoon removes this rule when the Kameleoon script loads, which typically takes less than 50 milliseconds. If the Kameleoon script doesn’t load within the specified timeout period (default set to 750 milliseconds), Kameleoon also removes the rule to prevent displaying a blank page indefinitely. This approach ensures that Kameleoon can’t disrupt your website in any situation.
You control the timeout with the kameleoonLoadingTimeout JavaScript variable, which you can adjust in the Kameleoon installation tag. By default, this variable has the value 750 milliseconds. Kameleoon recommends keeping it at this value. This variable indicates the maximum time the Kameleoon installation tag can prevent your site from displaying while it waits for the Kameleoon application file to load.In the event of a timeout, once the Kameleoon code finally loads, the chosen configuration determines what happens next. You can choose between the following options in the Behavior if timeout occurs setting on the Settings tab of your Kameleoon project:
  1. Disable Kameleoon for the current page or Disable Kameleoon for the entire visit: If a timeout occurs, Kameleoon executes no experiments or personalizations for that specific visitor on the current page or for the rest of the visit.
  2. Run Kameleoon (with flicker): In this case, the code executes late, which may result in flickering on the page.
Keep in mind that if the default timeout value isn’t adjusted, timeouts should be relatively rare under usual conditions, such as with an appropriate internet speed, occurring in only about 2-3% of your visitors.
Although not recommended, you can also implement the synchronous tag. With synchronous loading, the browser doesn’t render any content until the Kameleoon application file is fully downloaded and executed, as long as you include the tag in the HTML <head> section. However, loading resources in a blocking manner isn’t considered a good practice. Even if you implement the correct method, flickering effects can still occur if the underlying engine of an A/B testing solution isn’t optimized to prevent them. Kameleoon automatically ensures these optimizations for any changes made through the graphical editor. For variations that utilize custom JavaScript code, APIs are available to help ensure a smooth experience. Use these APIs correctly to avoid issues. Perform any modifications to an element or any actions waiting for an element to appear on the page using the JavaScript API method, specifically Kameleoon.API.Core.runWhenElementPresent(), rather than by using hand-coded pollers or other custom code.
When implementing JavaScript code for a variation, consider the modifications you want to make and the specific DOM elements to which they will apply. Once you have identified the appropriate CSS selector for these elements, enclose the modification call within a callback function that you will provide to Kameleoon.API.Core.runWhenElementPresent(). This approach has two key benefits: first, it ensures that the code executes at the right time, only after the elements are present in the DOM, preventing potential issues that could arise if your code runs prematurely. Second, it eliminates the risk of unwanted flickering effects.

​
Impact of flicker management on performance

While performance monitoring solutions offer valuable insights, they don’t present a complete picture, particularly for experimentation platforms. True performance is about finding the right balance between speed, accuracy, and providing a seamless user experience. Kameleoon achieves this balance effectively: the experiment snippet is specifically crafted to optimize both performance and user experience. Kameleoon loads a single script that contains the engine and any configurations you have set up on the platform, including experiments, goals, and custom scripts. No additional scripts load afterward. Hiding the page until the Kameleoon application file loads or the timeout expires can cause a white page and a slower First Contentful Paint (FCP). PageSpeed Insights measures FCP. If a white page or PageSpeed results cause a problem, in most cases removing the anti-flicker code is the simpler fix. Use the asynchronous tag without anti-flicker instead. Without anti-flicker, visitors can see the original page before a variation appears, which can reduce the accuracy of your results.

​
FAQ

This is a known bug on Firefox. Until the Firefox team fixes it, follow this workaround: ensure your linked CSS resource is followed by a <script> tag (even an almost empty one).Example:
This removes the flashing effect entirely.