Largest Contentful Paint cannot compute on SVGs

[loucyx]

Provide the steps to reproduce

1. Run LH on lshi.ru (made in Preact: source) or rightonhana.me (made in React: source).
2. Check the output

What is the current behavior?

The Largest Contentful Paint sections gives this error:

Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)

What is the expected behavior?

Get meaningful output in that section.

Environment Information

• Affected Channels: DevTools
• Chrome version: 85.0.4183.83 (Official Build) (64-bit)
• Operating System: MacOS/Linux/Windows
• Private Mode, no extensions running.

Related issues
#11180
#10869
#11003

[patrickhulce]

Thanks for filing @lukeshiru! These were indeed unique from the related issues you linked and are a Chromium bug. I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1122168 with a minimal repro 👍

[patrickhulce]

So reply on that crbug says that according to the spec, pages like this have no LCP. That's definitely suboptimal, so I poked the upstream issue w3c/element-timing#47 (comment). We'll see.

[MatRivard]

Hi @patrickhulce, any update on this? Experiencing the same issue with SVG on my site's homepage when running Lighthouse audit.

[patrickhulce]

It's not in Lighthouse's hands @MatRivard w3c/element-timing#47 (comment) is the correct place to track updates.

[andreseduardop]

@lukeshiru, @MatRivard, @patrickhulce, I experienced the same LCP error (due to SVG content) and I was able to figure it out.
I have only placed one image on this site's homepage -starting development, with some empty and animated <div> tags. 😄
The solution was to add a little text at the bottom of the viewport.
So, score 100 in Lighthouse.
I ruled out other possible sources of error, such as: css animation, elements outside the viewport, "opacty: 0.0" on startup, "animation: infinite"; etc.

[connorjclark]

Closing because this will be fixed at the metric definition level.

related issue for how to better present this error: #12309