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 👍

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

[adamraine]

Update: This should be fixed for many sites with the latest stable Chrome (M97).

From my testing, the following sites don't experiencing this error anymore:

• https://xavier.dev/
• https://whynot.media/
• https://www.marinaportvell.com/
• https://www.tomhoad.com/
• https://praesens.co/#intro
• https://flug.check24.de/fluege/spanien

The following sites are flaky:

• https://www.tonybatts.com/

The following sites still produce the error:

• https://the-mvm.github.io/

Since this is still reproducible on some sites, I'm going to leave this open and continue tracking the upstream issue.

[tonybatts]

@adamraine Issue is fixed for my site! EDIT: spoke too soon, see comment below for update

Small note - Lighthouse used to show fireworks for 100% perfect score including PWA.

Now it no longer does fireworks.

[adamraine]

That's over in #12563 if you're interested

[tonybatts]

Thanks! Also spoke too soon. The first lighthouse audit worked, but every subsequent audit as given me: Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)

[adamraine]

Ah yup, exact same thing happening to me on DevTools and the CLI.

[akd-io]

I am also getting this on my website, akd.io.

Version 99.0.4844.51 (Official Build) (arm64)

[alexandrsek]

I am getting this error when profiling and auditing my Next.js app. In my case this happens when body tag has margin:0; But when I write margin:1px; for body selector lighthouse works just fine.

Update: After playing with the values in CSS and the layout, I found out that the problem was with fullscreen <img /> that was a bit bigger than viewport height, thats why Lighthouse failed to get LCP. The problem was that it was literally a fullscreen image with nothing in viewport yet (no header or any text). When I added just a div with text before it the problem has gone.

Version 99.0.4844.84 (Official Build) (x86_64)

[trixter13]

Just ran into this issue on v105.0.5140.0

[mwt]

I have this issue now both on the latest chrome and on pagespeed insights:

• https://mattwthomas.com/

I didn't have this error last month. Maybe it's a regression?

The error disappears if I disable the animations. However, the animation is not off screen.

[abordage]

@mwt, you can solve this error by setting the animation's initial opacity to 0.01

[mwt]

@mwt, you can solve this error by setting the animation's initial opacity to 0.01

Thanks. That worked.

[tasesmuemils]

I have the same issue.

https://www.zepasaka.lv/

I have tried these options:
Set the opacity to 0.01 on first animation
Set hero logo div height to 99.5vh

Maybe someone can suggest something?

[adamraine]

@tasesmuemils From what I can tell, the only content elements visible are SVGs.

SVG elements do not qualify for LCP on their own: https://web.dev/lcp/#what-elements-are-considered

[Jiangmenghao]

@mwt, you can solve this error by setting the animation's initial opacity to 0.01

It works, Thank you very much!

[Coding-Kiwi]

For me the issue was that I have a 100vh x 100vw logo on the website and text only shows when you scroll down
as soon as I added a

<span style="opacity: 0.01; user-select: none" class="this-is-for-google-ligthouse-lcp">Test</span>

Text to the dom (which sits in the top left corner) it works

This is really dumb.

[qorbani]

@Coding-Kiwi THIS IS CRAZY!!!!! After losing hours of debugging and trying to figure out what the ***** was going on with LCP, finally, I decided to do what you recommended, and WOWOWOWOWWO!!!! That fixed it!!!

THIS IS SOOOOO DUMB, INDEED!!! 🤯

THANK YOU 🙏

[marijoo]

This problem occured today on airline-strategy.com where some animations are done using framer-motion. Setting the initial opacity to 0.01 fixed the issue but I don’t like this fix.

[Quirksmode]

@Coding-Kiwi THIS IS CRAZY!!!!! After losing hours of debugging and trying to figure out what the ***** was going on with LCP, finally, I decided to do what you recommended, and WOWOWOWOWWO!!!! That fixed it!!!

THIS IS SOOOOO DUMB, INDEED!!! 🤯

THANK YOU 🙏

Same issue for me, can't believe this was the fix, surprised this hasn't affected more people and therefore been fixed by now.

[philipp-winterle]

The problem is only with opacity: 0, which resolved if you set an opacity of 0.001.

I would say placing an unused element in the top left corner is just shifting the problem and a proper missunderstanding of the reason why this happens. You should consider searching for your opacity settings in css and replace 0 with 0.001. Yes this is still not what we want and a wrong behavior how opacity is treated in lh but as long as this issue exists we have to live with it.

Attention: An opacity of 0.01 is sometimes not enough. It can still be visible. To be sure to completely hide your element you have to use 0.001. Try out on the google.com main page and set opacity to 0.01 on the body element. You will see the google logo still shining through.

I would suggest to use css variables to deal with the problem globally. Use the variable everywhere you want to set opacity 0.

:root {
  --opacity_0: 0.001;
}

.class-a {
  opacity: var(--opacity_0);
}