How to fix "Lighthouse returned error: NO_FCP." when running Google Page Speed Test?

Question

I am running the Google Page Speed test for https://www.oceanluxe.com.au and get the following message:

> Lighthouse returned error: NO_FCP. Something went wrong with the recording
> the trace over your page load. Please run the Lighthouse again. (NO_FCP)
> (NO_FCP)

Can anyone help?

Tried on different servers, tried various URLs as well http://oceanluxe.com.au

I faced the same problem in Wordpress site, I fixed all the jquery issues then it working fine again. — Gurpreet Singh, May 04 '19 at 19:14
It seems the error happens when the tool cannot load the website at all. — , Jul 09 '19 at 03:11
To clarify, you are using https://developers.google.com/speed/pagespeed/insights/ correct? — Dave Sottimano, Nov 14 '19 at 19:36

score 11 · Answer 1 · answered Apr 28 '19 at 00:20

11

Try to do a test again in incognito mode. I had the same problem today and clearing the cookies and cached files helped in my case.

answered Apr 28 '19 at 00:20

Paweł Bystrzan

326
1
4

score 8 · Answer 2 · answered Oct 10 '19 at 13:04

8

I got the same error. It was because the page was not able to print anything on the screen within a stipulated time.I just printed something before time consuming code and that fixed the issue.

answered Oct 10 '19 at 13:04

Ajith P. Francis

151
1
6

To add to this answer. I was using framer-motion to render text with a 1sec duration. There was no other text/color on the website. I think lighthouse couldnt see anything on timeframe so it assumed, I had no content. – Khushal sharma Apr 23 '23 at 03:11

Will Palmer · Answer 3 · 2022-06-12T19:37:07.743

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

Thank you, this was the same problem I was facing, made more obscure due to using Material UI's `` component at the top-level of a React.js single page application. Ended up wrapping individual elements in multiple ``'s instead of a single top-level component. Ensuring that there was at least some content with a non-zero opacity on first load. — barryels, Sep 22 '22 at 06:32

score 3 · Answer 4 · answered Jul 01 '19 at 06:22

You can try this work around, it helped me:

First open "https://www.google.com/" or any good website URL then open you website URL. This may show two tabs mobile and desktop. The mobile tab may give same error so one should click on Desktop tab, it may show status of that URL.

score 2 · Answer 5 · answered Nov 08 '19 at 18:21

Two things can interfere when using the lighthouse tool:

Extensions used
Cookies and cached files

Therefore a 'workaround' here should be straightforward:

Clearing browser data:
Windows, Linux, or Chrome OS ➖ Ctrl + Shift + Del
Mac ➖ ⌘ + Shift + Delete

Using an Incognito window:
Windows, Linux, or Chrome OS ➖ Ctrl + Shift + N
Mac ➖ ⌘ + Shift + N

score 2 · Answer 6 · answered Jun 08 '20 at 13:13

2

A 15 second timeout has been introduced when considering the start of the page load. If your page doesn’t respond or any content within ~15 seconds, Lighthouse will bail. This will result in the NO_FCP error.

Until you are able to get your page to load within this timeframe, you won’t be able to do a scan. In most cases, if nothing appears on the page for 15 seconds, that means there is an issue on the server or a firewall is blocking access.

answered Jun 08 '20 at 13:13

pramod_maddu

93
1
8

Is there an article by GPS/Lighthouse on this somewhere? – rhand Nov 25 '21 at 01:32
1

@rhand I found this https://woorkup.com/lighthouse-returned-error-no_fcp/ – Yuseferi May 24 '22 at 22:04

score 0 · Answer 7 · answered Sep 06 '20 at 07:19

0

Maybe you just have another lighthouse tool already run. Close or stop lighthouse tool on another tab and try again

answered Sep 06 '20 at 07:19

Ramazan

273
3
7

How to fix "Lighthouse returned error: NO_FCP." when running Google Page Speed Test?

7 Answers7