Anti-Flicker Script
What is Page Flicker?
Page flicker (often referred to as a Flash of Unstyled Content) occurs when a web page momentarily displays the browser's default styles before the external CSS and JavaScript fully load. This slight delay causes the page elements to briefly appear unstyled before visually "jumping" as they re-render into their final positions.
The Solution: FigPii's Anti-Flicker Snippet
The most effective way to ensure a seamless user experience during your A/B tests is to temporarily hide the page content while the FigPii experiment loads. This is achieved by installing the FigPii anti-flicker snippet.
Installation Guidelines & Best Practices
For the anti-flicker snippet to function correctly, it is critical that it is installed following these exact parameters:
-
Placement: The snippet must be placed within the
<head>section of your website's HTML. -
Load Order: It must be the very first script loaded on your page(s). It needs to be positioned immediately before your primary FigPii tracking code.
-
Direct Integration Only: The snippet must be hardcoded directly into your page's source code. Do not use Google Tag Manager (GTM) or any other tag management system to inject this script, as tag managers inherently introduce loading delays that will defeat the purpose of the anti-flicker code.
<!-- FigPii Anti-Flicker Snippet -->
<style>.fp-hide{opacity:0!important;}</style>
<script>(function(w,h,c,v,t,a,o){h.className+=" "+c;o=w[v]=w[v]||[];o.show=a=function(){h.className=h.className.replace(RegExp(" ?"+c),"")};setTimeout(function(){a();o.show=null},t)})(window,document.documentElement,"fp-hide","_fpHide",4500);</script>
<!-- End FigPii Anti-Flicker Snippet -->