Does Google Optimize anti-flicker snippet affect LCP negatively?

691 views Asked by At

FYI:

The snippet makes document.documentElement hidden for certain TIMEOUT value (defaulting 4 seconds), It seems like LCP would probably being delayed for 4 seconds...

2

There are 2 answers

1
Barry Pollard On BEST ANSWER

Possibly yes. However there’s more things to consider.

LCP is largest contentful paint. It’s basically the point at which the largest item (image or text block) on the screen was last changed.

So yes the Optimize snippet may delay that showing and will almost certainly affect First Contentful Paint (FCP). However if the experiment impacts the LCP text or image then it’s going to change anyway as the experiment is loaded - at which point LCP will be affected anyway. Though if the experiment is on something else that doesn’t affect the LCP image/text then yes it will likely be needlessly being held up.

It should also be noted that it doesn’t hold it up for 4 seconds - it’s a maximum of 4 seconds. If the experiment loads after 1 second it will display.

Also even if it does impact LCP, it will also be massively reducing CLS (Cumulative Layout Shift) - a new metric that is expected to gain increasing importance over next few years.

Ultimately experiments rendered on the client side (like Optimize provides) will take time and something’s going to give with that. The anti-flicker snippet reduces confusing shifts as the experiment kicks in. Is this worth the delay? Depends on the experiment!

On that note, at the end of the day you should think in terms of your users. Would they prefer to see the page drawn as quickly as possible even if that means it changes as it loads? Or would they prefer a white screen for longer? What makes better sense and UX to them? The metrics (be they LCP, FCP, CLS or whatever ever other metric you choose) are simple attempts at measuring (or at least proxying) user satisfaction. Don’t lose site on that when chasing the numbers.

0
GeorgeButter On

This is anecdotal and it will depend on your particular setup but without any customisation on my project, it added an extra second of LCP which frankly is unacceptable to me.

  • It is a render-blocking resource
  • I tried to defer its loading and it just stopped working entirely
  • It loads about 20KiB of unused JavaScript in my project