При записи трассировки для вашей страницы произошла ошибка перезапустите lighthouse

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Pick a username

Email Address

Password

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

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 —

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

Many answers online are based on the assumption that lighthouse is detecting the FCP correctly, and so give instructions on how to resolve actual issues with your site, eg: slow load times, incorrect code, javascript errors, etc; or with your browser, eg: cookies, plugins, caching; This is indeed usually the cause.

However, Lighthouse is not infallible, and sometimes has reasons for actually mis-detecting a perfectly functioning page.

In my case, the problem was that Lighthouse appears to sometimes not consider any element which begins life at opacity: 0, even if that beginning-of life is via an animation. For me, this issue was being triggered by a «fade-in» animation which was used to lessen FOUT. I suspect that this might be caused by an over-zealous fix to this issue from 2020, wherein previously any elements with opacity: 0 would be treated as immediately visible.

eg:

/* THIS IS MIS-DETECTED BY LIGHTHOUSE AS NEVER BEING VISIBLE */
body {
    /* default opacity of 1, if animation is not supported */
    opacity: 1;

    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Lighthouse will return the NO_FCP error due to the first frame starting at an opacity of 0, even though the page does soon afterwards become opaque.

To trick Lighthouse into doing the right thing, ensure the first frame begins with some value other than zero.

eg:

/* THIS IS DETECTED BY LIGHTHOUSE AS EVENTUALLY BEING VISIBLE */
body {
    /* default opacity of 1, if animation is not supported */
    opacity: 1;

    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0.01;
    }
    1% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}