What’s a Snippet?
Website A/B testing platforms (like Optimizely, Convert, etc) use a Javascript “snippet” – this is an HTML tag that loads the platform’s Javascript code into the website, and enables you to start running experiments. The specific method that you use to install the snippet into the site can have a large impact on the visitor experience when interacting with A/B experiments running on the site.
What's “flicker”?
If installed improperly, the visitor may be treated to disruptive experiences known as “flicker”. “Flicker” could result in content shifting around under your cursor or things abruptly changing in style as the page loads.
This writeup talks about the common causes of flicker and how you can verify that your snippet is installed in an optimal way to avoid these issues.
How is the snippet installed?
There are a handful of ways to get a Javascript snippet added to your website, but some methods will produce better results than others. The method you used to install other snippets (Google Analytics for example) most often isn’t going to be ideal for installing your A/B testing platform snippet.
Primary concerns:
The snippet can either be installed synchronously or asynchronously (also known as “async”)
The placement of the snippet within the HTML document can have an impact on the operation of your A/B experiments.
Asynchronous snippets are commonly used to add analytics platforms to your website. Asynchronous snippets are not “render-blocking”, meaning they say “don’t wait for me” as they retrieve and run their code, allowing the other parts of the site to run first. This is great for snippets that are not “time sensitive”, like analytics platforms that can happily run whenever the browser gets around to it.
Synchronous snippets are render-blocking. This means that the web browser will ensure that the script has run before proceeding to the next part of the html. Synchronous snippets are necessary when the timing matters, and the code is critical to the display of the page. This is commonly used for your application logic, where the page just wouldn’t work without this code being in place first.
What we recommend
Since the A/B testing platform is integrated into the page’s display and “look and feel”, it’s recommended that the snippet always be installed synchronously when possible. This will ensure that your visitors will not experience disruptive “flicker” issues.
It’s also best to install the snippet high up in the section of the document, above other scripts. This will ensure that the platform has ample time to ensure a smooth user experience for visitors.
Common Pitfalls
Adding through Tag Manager: Sometimes website owners will install the testing platform through Google Tag Manager (or another Tag Manager like Tealium). This is often seen as the quickest way for someone to get a new script added to the site. The trouble is that this causes the snippet to be run Asynchronously, which usually leads to lots of flicker.
Added too far down: Other times a testing snippet may be added too far down in the HTML page. Since the HTML is executed from top to bottom, this can cause the experiment timing to be thrown off, running so late that the user experiences these flicker issues. This can commonly happen on javascript-heavy sites whenever the snippet is added below the application code. This will cause experiments to have to wait for the application to be completely loaded before being able to update the display. By then, it’s often too late to ensure a smooth visitor experience.
Different from page to page: We’ve seen cases where the snippet is installed differently from one page to another, perhaps between different subdomains, sections, or new versions of the site. It should be consistently applied across the entire website to ensure we can run tests and measure results without issue.
