What is anti-flickering script?

Created by LiRou C, Modified on Wed, 8 Jan at 8:57 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. This lightweight solution adds only 50-100ms to the initial page load - significantly faster than a blink of an eye (300ms).

Flickering happens when parts of a page load at different times, causing a jittery effect. This degrades user experience and can make your website appear unprofessional.

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. The script loads asynchronously, meaning it won't block other page elements from loading or impact your site's overall performance.

To stop flickering during website testing:

Include the anti-flickering script right before the Mida A/B testing script
Optionally set a timeout value to ensure the page displays even if there are unexpected delays

The anti-flickering script makes the page invisible temporarily while loading completes. This creates a seamless load without flickering. We've extensively tested this solution across high-traffic websites to ensure minimal performance impact while maintaining optimal user experience.

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>

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.