All the information you need in one place

How can I fix page content flickering?

Content flickering refers to a phenomenon where the content on a webpage briefly appears and disappears repeatedly. This can be a frustrating experience for visitors, as it can make it difficult to read or interact with the content on the page.

Content flickering can occur for a variety of reasons, one being A/B testing. When there’s a page under test, the visitor may first see the control version, only for it to be replaced with that of a variant, resulting in your page flickering.

To overcome this issue, Nelio A/B Testing implements a simple, yet clever solution: it adds a white overlay on top of your page’s content. This way, our plugin has time to determine whether the page is under test and, if it is, which variant should be presented to the visitor. If the plugin concludes that the content should be replaced, it can safely do so behind the scenes (i.e. under the overlay), without the visitor ever noticing any content flickering.

Depending on your setup, however, it’s possible that this solution doesn’t work as expected. For example, if your site is using a cache or an optimization plugin, and depending on its settings, they might “optimize” all JavaScript files from your site by combining, minifying, deferring, and/or delaying their execution. As a result, it’s possible that the script responsible of hiding this “content flickering” behind the white overlay doesn’t run as early as it’s supposed to, producing content flickering.

To fix the issue, just look at the settings of your cache plugin and make sure you exclude Nelio A/B Testing’s scripts from the optimization process. That is, exclude all scripts under the nelio-ab-testing path as well as all inline scripts containing either nelio-ab-testing or nab​.