Google PageSpeed Throws a Largest Contentful Paint Error but Search Console Says It's Fine?

Question

The mobile version of my escape room's web site, https://www.escapesacramento.com, is showing on Google's Search Console --> Core Web Vitals as "Good URL"s overall, with the home page specifically showing up as having a 2.7s LCP. However when I click the link provided to look deeper into the PageSpeed Insights tool, I see an entirely different thing: supposedly my homepage throws an LCP error because it doesn't have any element that qualifies as LCP in the first place!

Search Console:

PageSpeed Insights Last 28 Days:

PageSpeed Insights Performance Issues:

I am only familiar with web development / Google's tools in a "generalist small business owner" capacity -- I've dabbled a bit but once we start getting into the weeds I find it really, really confusing. And the fact that Google is telling me one thing on one source, and then citing another source that says something entirely different, is obviously extra confusing for me! Any help understanding this discrepancy would be really appreciated. (And any help understanding why I'm getting that LCP error, as a bonus, would be extra double appreciated.)

Thanks in advance, all ye SEO/dev gurus.

Answer 1

Chrome (and so PageSpeed Insights) doesn't include elements which are invisible to the user. This includes elements which "fade in" from invisible, like it looks like your site does, as it's difficult to know when they are visible enough for the user to see them.

LCP is a heuristic, so there will be occasions where it doesn't work for some sites, but in general it's pretty good for most sites.

Also the aim of LCP is not to prevent you from creating great user experiences so if the fade in effect is something that achieves that, you shouldn't remove it just because LCP doesn't capture it well. Ideally we should fix the metric to handle this, but it is complicated as I say.

So until then you have a few options to allow you to measure LCP:

• Change the animation to start from something (e.g. opacity: 0.01) rather than opactity: 0 so it does register.
• Have some content not fade in, so you have something that is LCP-eligible.

To be honest, the first is a little hacky, and nothing to say that won't change in the future, so I'd probably actually recommend the second option.

I also personally find it a little jarring that the main content fades-in, then the title/menu bar, and finally the hamburger menu icon. Three different fade ins are a little much IMHO, so maybe making the title/menu bar and/or the hamburger menu show without a fade-in would solve both problems as you now would have something eligible for LCP. Though ideally we'd capture the main content as the LCP element and not the title bar, but seems they are displayed close enough so maybe that doesn't matter?

Finally, we come to this point:

And the fact that Google is telling me one thing on one source, and then citing another source that says something entirely different, is obviously extra confusing for me!

I totally agree and this is not a great user experience. To be honest I'm also a little confused here, despite working on the Chrome team and working on the Web Vitals metrics!

Looking at the history of LCP on mobile in this tool, I can see there often isn't enough data for this URL in the Chrome User Experience Report which powers both PSI and GSC. It was more present earlier in the year. Did you add this fade effect since then? Maybe that's why it measured earlier but doesn't now?

Anyway, I can understand why PSI now shows N/A under the "Discover what real users are experiencing section" (and we also know why it's not showing when tested in the real-time "Diagnose Performance Issues" section) so I'm comfortable with what PSI is showing.

I don't know why GSC is showing an LCP with "Examples of URLs in this Page Group" however and unfortunately that tool is managed by the Search team, who are kept quiet separate from the Chrome team. Perhaps this is old data back from when it did show and they continue to show it if they believe it's still useful to show it. You could ask on the Google Search Central Help Community or Webmasters stack exchange, where you are more likely to get SEO help, than the technical help here.