When running Split URL Testing in Mida, you might notice a brief flicker where users momentarily see the original page before being redirected to the variant. This can be distracting and negatively impact the user experience.
This guide explains why flicker happens, how to reduce it in general, and how to properly handle flicker on Next.js websites.
Why Does Flicker Happen in Split URL Testing?
Flicker occurs when the original page renders before the redirection logic has a chance to run. In Split URL Testing, this usually means:
The browser loads and displays the original page
The Mida script executes slightly later
The user is then redirected to the variant
The delay can be caused by:
Script placement
Third-party script loaders
Framework-specific rendering lifecycles (such as Next.js)
Best Practices to Reduce Flicker (All Websites)
1. Place the Mida script as high as possible in <head>
This ensures the browser prioritizes loading and executing the script early, reducing the time before redirection happens. Avoid placing the script in <body>, as this increases the chance of flicker.
2. Avoid third-party loaders (e.g. GTM)
Do not load the Mida script via Google Tag Manager or other third-party tools. These introduce additional execution delays will make flicker always noticeable.
3. Enable the anti-flicker script
Mida provides an anti-flicker snippet that temporarily hides the page until the redirection decision is made. You can find this in the Installation Guide → Get Started section of your Mida dashboard.
Important: Flicker in Next.js Websites
This section applies only to users running a Next.js website.
In Next.js, flicker can happen even if the Mida script is placed correctly.
Why This Happens in Next.js
By default, Next.js delays the execution of client-side scripts until certain framework lifecycle steps are completed (e.g. hydration). This means:
The page can render before the Mida script runs
Redirection logic executes too late
Users briefly see the original page (flicker)
This behavior is expected in Next.js because Next.js controls script execution timing.
How to Fix Flicker in Next.js
To properly handle flicker in Next.js, you should use the official Mida Next.js integration:
This package ensures:
The Mida script runs as early as possible in the Next.js lifecycle
Redirection decisions happen before the page is visually rendered
Flicker is minimized or completely eliminated
We strongly recommend using this integration instead of manually adding the script for any production Next.js site.
Final Thoughts
By following the general best practices above and using the official Mida Next.js package when applicable, you can significantly reduce flicker and ensure a smooth, seamless experience for users in Split URL Testing.
If you’re unsure whether your setup is correct or need help with Next.js integration, feel free to contact our support team.