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 - 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

[philipp-winterle]

@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.

[philipp-winterle]

@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?

[philipp-winterle]

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...

[ClaryPollack]

I've just experienced this for the first time. @patrickhulce I read your reply from Oct. but, unfortunately, this bug is new for me so what worked in Oct. doesn't appear to work any longer :/

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)

[connorjclark]

Hi @ClaryPollack, can you provide a URL so we can assist you?

[ClaryPollack]

@connorjclark wow, thank you for the fast reply. Was just about to let you all know that it resolved. Ironically, while the problematic element's didn't transition from opacity, I re-read @patrickhulce 's reply from Oct. and the issue was a different type of transition. All is well now. Thank you both :)

[timlaughlin]

I am seeing this error for the first time as well both with the following URL and the dev tools version.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fsullivanbranding.com%2F&tab=desktop

[tonybatts]

Have been getting this same issue for months on this url

https://www.tonybatts.com/

[tomhoad]

https://www.tomhoad.com, textbook case study of this issue

[haavardnk]

I have the same issue. It only happens when using AOS fade animations. Disabling them fixes the issue. Also only happens when the page load is very quick, probably faster than the animation time. Slowing down load times with chrome extensions loaded does not give NO_LCP.

[smileBeda]

Same issue with a plain simple CSS animation. The weird is that logged in the issue doesn't happen, logged out (which visitors will be) it does happen.

And a bit disappointing is that the tools which will determine a part of a site's score in future (see google's panic-making about favouring sites that are fast and score well), isn't even able to create a speed index for a simple CSS animation using some SVG elements moving over a screen.

This may or may not be a bug but it is certainly a tad annoying :)

[amaynez]

Hi all, read all the comments and tried all the suggestions to no avail, I am still getting the NO_LCP issue, but only for mobile on this site: https://the-mvm.github.io/ the desktop test passes perfectly with a high score.

[v-marinkov]

I just encountered the same problem. If I disable the animation-delay, LH passes in DevTools but it always fails at PageSpeed Insights. Are there any tricks for preserving the animation but still pleasing LH?

[Sharpshooter-Dublin]

I have the same issue. It only happens when using AOS fade animations. Disabling them fixes the issue. Also only happens when the page load is very quick, probably faster than the animation time. Slowing down load times with chrome extensions loaded does not give NO_LCP.

I'm using AOS on all pages of my site but only some are throwing up the NO_LCP error. After coming across this thread, I deleted AOS on one troublesome page and it's now working perfectly. However, I've tried the same with other pages throwing up the error and it hasn't worked.

[DennysDionigi]

I got the same problem. I moved many resources to github, and then used jsdeliver as CDN (https://www.jsdelivr.com/github)

What do y'all suggest I can do here: [https://whynot.media] (https://whynot.media )?

Values from Lighthouse are ok (except the Largest LPC which blocks the Performance Report) , while Gtmetrix and Web.Dev are literally killing me.