Content Flickering

What causes content flickering?

When a test runs on a web page, content flickering refers to the flashing of the old page content before the new content has had the chance to trigger. The visitor may therefore end up seeing both before/after versions of the page (albeit briefly). This is caused by a delay in the triggering of the testing platform’s tag, generally due to the tag in question not being properly implemented, or the page’s load time being poor.

Why is it important?

Content flickering should be strictly avoided as it is likely to deter visitors. At best, they might realise that they are in a test, which could influence the way they interact with your site. As worst, they might think there is a problem on the page and abandon their visit.

How can you avoid it?

Apart from improving the load time of your site, the main remedies against content flickering are related to positioning the testing platform’s tag as high as possible in the <head> element, and ensuring it triggers synchronously (ideally, it needs to trigger before anything else does). If you trigger that tag from a tag manager, please note that synchronicity may be difficult to achieve as few tag managers offer that feature; therefore it is often recommended to keep testing tags outside of your tag management tool’s remit. Alternatively, you could also resort to server-side testing: in this scenario, the tested content would be delivered directly from your site rather than through a Javascript manipulation of the page’s content, which would make the rendering seamless.

What else can you do?

In cases where the basic techniques aforementioned do not work, content flickering can be minimised by using page hiding: in this case, your testing platform will use the most appropriate page hide method for your site (opacity, hide, shift…) and apply it to pages where a test is running. This will result in the brief display of a blank page instead of the old page content, giving the new content enough time to load. However, to be as effective as possible, page hide should be as succinct as possible and have a built-in timeout safeguard in case the new content cannot be retrieved fast enough.

How Webtrends Optimize can help

Webtrends Optimize provides strategies that ensure that content flickering won’t occur on your website. For ease, you have the option to mask the entire website or pages, allowing you to test quickly and freely with no further considerations.

Alternatively, you can specify Custom CSS Selectors that only mask the portions of the page you ask for – allowing the rest of the page to load naturally and thus keeping Time to First Render/First Paint at its optimal.

Between these strategies, we ensure that you won’t get content flickering, and so users won’t get a disturbed experience when running experiments or serving personalised/targeted content.

More from the glossary

Inbound Marketing

Inbound Marketing What is inbound marketing? Traditional marketing has, up until the last decade or so, heavily relied upon outbound

Read More »

Get in touch

If you have more questions or want to know a little more about website optimisation and personalisation, send us a message or call us on 0333 444 5502.

Thank you!

Thanks for submitting your enquiry with us.
A member of the team will be in touch shortly to follow up with you.

Thank you!

Please check your inbox and validate your email address so that we can create your free trial account.

Training Videos

While we're setting up your account, feel free to check out our training videos. You'll find them at: https://help.webtrends-optimize.com/optimize/training-videos/

Blog

Or, take a look through our blog to review industry insights, wins and all things Experimentation. https://www.webtrends-optimize.com/blog/