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
Error!
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 *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)