DEV Community

Roman Guivan
Roman Guivan

Posted on

Google Lighthouse failing with NO_LCP error

Image description

Ok babies, so you've all googled REAL HARD, and all they told you was "clean your cache/go incognito mode". Thanks a lot, dude from - that was quite an insight, didn't help me, unfortunately.

You just keep staring into:

Largest Contentful Paint
Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)
Enter fullscreen mode Exit fullscreen mode

scratching your head and thinking what else could have gone wrong. I'll give you a new fresh lead to check!

Run lighthouse cli against your page (its available as a docker container too, so there's no excuse no to try it). If today is your lucky day, you'll see some text, looking suspiciously RED there:

Image description

Whoopsy-poopsy, my friend! As of today, there's a still an open bug in chromium that i have stumbled upon in lighthouse github issues

Animating opacity from 0 to 1, as well as animating things off-screen - might cause chrome thinking that the "Largest contentful paint" will never happen, and quit the lighthouse check.

Unlike FIRST contentful paint - there's no config to offset it. maxWaitForFcp - exists, maxWaitForLcp - doesnt. You can play with non-zero values for pauseAfterFcpMs, networkQuietThresholdMs, pauseAfterLoadMs, cpuQuietThresholdMs - all of which did not help me.

What i did next, was searching for opacity: 0 and transition in our sass files - dropping those did not help either.

The culprit was in the in-house design library we used, that had a nifty class for react-like skeleton-animations.

background-size: 400%, 100%;
animation: xxxx 6s linear infinite;

@keyframes xxxx {
  0% {
    background-position: 200% 0%;
  100% {
    background-position: -200% 0%;
Enter fullscreen mode Exit fullscreen mode

One find-replace of all mentions of this class with "", and one rebuild later - i had my metric displayed as it should.

Send virtual beers if that was it, i'll accept them all.

Top comments (1)

ravavyr profile image

just wondering if google intends to ever fix that in the tool instead of it "erroring".