Menu

The anti-flicker tax: what hiding your page does to LCP
📰

The anti-flicker tax: what hiding your page does to LCP

DEV Community: nextjs·EvolveAB Admin·1 day ago
#8vk1SWZV
#devtonextjs#devto#dev#flicker#testing
Reading 0:00
15s threshold

If you've run a test from a visual editor, you've probably seen it: the page loads with the old headline, and a beat later the new one snaps into place. That's flicker. Client-side testing tools all have to deal with it, because their script applies the variant after the browser has started painting.

From inside the browser you can either show the original and swap it, so the visitor sees the flash, or hide the page until the script is done. The second option is the "anti-flicker snippet", and most tools turn it on by default.

How long the page stays hidden

An anti-flicker snippet makes the page invisible, usually with opacity: 0 on the body or a class like Google Optimize's async-hide . It reveals the page when the testing script finishes or a timeout fires, whichever comes first, so the timeout is your worst case. The defaults are generous:

Google Optimize shipped its snippet with a 4,000 ms default ( Google's developer docs ).…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.