Last updated
Was this helpful?
If you notice that the original version of your website appears very briefly before the variation (a phenomenon known as "flickering"), it could be due to several reasons related to the implementation and loading of your tag. This article explains the common causes of flickering and provides solutions to minimize or eliminate this issue.
When the tag is installed asynchronously, its execution is non-blocking. This means that the modifications can be applied either before or after the page is displayed, depending on various factors such as tag positioning, site performance, and tag weight.
To ensure the changes are applied as soon as possible, it is recommended to install the tag synchronously. Synchronous loading will block the rendering of the page until the tag is fully loaded, reducing the chance of flickering.
To know more about the best practices when it comes to installing the AB Tasty generic tag, refer to .
If the tag is placed too low in the page, the page content may load first and then the modifications are applied, which can cause flickering.
Position the tag as high as possible in the HTML document, ideally right after the opening <head> tag. This ensures that the tag is loaded early, allowing any changes to be applied before the rest of the page is rendered.
It is also preferable to install the tag directly in your source code, avoiding the use of Tag Management Systems in order to avoid tag loading dependencies.
The flickering effect can also be attributed to the deferred loading setting being enabled in the "Advanced Options" step. When deferred loading is turned on, the content may not load immediately, causing a visible delay or flicker. To prevent this, you should try to switch to "Instant" loading:
The size of the tag can impact the loading time of your page. A larger tag may take longer to load, increasing the likelihood of flickering.
To evaluate the performance of your tag and ensure it loads efficiently:
Open your website.
Right-click and select "Inspect" to open the browser's developer tools.
Navigate to the "Network" tab.
Clear the filter field and clear your network logs by clicking the “no entry” icon:
Use the key combination cmd + shift + r (Mac) or ctrl + F5 (PC) to refresh the page without using the cache.
This process will help you see all your website resource's loading time and their impact on the page performance.
Note that the AB Tasty tag is split into several files. There’s one main file that can be seen as the conductor of all files. Then all core engines and all campaigns are separated into distinct files. When a campaign is updated, only the file containing these campaigns will be updated. Similar to this, when we release a feature, only this file is changed and not the global software. This helps us fulfil one of our main goals with performance: make sure that a visitor only downloads the strictly necessary. No need for visitors to download over and over again files that they already have and do not change often. That’s why, at the first visit, you will see a weight for AB Tasty related files (see screenshot above). For your next visits, the majority of these files will be cached in the browser, meaning that they won’t be downloaded again. This is slightly improving the performance of the tag, and it has to be taken into account during your tests.
Then, you can check for the details to get more information about its weight and downloading times.
Additional Note
It is important to note that client-side A/B testing will always exhibit some level of flickering because the modifications are applied on top of the existing site content. This is common to all testing tools. The key is to understand where the flickering comes from and how to minimize it. Additionally, the nature of the changes plays a significant role. For example, modifying a large hero image in a slider or changing the color of a header is more likely to result in noticeable flickering.
Additional Note
For some customers, we can provide an ‘anti-flicker’ code that hides the original version of the site as long as the AB Tasty tag (and therefore the campaigns and their modifications) is not loaded on the page. Our clients can add this code directly to their source code. This is not an option we recommend as it can deteriorate the user experience by taking longer to display the page. However, if you would like to know more about this, please contact your Customer Success Manager, who will be able to provide you with the code and the appropriate instructions.
Flickering is often a result of how and where the tag is implemented on your website. By installing the tag synchronously, positioning it at the top of the page, and maintaining a manageable tag size, you can significantly reduce or eliminate flickering. Regularly checking the tag's performance will also help ensure optimal loading times and a smooth user experience.
For further assistance or more detailed guidance, refer to the Performance Center or contact the AB Tasty Support.
Keep the tag size under 120kb. Regularly monitor the tag's weight using our and make necessary adjustments to reduce its size. Follow the guidelines provided by the Performance Center to keep good tag performances. The tag consists of a fixed part (managed by AB Tasty) and a variable part (affected by the number and complexity of active campaigns).
Next, look for your tag identifier (available ) and verify where it’s positioned in the list. Once the page has reloaded, check if the tag is one of the first resources called. This is the primary factor in reducing flickering. The higher the tag appears in the network request list, the sooner it is called by the site, resulting in less noticeable flickering. Conversely, if the tag is lower in the list, it is called later, increasing the chances of flickering.