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 theelement, 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 use 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.
