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.