Error! Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)

Question

After migrating my website to a new domain, this testing page is displaying incorrectly. I still need this site to function properly.enter image description here

How to fix this? After migrating my website to a new domain, this testing page is displaying incorrectly. I still need this site to function properly.

Answer 1

tldr: try disabling the fade-in effect.

This seems to be a quirk in the way that the paint timing metrics like FCP and LCP are measured. Chrome ignores FCP and LCP candidates with an opacity of 0, and your page has a fade-in effect where the contents are initially invisible. So the elements that should be marked as the FCP/LCP are ignored. Lighthouse, the tool in your screenshot, marks the test as failed if there is no FCP.

The LCP quirk is explained nicely in this blog post by DebugBear.

The fade-in effect happens quickly, but it's easy to see in this WebPageTest filmstrip:

The blog post also warns:

Even after an element is faded in it still doesn't become an LCP candidate unless it is repainted. However, if an element is repainted then the LCP will be higher than expected!

I'm able to create arbitrarily slow LCP values just by waiting to interact with the page:

All it takes is hovering over something to cause a repaint and the LCP algorithm will pick it up as an LCP candidate. So not only is Lighthouse failing to test your page, but your UX metrics will also be skewed.

This is a limitation of the way Chrome measures LCP, because the UX is not actually that slow. For example, in the filmstrip above, the page appears to be fully loaded in under 3 seconds, not 9.

To avoid all of these measurement and reporting issues, I'd recommend removing the fade effect, if you can. That should cause the FCP and LCP values to more closely align with the user-perceived performance and it should address the Lighthouse issue.