Scroll to content

Fixing the NO_LCP error in Lighthouse

I redesigned this site recently. You might have noticed. Maybe not if it’s your first time here, that’s ok too.

Those full page splash images with everything fading into view look pretty snazzy but there’s one small problem: the Lighthouse test’s Largest Contentful Paint test fails to pick up on any element that starts at opacity: 0, irrespective of the fact that it animates to opacity: 1 a second later, leading to the following error:

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

As it turns out, this is caused by a known Chromium bug which was first reported four years ago and still hasn’t been fixed at the time of writing because it was erroneously marked as a duplicate in their issue tracker.

In the meantime, I’ve found a workaround: the bug is only triggered when you animate what would otherwise be your largest contentful paint element from opacity: 0. Starting from a very low non-zero number (I used 0.01 on this site) avoids triggering the bug and allows the Lighthouse performance test to complete.

This entry was posted in CSS and tagged , , . Bookmark the permalink.

1 Responses to Fixing the NO_LCP error in Lighthouse

  1. Hey, Chris!
    Thanks for your insight regarding the “opacity: 0” issue. I’ve just had the same on of the websites that my company maintains. I can recommend that you set the opacity to 0.0001 instead of just 0. It’ll achieve the same result to the human eye but will be visible for performance auditors like PageSpeed.
    Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *