Lighthouse NO_LCP error due to offscreen animation

[CDDelta]

Since Lighthouse was updated to include the LCP metric my site doesn't get a performance score anymore. The error text asks me to rerun Lighthouse but I have done so multiple times and there's no effect.

Provide the steps to reproduce

1. Run LH on https://cddelta.github.io/portfolio/

What is the current behavior?

Performance score is not calculated as no LCP could be measured.

What is the expected behavior?

LCP can be properly calculated or Lighthouse fails gracefully with a performance score when it cannot be.

Environment Information

Tested on web.dev and CI server running latest Lighthouse.

[akashdsouza]

Related issue

Try running on a latest version of chrome

[patrickhulce]

Thanks for filing @CDDelta! I can reproduce and this appears to be a bug in the LCP metric itself, we'll look into it 👍

[bcmedeiros]

In my case here I was having this problem just in CircleCI build, local one was working fine.

After updating the docker image from circleci/node:12.7-browsers to circleci/node:12.18-browsers CircleCI started to work fine as well, so the assumptions that this problem might be related to Chrome version seems to stand in my case.

[widmanski]

https://praesens.co also triggers the NO_LCP error. I first noticed the error in Lighthouse 6.0. I saw that there were a number of similar Issues reported here, so didn't report earlier. Now, I'm seeing that even after these issues were resolved, and 6.1 was released, the issue persists. The website got a 100 before the 6.0 update.

The error can be reproduced every time using any of the below (all return the NO_LCP error):

• web.dev
• pagespeed insights
• lighthouse 6.x via node CLI

Here is the JSON report from 6.1:
https://gist.github.com/widmanski/ea1357b99749a32c17910d2b802a28ed

Here is the JSON report from 5.6, when all metrics worked, and the score was 100:
https://gist.github.com/widmanski/3f68bca3a04fe43eef10a95b4397eac5

I'm not sure if this info is helpful, but I was able to observe a largest-contentful-paint using a PerformanceObserver directly in Chrome 83.0.4103.116.

Update
When using node CLI, lighthouse 6.1 actually seems to run correctly in 5-10% of the attempts. Here is the JSON from a successful run: https://gist.github.com/widmanski/c405e039311203a014c5b6127a935247

Update 2
I'm not sure how to explain this, but when running lighthouse 6.1 via node CLI in verbose mode, the error rate seems to be much lower, with over 80% of attempts returning the expected result. I did some light digging, and the error is thrown here -

lighthouse/lighthouse-core/computed/metrics/lantern-largest-contentful-paint.js

Line 50 in 6420832

throw new LHError(LHError.errors.NO_LCP);

- with the lcp value being undefined.

{
  name: 'LHError',
  code: 'NO_LCP',
  friendlyMessage: 'lighthouse-core/lib/lh-error.js | badTraceRecording # 0',
  lhrRuntimeError: false
}

My guess would be that it's some sort of a timing issue/race condition, as the error rate decreases if the script is slightly delayed by running it in verbose mode.

[patrickhulce]

Thanks @widmanski I can reproduce this as well!

[patrickhulce]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1104218 with these details 👍