What is anti-flickering script?

Created by LiRou C, Modified on Fri, 12 Jan 2024 at 04:58 AM by LiRou C

7-min video demo

An anti-flickering script is a small piece of code added to websites to prevent flickering as page elements load.

Flickering happens when parts of a page load at different times, causing a jittery effect. This degrades user experience.

The script works by hiding page elements before they fully load, then fading them in once ready. This smooths the loading transition and prevents layout shifts.

To stop flickering during website testing, include the anti-flickering script right before the Mida A/B testing script.

Anti-flickering Script:

<!-- Anti-flickering script -->
<script>
  var  timeout = 3000; // Timeout value to remove the flicker (in milliseconds)
  !function(h,i,d,e){var  t,n=h.createElement("style");n.id=e,n.innerHTML="body{opacity:0}",h.head.appendChild(n),t=d,i.rmfk=function(){var  t=h.getElementById(e);t&&t.parentNode.removeChild(t)},setTimeout(i.rmfk,t)}(document,window,timeout,"abhide");
</script>

Example:

<!-- Anti-flickering script -->
<script>
  var  timeout = 3000; // Timeout value to remove the flicker (in milliseconds)
  !function(h,i,d,e){var  t,n=h.createElement("style");n.id=e,n.innerHTML="body{opacity:0}",h.head.appendChild(n),t=d,i.rmfk=function(){var  t=h.getElementById(e);t&&t.parentNode.removeChild(t)},setTimeout(i.rmfk,t)}(document,window,timeout,"abhide");
</script>

<!-- Mida A/B Testing Script -->
<script type="text/javascript" src="https://cdn.mida.so/js/optimize.js?key=oA05VeLkBJEMbREMq3X2Kv"></script>

The anti-flickering script makes the page invisible temporarily while loading completes. This creates a seamless load without flickering.

Best Practices for Anti-Flickering Script

Only use it when testing Above The Fold (ATF). ATF is the part of a webpage that is visible without scrolling down. Activate only on pages that are changing elements on ATF, you don't need an anti-flickering script if your test is below the fold as users will never notice the flickering effect.‍
Only use it when flickering is highly noticeable or distracting. For subtle page changes, the script may not be necessary.

In summary, the script improves site performance and user experience by controlling element loading to prevent flickering.