Lighthouse: 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 👍

[brunojcm]

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 - https://github.com/GoogleChrome/lighthouse/blob/64208321f50b3e416850864f14aef7137fd40ab7/lighthouse-core/computed/metrics/lantern-largest-contentful-paint.js#L50 - 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 👍

[adamraine]

Looks like this has been fixed in chrome. Worth investigating to ensure LCP is reported on these sites.

[danielhaim1]

not for me @adamraine (v85.0.4183.121)

[RaicuRobert]

Same here

[hummal]

@patrickhulce in v85.0.4183.121 the bug is back. Do we have some regression here?
After some testing it seems to appear when the LCP happens to early (after 250ms) along with the FCP.
I can see in the screens that it shows the complete layouted page instantly.
If I put in a delay in delivering the page I got one white screen before the site is rendered and then it shows me the LCP.
So seems we get punished for loading too fast? :D

Maybe if there is no change in painting? Do the LCP calc need at least one change to be detected?

[patrickhulce]

@danielhaim1 @RaicuRobert @hummal thanks for the clarification! There are many types of pages that receive NO_LCP and this issue only tracks a very specific one (when the LCP element animates from outside the viewport to in viewport).

It's quite likely that this bug doesn't apply to you. A separate issue with a reproducible case or public URL would be much appreciated if you don't think your LCP element animates into the viewport :)

[patrickhulce]

Also @adamraine from our triage it looks like this is "WAI" from the LCP spec perspective which is really unfortunate for us. We're at a dead end.

I'll file an issue on the LCP spec repo.

[hummal]

@patrickhulce Thank you Patrick for answering that quick.

I can provide a live page for my tests: https://flug.check24.de/fluege/spanien
As we write I did another 3 tests in an incognito tab and the first 2 went through but the last one just did not finish due NO_LCP.
When it worked out the LCP was at 5.2s. Iam not in control of all the scripts that been loaded by this site. So especially the form is a blackbox for me.

Edit: after some additional testing it does not occur when the cookie thingy is not there. But there is no opacity in this elements. Only background with alpha.

[patrickhulce]

Thanks for the extra info and the URL @hummal! There's something extra weird going on in Chromium for that URL I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1135165

I can also reproduce your intermittent behavior in Lighthouse. As part of the cookie loader, do you know if that removes any elements from the DOM when it loads?

[hummal]

Thanks for having a look into.

As part of the cookie loader, do you know if that _removes_ any elements from the DOM when it loads?

As Iam checking the code I can only see that there is some height change:
if (consentNotice.offsetHeight !== 0) { consentScreen.style.height = consentNotice.offsetHeight + "px" }

Removed DOM elements are not in the code.

Also I should mention that there are other products in this universe that do not have these problems. Such as: https://urlaub.check24.de/reisen/spanien
Those are using the same cookie loader. The only difference is the content and searchform below. All other code is under my control.

[widmanski]

The issue seems to persist for https://praesens.co - also tested in Lighthouse 6.4 @ Chrome 88

[patrickhulce]

Thanks @widmanski I can also reproduce on a minified version. I'll go back to bug the chromium issue that it's not fixed :)

For future issue readers: there are two separate problems being discussed here:

• Element uses transition to transition from opacity 0 to opacity 1 (crbug, discussed in https://bugs.chromium.org/p/chromium/issues/detail?id=1104218)
• Element starts offscreen and moves onscreen (currently WAI, discussed in https://github.com/WICG/largest-contentful-paint/issues/61)

[sebacampos]

Thanks @widmanski I can also reproduce on a minified version. I'll go back to bug the chromium issue that it's not fixed :)

For future issue readers: there are two separate problems being discussed here:

• Element uses _transition_ to transition from opacity 0 to opacity 1 (crbug, discussed in https://bugs.chromium.org/p/chromium/issues/detail?id=1104218)
• Element starts offscreen and moves onscreen (currently WAI, discussed in WICG/largest-contentful-paint#61)

@patrickhulce Just wanted to let you know that your comment really helped me.
In my case, the NO_LCP issue was caused by a CSS animation with opacity keyframes:

const HeroContainer = styled.div`
  width: 100vw;
  animation: fadein 2s;
  @keyframes fadein {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`

After removing the animation, Performance scoring started working normally again:

const HeroContainer = styled.div`
  width: 100vw;
`

EDIT: Just found out that changing the 20% keyframe opacity to whatever different from 0 also fixes the problem...