Lighthouse NO_LCP error due to offscreen animation

CDDelta commented 4 years ago

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

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 commented 4 years ago

Related issue

Try running on a latest version of chrome

patrickhulce commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Thanks @widmanski I can reproduce this as well!

patrickhulce commented 4 years ago

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

adamraine commented 3 years ago

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

danielhaim1 commented 3 years ago

not for me @adamraine (v85.0.4183.121)

RaicuRobert commented 3 years ago

Same here

philipp-winterle commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

patrickhulce commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

ClaryPollack commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Have been getting this same issue for months on this url

https://www.tonybatts.com/

tomhoad commented 3 years ago

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

haavardnk commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

ghost commented 3 years ago

Same issue here. Using animations that go off screen and performance cannot be tested.

"Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)"

https://xavier.dev/

gonssal commented 3 years ago

Having the same issue with https://www.marinaportvell.com/, but only for the mobile section. Desktop always gives 99 and the animations are exactly the same.

After some testing, I've found that if I remove the transition-delay from the elements that appear later in the video hero and most of the other pages' big header sections, then I always get an score on mobile too. Of course I can't do this because the animations were already client-approved.

Also, if you try enough times, you end up getting a score, both from Lighthouse in dev tools and the Page Speed online service: marinaportvell-page-speed-mobile

If this is really what Google uses to rank sites' performance on mobile and thus their position on searches, well I don't think it's good enough sadly.

P.S.: If I just remove the transition-delays, the mobile score gets to 93/94 everytime.

ahmed-abderraham commented 3 years ago

@connorjclark while it's clear this issue is being ignored, can you please clarify if Lighthouse scores are being used to rank sites in Google and if they are penalized when not getting a performance score due to not having a LCP rating?

patrickhulce commented 3 years ago

This issue with offscreen animations is not a Lighthouse issue. It is a problem with the definition of Largest Contentful Paint itself (refer to https://github.com/GoogleChrome/lighthouse/issues/10869#issuecomment-703993158). Folks are free to vent frustrations at Lighthouse contributors, but it won't move anything forward :)

ahmed-abderraham commented 3 years ago

@patrickhulce I'm not venting any frustrations, I'm just asking if the fact that a website is affected by this issue, and thus not getting a Performance score from Lighthouse, will affect its Google Rank.

Considering Google has more than 90% marketshare and have publicly stated that performance is a strong rank factor, specially on mobile, I think it's a very reasonable question from a web developer that might get clients asking why their websites don't rank higher.

Thanks for the thumbs-down anyways.

smileBeda commented 3 years ago

@patrickhulce what is your statement based on? This issue isn’t just happening with off screen animations It’s unrelated to it, if anything, because I wouldn’t know what a logged in versus logged out user would change to an offscreen animation. Just check https://github.com/GoogleChrome/lighthouse/issues/10869#issuecomment-817960456

Surely just because I log in to my website won’t make animation „on screen“ or whatever else. My animations aren’t even offscreen. They are well inside the screen, just hidden with a covering div

Yes this issue is being ignored. That’s what it means when many complain about an issue and no one in the position to adjust or at least feedback on it reacts It’s the definition of ignoring something.

Also people aren’t venting here They are reporting a „I see this too“ issue If that would happen in my projects I’d at least have the grandeur to make a statement as of why I won’t give a *** about it or what people can do about it when they use my tool which (even if it’s not „my“ fault) is broken or acts unexpectedly or In unsatisfactory manner. That’s just the respectful thing to do.

like @ahmed-abderraham question. It is totally justified and even if not due to lighthouse (I wish that where true) they could still soothe people concerns because after all we are not seeing this issue in our staircase or random walk outside the house. We see it in lighthouse.

We are also not asking google or lighthouse to grade our websites and decide what’s good and what’s bad. They do that decision. And thus the least you can do as someone who thinks to be in the position of grading someone’s work, is to be as thorough as possible. Not as sloppy or disrespectful or intransparent as possible

patrickhulce commented 3 years ago

@patrickhulce what is your statement based on?

The fact that this issue explicitly tracks the LCP failure for offscreen animations as mentioned in several previous comments. e.g. https://github.com/GoogleChrome/lighthouse/issues/10869#issuecomment-703678478

Yes this issue is being ignored. That’s what it means when many complain about an issue and no one in the position to adjust or at least feedback on it reacts It’s the definition of ignoring something.

If you see the above history, this issue is not being ignored. We've filed numerous Chromium and WICG bugs where the problem lies and periodically ping the respective owners for updates. If this issue is important to you, I recommend staring and upvoting those issues as the most productive path forward. What further action are you expecting here?

if Lighthouse scores are being used to rank sites in Google and if they are penalized when not getting a performance score due to not having a LCP rating

This core ranking question is never acknowledged here because this community does not have any additional information about search signals. You might be interested in public comments made by search in this area, but that does not answer your question on how lack of LCP data affects ranking simply because contributors here do not know the answer.

Wayne42 commented 2 years ago

Is this fixed yet?

adamraine commented 2 years ago

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:

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 commented 2 years ago

@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 commented 2 years ago

That's over in https://github.com/GoogleChrome/lighthouse/issues/12563 if you're interested

tonybatts commented 2 years ago

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 commented 2 years ago

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

akd-io commented 2 years ago

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

Version 99.0.4844.51 (Official Build) (arm64)

alexandrsek commented 2 years ago

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)