LCP in lighthouse vs PerformanceObserver API

[aadisarma7]

I am running lighthouse with user flows and am confused about the discrepancy between the values I receive from lighthouse versus the values I receive from the PerformanceObserver API. For example, when I navigate to https://www.vogue.com/, lighthouse reports an LCP of 5.0 s. However, the PerformanceObserver API gives me {"name":"","entryType":"largest-contentful-paint","startTime":604.2999992370605,"duration":0,"size":178816,"renderTime":604.2999992370605,"loadTime":471.5,"firstAnimatedFrameTime":0,"id":"","url":"https://assets.vogue.com/photos/65b2c705bb4460194d54c4f9/16:9/w_960%2Cc_limit/margiela%2520hero.jpg"}

I know that LCP can be broken down into 4 components with load time being one of them, but when I look at the diagnostics I find the load time for the LCP element is:

{
    "phase": "Load Time",
    "timing": 567.2240494509624,
    "percent": "11%"
}

Can anyone explain this discrepancy?

[connorjclark]

Are you aware that by default Lighthouse simulates the metrics as if the test ran on a mobile device and 3G network? https://github.com/GoogleChrome/lighthouse/blob/main/docs/emulation.md

[aadisarma7]

Yes I am. Is this the only reason for the values being different?

[aadisarma7]

The reason I was using the PerformanceObserver API was to get each intermediary value of the LCP computed. Is there a way to utilize lighthouse to get these values and the elements they correspond to?

[connorjclark]

There's an audit in the LHR called metrics that has observedX metrics, the actual value of the metrics. You could disable emulation, or just read the observed values, to get results that match using Perf observer manually. Of course there could be other differences between LH and a manual inspection, you'd have to present some example LHRs / websites for us to say more.

The values for phase breakdown in largest-contentful-paint-element will be simulated if emulation is used, otherwise will be observed. Simulation does not change what element is the LCP (but of course, mobile vs desktop runs may differ).

@adamraine should we add to metrics the observed phase breakdowns?

[adamraine]

@adamraine should we add to metrics the observed phase breakdowns?

Yeah wouldn't hurt. Should be pretty easy to expose on the LCP breakdown computed artifact.

[aadisarma7]

Is there a way to utilize lighthouse to get each LCP value between FCP and the final one that is reported?