Prevent page flicker when showing variations with Optimize.
Page flicker is that quick flash where your webpage shows the old content before the new version kicks in. Optimize has built-in anti-flicker techniques, so as long as you follow our recommendations, your visitors shouldn’t notice anything at all.
How the snippet prevents flicker
Optimize uses CSS selectors to identify which elements on your page will be changed by a variation. To prevent visible content shifts the snippet temporarily hides those elements during page load. Once the variation is ready, the updated elements are revealed, giving visitors a smooth, seamless experience.
Best practices to follow
Use these best practices and your variations will be Flicker-free.
Installing the snippet
The snippet must load as early as possible on the page to prevent flicker. Use these guidelines when installing the snippet:
- Place it in the
<head>tag — ideally as high as possible - Place it before any analytics or tag manager scripts
- If you use Cloudflare Rocket Loader, make sure to use the alternate snippet optimized for Rocket Loader
Visual editor variations
If you create variations in the visual editor, you're good to go. Optimize tags elements automatically.
Code-based variations
If you use the code editor to build variations, make sure to use selectors. Assign a selector to each element or top-level tag that your variations modify. This lets Optimize apply anti-flicker techniques effectively for those elements.