Help with understanding LCP metrics

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.

https://developer.chrome.com/docs/lighthouse/overview/

Apache License 2.0

28.24k stars 9.35k forks source link

Help with understanding LCP metrics #10928

Closed ElForastero closed 4 years ago

ElForastero commented 4 years ago

Hi 👋

We are facing with large LCP metrics on www.powerthesaurus.org. And we even can't get why does this happen.

According to the trace that I see in the Lighthouse report, almost all the content is shown right after page load (especially the main content). But LCP is postponed far away.

Profile-20200608T190653.json.zip

Can you give us a bit of advice from where to start?

patrickhulce commented 4 years ago

Thanks for filing @ElForastero!

Two things:

First a general tip. If you record a performance trace manually and then mouse over the "LCP" label you circled, it should highlight the element it's talking about in the page. See screenshot.
I'm guessing this is a SSR/SSG app with a hydration step client-side (as evidenced by my dark mode render in that example). If so, LCP is highlighting the fact that the hydration step is removing the original and recreating everything. If you're using angular it's a known bug the team is working on (https://github.com/angular/angular/issues/13446).

ElForastero commented 4 years ago

@patrickhulce Wow, it was the quickest answer I've got so far on GitHub issues.

Thanks for the clarifications 🙏

Yes, this is a React SSR app with hydration.

patrickhulce commented 4 years ago

Ah something is amiss with the SSR hydration then React should already do this when used correctly. I'd start there.

From the React docs...

If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

ElForastero commented 4 years ago

@patrickhulce Finally, the root of the problem was found. We had an extra top-level <Suspense /> component in our App that shouldn't be in the production build. Despite the fact, there weren't any async-loading components during initial rendering, this extra <Suspense /> caused such strange behavior.

I hope this will help someone facing a similar issue.

Now LCP metrics look truthfully.

The only question I have now is why this highlighted header block is treated as LCP? Probably we can just ignore this.

patrickhulce commented 4 years ago

Glad you found the issue!

The only question I have now is why this highlighted header block is treated as LCP?

That appears to legitimately be the largest text node on the page and there are no large images.

If there are no further problems, I'm going to go ahead and close this out but feel free to come back if you believe there's something Lighthouse needs to change :)