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 medium.com - that was quite an insight, didn't help me, unfortunately.
You just keep staring into:
Largest Contentful Paint
Error!
Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)
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:
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%;
}
}
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)
just wondering if google intends to ever fix that in the tool instead of it "erroring".