Anti-Flicker Snippet (Optional)

A quick guide to the optional anti-flicker snippet that reduces visual flicker during experiment activation.

1 min read

To minimize visual flicker and prevent users from seeing unstyled content before an experiment is applied, you can include the following optional anti-flicker snippet. Place it as high as possible in the <head> section of your site.

<style id=“pertento-style-opacity”>body { opacity: 0; }</style>
<script>setTimeout(() => { document.getElementById('pertento-style-opacity')?.remove() }, 500);</script>

Purpose

The snippet temporarily hides the page during initial load, allowing Pertento to apply the correct variant before content becomes visible. This ensures a smoother and more stable user experience.

Timeout Adjustment

The timeout value can be adjusted to fit your site’s loading behavior. Increasing or decreasing the delay may improve the visual experience depending on your specific setup

Notes

  • Recommended on pages where flicker is noticeable.
  • Keep the structure intact to maintain functionality.